- 浏览: 69253 次
- 性别:
- 来自: 北京
最近访客 更多访客>>
最新评论
-
hzfeibao:
总结的很详细啊
Ext.grid.GridPanel -
lixiaodong59421:
Ext菜单可以显示到非ext控件上吗?
Ext.menu.Menu -
lixiaodong59421:
asdfasdfasdf
Ext.menu.Menu -
guanzhongdaoke54007:
有没有详细的,比如例子?
Ext.form.Radio -
deng1259070:
我要列加背景色怎么做?
Ext.grid.GridPanel
文章列表
主要演示以下功能:
包含复选框列、行号列
自定义单元格的渲染
定制表格视图
各种选择模式:单元格、行、复选框
范例源码:
var datas = [[1,"张三",24,"Y",new Date(1986,06,09)], [2,"李四",30,"N",new Date(1980,09,13)], [3,"王五",28,"Y",new Date(1982,01,10)]];
var pers ...
1、Ext.grid.GridPanel
主要配置项:
store:表格的数据集
columns:表格列模式的配置数组,可自动创建ColumnModel列模式
autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0
stripeRows:表格是否隔行换色,默认为false
cm、colModel:表格的列模式,渲染表格时必须设置该配置项
sm、selModel:表格的选择模式,默认为Ext.grid.RowSelectionMo ...
1、范例包含以下功能点:
节点包含复选框
单击节点触发事件
取得所有选中的节点(包括节点获取焦点和复选框选中两种情况)
2、范例源码
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";
Ext.QuickTips.init();
var root = new Ext.tree.TreeNode({
id ...
1、Ext.tree.TreePanel
主要配置项:
root:树的根节点。
rootVisible:是否显示根节点,默认为true。
useArrows:是否在树中使用Vista样式箭头,默认为false。
lines:是否显示树线,默认为true。
loader:树节点的加载器,默认为Ext.tree.TreeLoader。
selModel:树的选择模式,默认为Ext.tree.DefaultSelectionModel。
...
TabPanel不显示面板的标题和头部工具条。
1、主要配置项:
activeTab:初始激活的tab,索引或者id值,默认为none
autoTabs:是否自动将带有'x-tab'样式类的div转成tabs添加到TabPanel中,默认为false。
当该配置项设为true时,需要设置deferredRender为false,还必须使用applyTo。
deferredRender:是否延迟渲染,默认为true。
autoTabSelector:默认为'div.x-tab'。
resizeTab ...
Ext.Viewport代表浏览器窗口的整个显示区域,将document body作为渲染对象,它会根据浏览器窗口的大小自动调整自身的尺寸。
在一个页面中只允许出现一个Viewport实例,没有提供对滚动条的支持。
Ext.onReady(function(){
var accordion = new Ext.Panel({
title: "功能分组",
layout: "accordion",
layoutConfig: {
animate: ...
Ext.layout.VBoxLayout扩展自Ext.layout.BoxLayout,其xtype值为vbox。
主要配置项:
align:子元素在水平方式的对齐方式,可选值有left、center、stretch(水平伸展)、stretchmax,默认为left。
flex:垂直伸缩。将面板的body高减去不伸缩的子元素的高后剩余的高度等分成【flex和值】份,子元素伸缩后占的份数。默认为0,即不伸缩。
pack:子元素在垂直方向的包装方式,可选值有start、center、end,默认为start。
new Ext.Panel({
...
Ext.layout.HBoxLayout扩展自Ext.layout.BoxLayout,其xtype值为hbox。
主要配置项:
align:子元素在垂直方向的对齐方式,可选值有top、middle、stretch(垂直伸展)、stretchmax,默认为top。
flex:水平伸缩。将面板的宽减去不伸缩的子元素的宽后剩余的宽度等分成【flex和值】份,子元素伸缩后占的份数。默认为0,即不伸缩。
pack:子元素在水平方向的包装方式,可选值有start、center、end,默认为start。
new Ext.Panel({
title: ...
Ext.layout.BorderLayout扩展自Ext.layout.ContainerLayout,其xtype值为border。此布局将容器分为5个部分,分别是east、south、west、north、center。其中,center是必须的。
子面板配置项:
region:设置子面板所在区域。
new Ext.Panel({
renderTo: "div2",
frame: true,
layout: "border",
title: "边框布局(BorderLayou ...
Ext.layout.TableLayout扩展自Ext.layout.ContainerLayout,其xtype值为table。
布局的配置项:
columns:设置表格布局的列数。
子面板的配置项:
rowspan:跨行的数量。
colspan:跨列的数量。
new Ext.Panel({
renderTo: "div2",
frame: true,
layout: "table",
layoutConfig: {
co ...
Ext.layout.ColumnLayout扩展自Ext.layout.ContainerLayout,其xtype值为column。
子面板的主要配置项:
columnWidth:以百分比为单位的列宽,必须是大于0小于1的小数,所有列的columnWidth值相加必须等于1。
width:以像素为单位的固定宽度。
百分比计算的基础宽度是父容器的宽度减去固定列宽之后剩余的宽度值。
new Ext.Panel({
renderTo: "div2",
frame: true,
layout: ...
Ext.layout.FormLayout是为表单特殊设计的布局,其xtype值为form。
主要配置项:
labelAlign:字段标签的对齐方式,默认为left。
labelPad:字段标签与字段之间的间距,默认为5。
labelWidth:字段标签的宽度,默认为100。
hideLabels:是否隐藏字段标签,默认为false。
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "side";
new Ext.Panel({
...
Ext.layout.AbsoluteLayout扩展自Ext.layout.AnchorLayout布局,其xtype值为absolute。根据子面板中配置的x/y坐标进行定位,并且坐标值支持使用固定值和百分比两种形式。
new Ext.Panel({
renderTo: "div2",
frame: true,
layout: "absolute",
title: "绝对位置布局(AbsoluteLayout)",
width: 500,
heig ...
Ext.layout.AnchorLayout是根据容器大小为其所包含的子面板进行定位的布局,其xtype值为anchor。
主要配置项:
anchorSize:父容器提供
anchor:子容器提供
加入到使用anchor布局面板中的子面板都支持一个anchor配置项,它是一个包含两个值的字符串,水平值和垂直值。其有效值:
百分比: 100% 50%
第1项数值:表示子面板占父容器宽度的百分比
第2项数值:表示子面板占父容器高度的百分比
如果只提供一个值则只对子面板的宽度生效,高度保持默认值 ...
Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局,其xtype值为card。切换子面板的唯一途径是调用setActiveItem方法。
var panel = new Ext.Panel({
renderTo: "div3",
frame: true,
layout: "card",
title: "卡片式布局(CardLayout)",
height: 300,
activeItem: 0,
...