ExtJS：菜单ComboBox及级联菜单应用
2024-10-18 21:21:30
首页一级菜单查询分组，二级菜单查询分组中的车辆信息。
定义分组数据模型：
Ext.define(
'group',
{
extend:'Ext.data.Model',
fields:[
{name:'groupid',mapping:'groupid',type:'int'},
{name:'groupname',mapping:'groupname',type:'string'}
]
}
);
定义分组groupStore：
var groupStore = Ext.create('Ext.data.Store', {
model:'group',
proxy : {
type:'ajax',
url : 'group/getgroup' ,//请求url
reader : ({
type:'json',
totalProperty: "totalAllGroup", //totalRecords属性由json.results得到
successProperty: true, //json数据中，保存是否返回成功的属性名
root: 'dataOfAllGroup' , //构造元数据的数组由json.rows得到
//idProperty : "id"
}),
autoLoad:true,
remoteSort:true
}});
groupStore.load();//加载数据
定义分组ComboBox
var groupCombo = Ext.create('Ext.form.ComboBox', {
id : 'group',
fieldLabel : '所属部门',
labelSeparator : '：',
labelWidth: 80,
triggerAction : 'all',
store : groupStore,
displayField : 'groupname',
valueField : 'groupid',
loadingText : '正在加载数据...',
queryMode : 'local',
forceSelection : true,
value: '',
typeAhead : true,
width: 240,
allowBlank:false,
margin: '3 5 3 10',
emptyText : '请选择所属部门',
listeners:{ //用于二级菜单，若是单菜单可注释掉该监听事件
select : function(combo, record,index){
Ext.getCmp('device').clearValue();//上级combo在select事件中清除下级的value
Ext.getCmp('device').getStore().load({
url: 'device/getdevice/' + combo.value,
});
}
}
});
以上是单菜单的代码，添加二级菜单，参考下面：
定义车辆数据模型：
Ext.define(
'model',
{
extend:'Ext.data.Model',
fields:[
{name:'id',mapping:'id',type:'int'},
{name:'carno',mapping:'carno',type:'string'}
]
}
);
定义车辆deviceStore：
var deviceStore = Ext.create('Ext.data.Store', {
model:'model',
proxy : {
type:'ajax',
url : 'device/getdevice' ,
reader : ({
type:'json',
totalProperty: "totalAllDevice", //totalRecords属性由json.results得到
successProperty: true, //json数据中，保存是否返回成功的属性名
root: 'dataOfAllDevice' , //构造元数据的数组由json.rows得到
//idProperty : "id"
}),
}});
定义车辆ComboBox
var deviceCombo = Ext.create('Ext.form.ComboBox', {
id : 'device',
fieldLabel : '车牌号',
labelSeparator : '：',
labelWidth: 80,
triggerAction : 'all',
store : deviceStore,
displayField : 'carno',
valueField : 'carno',
loadingText : '正在加载数据...',
queryMode : 'local',
forceSelection : true,
value: '',
typeAhead : true,
width: 240,
allowBlank:false,
margin: '3 5 3 10',
emptyText : '请选择查询的车辆'
});
重点在于：queryMode : 'local',如果不选择从本地获取数据源，则会重新去远程remote获取。
最新文章
- C# 给PDF添加图片背景
- 快速上手seajs——简单易用Seajs
- CF 375B Maximum Submatrix 2[预处理 计数排序]
- vi/vim初步接触
- ALV界面将可编辑字段值保存到内表中
- 谈谈arm下的函数栈
- Error Code: 1175
- nls_sort和nlssort 排序功能介绍
- Andoid实现手动绘图
- ASP.NET页面传值的几种方式
- Nginx模块开发入门（转）
- js精要之构造函数
- java基础学习——集合
- [FromBody]与[FromForm]区别
- 关于写作那些事之github告诉我构建失败,然后呢?
- Apache生产配置
- Java基础知识盘点（二）- 集合篇
- redis命令String类型（四）
- 三.HashMap原理及实现学习总结
- ubuntu14.04 terminator字体挤在一起问题