Extjs4 动态获取下拉框

    extjs4动态下拉框，其实是个比较简单的东西，可是在网上找的都是些大牛的方法和说法，我不是很懂，后来自己研究解决的，特意总结一下，发出来分享。

本人第一次写这样的技术博客，不好的地方请大家多包涵。谢谢。


页面extjs代码：

var cboGND = uc.cboEngProperty({
 fieldLabel: '所属模块',//定义下拉框名称
           
emptyText: '功能模块',//初始显示
       
notLoad: false,
       
labelWidth:60,
       
padding:'10 10 10 10',
       
width: 550
       
});

封装好的js代码：

Ext.ns('uc');
Ext.define('PropertyModel', {
extend : 'Ext.data.Model',
idProperty : 'gnid',//下拉框显示可选项的id
fields : [{
name : 'gnid',
type : 'string'
}, {
name : 'gnmc',//可选项名称
type : 'string'
},{
name:'xmid',//相关id
type:'string'
}]
});

uc.cboEngProperty = function(config) {
var storeProperty = Ext.create('Ext.data.Store', {
model : 'PropertyModel',
proxy : {
url :'xlk',//我用的是springmvc，改成自己的访问路径
type : 'ajax',
reader : {
type : 'json',
root : 'dataList'
}
}
});
var cbo = new Ext.form.field.ComboBox(Ext.apply({
store : storeProperty,
triggerAction : 'all',
queryMode : 'local',
emptyText : config.promptText,
valueField : 'gnid',
displayField : 'gnmc',
labelAlign : 'right',
editable : false
}, config));

var _PropertyRecordEmpty = Ext.create('PropertyModel', {
gnid : '',
gnmc : config.promptText == null
? '—— 请选择 ——'//初始的选项显示
: config.promptText
});

// notLoad:不自动加载标志
if (!config.notLoad) {
storeProperty.load({
callback : function() {
storeProperty.insert(0, _PropertyRecordEmpty);
}
});
}

return cbo;
}
});

使用前可以将js代码放在.js文件中，让后
用<script type="text/javascript" src="路径"></script>
进行引用。

   后台传过来的json数据样式：{"success":true,"dataList":[{"gnid":1,"gnmc":"项目管理","xmid":90},{"gnid":5,"gnmc":"用户管理","xmid":90},{"gnid":2,"gnmc":"产品管理","xmid":90},],"children":null,"data":null,"info":null,"msg":null,"single":false,"cascade":false}

以上是本人自己总结学习所得，肯定存在不足之处，希望可以跟大家共同学习，一起进步。