Extjs的ComboBox控件

继续学习comboBox控件，重点的是控件的定义，store的读取，和控件的扩展。

1、控件的定义及属性，

 var projectProjectType = [
['985', '985工程', ''],
['211', '211工程', '']
];
this._projectProjectType = new Ext.form.ComboBox({
store: projectProjectType,//二维数组的数据源，第一个值表示value，第二个值表示显示的text，其余忽略；如果用一维数组则值同时赋给value和text；
displayField: 'lb',//显示的值域就text
fieldLabel: '所属工程',
value: project.get('typeName'),//开始调用时如有需要，自动赋值
triggerAction: 'all',//请设置为”all”,否则默认 为”query”的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为”all”的话，
每次下拉均显示全部选项 typeAhead: true,//延时查询，与下面的参数配合

typeAheadDelay:250,//默认250
mode: 'local',//获取js本地数据也就是javascript(内存)中的数据，即上面定义的那个projectProjectType
emptyText: '请选择工程',
selectOnFocus: true,//选择的时候鼠标滑过变化
width: 90,//整个框的宽度
listWidth: 90//下拉列表的宽度
});

combo这个控件是需要绑定一个Store数据源才能使用的,因此，在数据绑定中 combo需要指定两个比较关键的属性displayField和valueFielddisplayField指定一个Store的某一个列 名，也就是Store的fields指定的内容而valueField，则是实际combo返回的值，displayField是指示显示的，如 果valueField不指定也行，不过返回值就成了displayField。

2、一种动态XmlStore的读取方法

 this._projectContentType = new Vpms.component.EntityComboBox({
fieldLabel: '所属工程',
store: new Vpms.projects.ProjectContentTypeStore(Ipms.service.projects.ProjectService + '/GetForType', {}),
});

通过构造的Store将后台读取过来的XML数据解析，之后按照相应字段显示出来

store的构造如下：

Vpms.projects.ProjectType = Ext.data.Record.create([{
name: 'id',
type: 'int',
mapping: 'ID'
}, {
name: 'value',
type: 'string',
mapping: 'Value'
}]);
Ipms.data.Entity.apply(Vpms.projects.ProjectType);//定义store的record，包含两个字段id和value;

Vpms.projects.ProjectContentTypeXmlReader = Ext.extend(Vpms.data.XmlReader, {
constructor: function () {
Vpms.projects.ProjectContentTypeXmlReader.superclass.constructor.call(this, Vpms.projects.ProjectType);
}
});//定义XmlReader，用来读取并解析后台传过来的数据，这里扩展的是自定义的一个data.XmlReader解析器，对Ext.data.XmlReader的扩展，更方便的读取需要的数据；


Vpms.projects.ProjectContentTypeStore = Ext.extend(Vpms.data.XmlStore, {
constructor: function (load_url, params) {
Ipms.projects.ProjectContentTypeStore.superclass.constructor.call(this, new Vpms.projects.ProjectContentTypeXmlReader(), load_url, 
params);
}
});//这个store也是对自定义的一个data.XmlStore的扩展，而自定义xmlStore是对Ext.data.store的扩展，并使用以上定义的数据解析器进行xml数据格式的解析，
在用这种store的时候应该注意，后台传过来的是xml格式的数据。

Ext.extend()函数提供了直接访问父类构造函数的途径，通过 SubClass.superclass.constructor.call(this);就可以直接调用父类的构造函数，这个函数的第一个参数总是 this，以确保父类的构造函数在子类的作用域里工作。

如果父类的构造函数需要传入参数，可以讲所需的参数直接传递给它： SubClass.superclass.constructor.call(this,config);这样就得到了一个继承了父类的所有属性和函数的子类。

在点击下拉列表时，调用后台函数获取数据，如下面的params.store.on('load', function (store, records) 。

3、控件的扩展：EntityComboBox和EntitySearch.SearchComboBox，前一种与以上的store结合起来显示的状态为正常的comboBox，而后一种的形状有点不同，看起来很像textField，但是用起来跟comboBox是一样的。

3.1、EntityComboBox

Vpms.component.EntityComboBox = function (params) {//params指的是传进来的当前的comboBox，以下的params.后面的东西就是设置的当前的comboBox的属性；

this.selectEntityId = params.entityId;

params.valueFiled = 'id';
params.lazyInit = false;
params.triggerAction = 'all';
params.forceSelection = true;
params.store.comboBox = this;

Vpms.component.EntityComboBox.superclass.constructor.call(this, params);
params.store.on('load', function (store, records) {//load时加载数据，如果没有记录，设置comboBox为不可编辑状态；
if (records.length == 0)
store.comboBox.disable();
});
}

Ext.extend(Vpms.component.EntityComboBox, Ext.form.ComboBox, {//第一个参数是子类，第二个是父类
onSelect: function (record) {
this.selectEntityId = record.get('id');
Vpms.component.EntityComboBox.superclass.onSelect.call(this, record);
},
getValue: function () {
return Vpms.component.EntityComboBox.superclass.getValue.call(this) != '' ? this.selectEntityId : undefined;
},
getText: function () {
return Vpms.component.EntityComboBox.superclass.getValue.call(this)
},
getEntity: function () {
var selectId = this.getValue();
if (selectId == undefined)
return undefined;

return this.store.getById(selectId);//getById是store里边的用法，表示取得相应id的记录；
},
setSelectEntityId: function (value) {
this.selectEntityId = value;
}
});

Ext.extend(subclass, superclass, [overrides]) 用来继承已有的类，则以上的onSelect、getValue、getText、getEntity和setSelectEntityId
是对父类的override。override属性 类级别的 区别前面 只有一个参数的 是实例级别的

 

自定义的

3.2、EntitySearch.SearchComboBox

图片显示的就是EntitySearch.SearchComboBox的外形，显示的文字是通过自己定义

new Ext.ToolTip({
target: this.getId(),
html: '您可以通过输入用户<span style="color: Red;">姓名</span>或者<span style="color: Red;">拼音缩写</span>查找并选择用户'
});

这种实现方式类似textfield的validator事件，当填写相应的内容时，会自动将填写的内容发送到后台获取对应的records；

而显示的时候，同样的与EntityComboBox一样定义自己的record、store、reader，无论什么方式，最后都继承自Ext.form.ComboBox，然后通过以下这种方式显示需要的字段就可以了。

tpl: new Ext.XTemplate('<tpl for="."><div class="search-item" style="padding: 1px">', '{name}({expertNumber}):{college1},{college2}', '</div></tpl>'),