1.modal:true这个放在Ext.window里作用是让window成为一个模式窗口,这样当这个窗口弹出后,他的父窗口不可用.
-------zhannufeifei的无敌分割线-----------------------------------------------------------
2.当一个Ext.window的closeAction有两种选择close/hide(完全关闭/隐藏)close就是把此window destroy。
hide是把此window隐藏,这样做的复用性比较强,注:如果要重新渲染这个window的html,需要window.body.update(‘html’)。
-------zhannufeifei的无敌分割线-----------------------------------------------------------
3.请教,如何单击grid上某行,让它前面的checkbox不跟着选中
sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn});
-------zhannufeifei的无敌分割线-----------------------------------------------------------
4.Ext.form的错误提示:
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
qtip: 当鼠标移动到控件上面时显示提示
title: 在浏览器的标题显示,但是测试结果是和qtip一样的
under: 在控件的底下显示错误提示
side: 在控件右边显示一个错误图标,鼠标指向图标时显示错误提示
[element id]: 错误提示显示在指定id的HTML元件中
-------zhannufeifei的无敌分割线-----------------------------------------------------------
5.如果需要定义控件有两种方法(以gridPanel为例子)
a.new Ext.grid.GridPanel({
........
})
b.{
xtype:’gridpanel’,
........
}
使用new 的方式是立即创建组件 而使用xtype则是延迟创建 这样的好处是当需要渲染此组件时才创建 类似hibernate的延迟加载 都是为了提高效率!
-------zhannufeifei的无敌分割线-----------------------------------------------------------
6.在JS中把JSON字符串转为对象,Ext.decode ( )
在JS中把对象转为JSON字符串,Ext.encode ( )
-------zhannufeifei的无敌分割线-----------------------------------------------------------
7.ext获得html标签ext.get(‘id’).dom.value
-------zhannufeifei的无敌分割线-----------------------------------------------------------
8.可扩展的grid
(1)首先引入JS:RowExpander.js
(2)定义这个控件
var expander = new Ext.grid.RowExpander({
tpl : new Ext.Template(
//{userName}是data的值
'<p><b>用户名:</b> {userName}</p><br>',
'<p><b>登陆名:</b> {loginName}</p><br>',
'<p><b>职务:</b> {office}</p><br>',
'<p><b>部门:</b> {organize}</p><br>',
'<p><b>用户类型:</b> {userType}</p><br>',
'<p><b>锁定状态:</b> {lockStatus}</p>'
)
});
(3)在Ext.grid.ColumnModel中加入它
(4)在Ext.grid.GridPanel中也要加入它
-------zhannufeifei的无敌分割线-----------------------------------------------------------
9.可以在容器组件中把hideLabels设置为true,这样将不会显示容器中字段的标签了
-------zhannufeifei的无敌分割线-----------------------------------------------------------
10.使用enter键代替tab键切换焦点
var el =Ext.get('例如:formmane');
var map = new Ext.KeyMap(el, {
key: Ext.EventObject.ENTER,
fn: function(){
event.keyCode=9;
}
});
-------zhannufeifei的无敌分割线-----------------------------------------------------------
11.Ext.get方法是获取一个元素,你可以通过他来修改控件的属性
Ext.getCmp方法是获得一个Ext控件,你可以通过他来调用控件的方法
-------zhannufeifei的无敌分割线-----------------------------------------------------------
12.combo(这个是抄来的但是很有用)
属性介绍:在items里,类型(xtype)设置成combo。
在这里定义了一个sotre属性,就是选择值存储的地方,因为是在客户端的数据,所以使用了一个简单存储(SimpleStore)。
在存储里,我们通过一个数组定义了retrunValue和displayText两个字段。
retrunValue字段指定是提交给后台的值
displayText字段指定是在下拉中显示的选择值。
然后我们在data里定义了几组数据(data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[3,'大学']]),我们可以看到,每组数据都是根据 fiedls的定义来组成的,数组里第一个值就是retrunValue的值,第二个值就是displayText的值,例如[1,'小学'],就表示 retrunValue是1,displayText是小学。下面就是很重要的一步了,设置下拉选择框的值和显示文本。
本例中设置了下拉选择框的提交值对象的是存储中的retrunValue字段(valueField :"retrunValue"),显示文本是存储中的displayText字段(displayField: "displayText"),通过这两个设置就可将存储中的数据和下拉框对应起来。
因为数据是在本地,所以设置了模式为local(mode: 'local')。
该下拉列表只允许选择,不允许输入(editable: false),
而且是必须选择一个选项(forceSelection: true)。
在没有选择值时显示为选择学历(emptyText:'选择学历')。
提交form时,该项如果没有选择,则提示错误信息“请选择学历”(blankText:'请选择学历')。
该选项值不允许为空(allowBlank:false)。
大家要注意的是hiddenName和name属性,name只是改下拉的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到结构的,这个大家一定要注意。
因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。
如果要为控件设置默认值,就设置属性value,value的值要设置为提交给后台的值,不要设置为显示文本。例如本例要设置大学为默认值得,则设置value的值为6。
{
xtype:'combo',
store: new Ext.data.SimpleStore({
fields: ["retrunValue", "displayText"],
data: [
[1,'小学'], [2,'初中'], [3,'高中'], [4,'中专'], [5,'大专'], [6,'大学']
]
}),
valueField :"retrunValue",
displayField: "displayText",
mode: 'local',
forceSelection: true,
blankText:'请选择学历',
emptyText:'选择学历',
hiddenName:'education',
editable: false,
triggerAction: 'all',
allowBlank:false,
fieldLabel: '学历',
name: 'education',
anchor:'90%'
}
8月15日更新--zhannufeifei的无敌分割线-----------------------------------------------------------
13.分页参数
bbar: new Ext.PagingToolbar({
pageSize: 15,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
paramNames : {start: 'begin', limit: 'end'},
emptyMsg: "没有记录"
})
这样当你需要ds.load({params:{begin:0,end:15}});时就可以修改参数名了。
8月22日更新--zhannufeifei的无敌分割线-----------------------------------------------------------
14.刷新树,在某些操作(如添加或删除节点)执行后,需要即时刷新树
tree.root.reload()
8月29日更新--zhannufeifei的无敌分割线-----------------------------------------------------------
15.切记:当控件用allowBlank :false(验证不为空)时,如果此控件的value不能为’’,如果需要为空要这么写:value:undefined
-------zhannufeifei的无敌分割线-----------------------------------------------------------
2.当一个Ext.window的closeAction有两种选择close/hide(完全关闭/隐藏)close就是把此window destroy。
hide是把此window隐藏,这样做的复用性比较强,注:如果要重新渲染这个window的html,需要window.body.update(‘html’)。
-------zhannufeifei的无敌分割线-----------------------------------------------------------
3.请教,如何单击grid上某行,让它前面的checkbox不跟着选中
sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn});
-------zhannufeifei的无敌分割线-----------------------------------------------------------
4.Ext.form的错误提示:
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
qtip: 当鼠标移动到控件上面时显示提示
title: 在浏览器的标题显示,但是测试结果是和qtip一样的
under: 在控件的底下显示错误提示
side: 在控件右边显示一个错误图标,鼠标指向图标时显示错误提示
[element id]: 错误提示显示在指定id的HTML元件中
![](http://www.javaeye.com/upload/attachment/33868/2e082b21-4c8a-3f76-b589-c9bf229a3fd1-thumb.png?1218012095)
-------zhannufeifei的无敌分割线-----------------------------------------------------------
5.如果需要定义控件有两种方法(以gridPanel为例子)
a.new Ext.grid.GridPanel({
........
})
b.{
xtype:’gridpanel’,
........
}
使用new 的方式是立即创建组件 而使用xtype则是延迟创建 这样的好处是当需要渲染此组件时才创建 类似hibernate的延迟加载 都是为了提高效率!
-------zhannufeifei的无敌分割线-----------------------------------------------------------
6.在JS中把JSON字符串转为对象,Ext.decode ( )
在JS中把对象转为JSON字符串,Ext.encode ( )
-------zhannufeifei的无敌分割线-----------------------------------------------------------
7.ext获得html标签ext.get(‘id’).dom.value
-------zhannufeifei的无敌分割线-----------------------------------------------------------
8.可扩展的grid
(1)首先引入JS:RowExpander.js
(2)定义这个控件
var expander = new Ext.grid.RowExpander({
tpl : new Ext.Template(
//{userName}是data的值
'<p><b>用户名:</b> {userName}</p><br>',
'<p><b>登陆名:</b> {loginName}</p><br>',
'<p><b>职务:</b> {office}</p><br>',
'<p><b>部门:</b> {organize}</p><br>',
'<p><b>用户类型:</b> {userType}</p><br>',
'<p><b>锁定状态:</b> {lockStatus}</p>'
)
});
(3)在Ext.grid.ColumnModel中加入它
(4)在Ext.grid.GridPanel中也要加入它
-------zhannufeifei的无敌分割线-----------------------------------------------------------
9.可以在容器组件中把hideLabels设置为true,这样将不会显示容器中字段的标签了
-------zhannufeifei的无敌分割线-----------------------------------------------------------
10.使用enter键代替tab键切换焦点
var el =Ext.get('例如:formmane');
var map = new Ext.KeyMap(el, {
key: Ext.EventObject.ENTER,
fn: function(){
event.keyCode=9;
}
});
-------zhannufeifei的无敌分割线-----------------------------------------------------------
11.Ext.get方法是获取一个元素,你可以通过他来修改控件的属性
Ext.getCmp方法是获得一个Ext控件,你可以通过他来调用控件的方法
-------zhannufeifei的无敌分割线-----------------------------------------------------------
12.combo(这个是抄来的但是很有用)
属性介绍:在items里,类型(xtype)设置成combo。
在这里定义了一个sotre属性,就是选择值存储的地方,因为是在客户端的数据,所以使用了一个简单存储(SimpleStore)。
在存储里,我们通过一个数组定义了retrunValue和displayText两个字段。
retrunValue字段指定是提交给后台的值
displayText字段指定是在下拉中显示的选择值。
然后我们在data里定义了几组数据(data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[3,'大学']]),我们可以看到,每组数据都是根据 fiedls的定义来组成的,数组里第一个值就是retrunValue的值,第二个值就是displayText的值,例如[1,'小学'],就表示 retrunValue是1,displayText是小学。下面就是很重要的一步了,设置下拉选择框的值和显示文本。
本例中设置了下拉选择框的提交值对象的是存储中的retrunValue字段(valueField :"retrunValue"),显示文本是存储中的displayText字段(displayField: "displayText"),通过这两个设置就可将存储中的数据和下拉框对应起来。
因为数据是在本地,所以设置了模式为local(mode: 'local')。
该下拉列表只允许选择,不允许输入(editable: false),
而且是必须选择一个选项(forceSelection: true)。
在没有选择值时显示为选择学历(emptyText:'选择学历')。
提交form时,该项如果没有选择,则提示错误信息“请选择学历”(blankText:'请选择学历')。
该选项值不允许为空(allowBlank:false)。
大家要注意的是hiddenName和name属性,name只是改下拉的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到结构的,这个大家一定要注意。
因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。
如果要为控件设置默认值,就设置属性value,value的值要设置为提交给后台的值,不要设置为显示文本。例如本例要设置大学为默认值得,则设置value的值为6。
{
xtype:'combo',
store: new Ext.data.SimpleStore({
fields: ["retrunValue", "displayText"],
data: [
[1,'小学'], [2,'初中'], [3,'高中'], [4,'中专'], [5,'大专'], [6,'大学']
]
}),
valueField :"retrunValue",
displayField: "displayText",
mode: 'local',
forceSelection: true,
blankText:'请选择学历',
emptyText:'选择学历',
hiddenName:'education',
editable: false,
triggerAction: 'all',
allowBlank:false,
fieldLabel: '学历',
name: 'education',
anchor:'90%'
}
8月15日更新--zhannufeifei的无敌分割线-----------------------------------------------------------
13.分页参数
bbar: new Ext.PagingToolbar({
pageSize: 15,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
paramNames : {start: 'begin', limit: 'end'},
emptyMsg: "没有记录"
})
这样当你需要ds.load({params:{begin:0,end:15}});时就可以修改参数名了。
8月22日更新--zhannufeifei的无敌分割线-----------------------------------------------------------
14.刷新树,在某些操作(如添加或删除节点)执行后,需要即时刷新树
tree.root.reload()
8月29日更新--zhannufeifei的无敌分割线-----------------------------------------------------------
15.切记:当控件用allowBlank :false(验证不为空)时,如果此控件的value不能为’’,如果需要为空要这么写:value:undefined