ext2.0小节

ext2.0小节


1．modal:true这个放在Ext.window里作用是让window成为一个模式窗口,这样当这个窗口弹出后,他的父窗口不可用.


2．当一个Ext.window的closeAction有两种选择close/hide（完全关闭/隐藏）close就是把此window destroy。

hide是把此window隐藏，这样做的复用性比较强，注：如果要重新渲染这个window的html,需要window.body.update(‘html’)。


3．请教，如何单击grid上某行，让它前面的checkbox不跟着选中
sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn});



4．Ext.form的错误提示：
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
qtip: 当鼠标移动到控件上面时显示提示
title: 在浏览器的标题显示，但是测试结果是和qtip一样的
under: 在控件的底下显示错误提示
side: 在控件右边显示一个错误图标，鼠标指向图标时显示错误提示
[element id]: 错误提示显示在指定id的HTML元件中





5．如果需要定义控件有两种方法（以gridPanel为例子）
a．new Ext.grid.GridPanel({
........
})
b．{
xtype:’gridpanel’,
........
}
使用new 的方式是立即创建组件 而使用xtype则是延迟创建 这样的好处是当需要渲染此组件时才创建 类似hibernate的延迟加载 都是为了提高效率！



6．在JS中把JSON字符串转为对象，Ext.decode ( )
在JS中把对象转为JSON字符串，Ext.encode ( )



7．ext获得html标签ext.get(‘id’).dom.value



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中也要加入它


9．可以在容器组件中把hideLabels设置为true，这样将不会显示容器中字段的标签了

 


10．使用enter键代替tab键切换焦点
var el =Ext.get('例如：formmane');
var map = new Ext.KeyMap(el, {
key: Ext.EventObject.ENTER,
fn: function(){
event.keyCode=9;
}
});


11.Ext.get方法是获取一个元素,你可以通过他来修改控件的属性
Ext.getCmp方法是获得一个Ext控件,你可以通过他来调用控件的方法
 

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%'
}