当前位置: 编程技术>jquery
Extjs4实例:Form下拉列表combobox remot模式
来源: 互联网 发布时间:2014-09-03
本文导语: 本节内容: Extjs4 Form下拉列表combobox remot模式 例子: 代码示例: Ext.onReady(function(){ Ext.QuickTips.init(); //部门类 Ext.define("department",{ extend:'Ext.data.Model', fields:[ ...
本节内容:
Extjs4 Form下拉列表combobox remot模式
例子:
代码示例:
Ext.onReady(function(){
Ext.QuickTips.init();
//部门类
Ext.define("department",{
extend:'Ext.data.Model',
fields:[
{name:'name'},
{name:'id'},
{name:'c'}
]
});
var st = Ext.create("Ext.data.Store",{
model:'department',
pageSize:4,//分页,需要前后台结合
proxy:{
type:'ajax',
url:'/extjs/extjs!getComboBox.action'
}
});
Ext.create("Ext.form.Panel",{
title:'本地combobox实例',
renderTo:'formDemo',
bodyPadding:'5 5 5 5',
height:100,
width:470,
frame:true,
defaults:{ // www.
labelSeparator :": ",
labelWidth : 70,
width : 300,
allowBlank: false,
msgTarget : 'side',
labelAlign:'left',
pageSize:4
},
items:[{
xtype:'combobox',
listConfig:{//控制下拉列表的样式
emptyText:'没有找到匹配的数值',
maxHeight:200,
getInnerTpl :function(){//模板
return "
}
},
fieldLabel:'城市',
name:'post',
queryMode:'remot',//[local|remot]
store:st,
valueField:"id",
minChars:1,//最少输入字符
triggerAction :'all',
queryDelay : 400,
queryParam:'whereSql',
multiSelect:true,//允许多选
displayField :'name'
}]
});
});
Ext.QuickTips.init();
//部门类
Ext.define("department",{
extend:'Ext.data.Model',
fields:[
{name:'name'},
{name:'id'},
{name:'c'}
]
});
var st = Ext.create("Ext.data.Store",{
model:'department',
pageSize:4,//分页,需要前后台结合
proxy:{
type:'ajax',
url:'/extjs/extjs!getComboBox.action'
}
});
Ext.create("Ext.form.Panel",{
title:'本地combobox实例',
renderTo:'formDemo',
bodyPadding:'5 5 5 5',
height:100,
width:470,
frame:true,
defaults:{ // www.
labelSeparator :": ",
labelWidth : 70,
width : 300,
allowBlank: false,
msgTarget : 'side',
labelAlign:'left',
pageSize:4
},
items:[{
xtype:'combobox',
listConfig:{//控制下拉列表的样式
emptyText:'没有找到匹配的数值',
maxHeight:200,
getInnerTpl :function(){//模板
return "
{name}.{id}
"; }
},
fieldLabel:'城市',
name:'post',
queryMode:'remot',//[local|remot]
store:st,
valueField:"id",
minChars:1,//最少输入字符
triggerAction :'all',
queryDelay : 400,
queryParam:'whereSql',
multiSelect:true,//允许多选
displayField :'name'
}]
});
});