Ext.onReady(function(){
Ext.util.CSS.swapStyleSheet("theme", "../resources/css/"
+ window.parent.styleCssValue);
Ext.QuickTips.init();// 这句 必须有,用于初始化提示
Ext.lib.Ajax.defaultPostHeader += "; charset=utf-8";
this.viewport= new Starit.Test.OdnTestViewport();
});
Starit.Test.OdnTestViewport = Ext.extend(Ext.Viewport,{
constructor:function(){
this.initView();
Starit.Test.OdnTestViewport.superclass.constructor.call(this,{
renderTo:Ext.getBody(),
layout:'border'
})
},
initView:function(){
this.gridPanel = new Starit.Test.OnuGrid({viewport:this});
this.items = [this.gridPanel];
}
});
//GridPanel表格的使用
Starit.Test.OnuGrid = Ext.extend(Ext.grid.GridPanel, {
constructor : function(cfg) {
//copy 参数属性到当前对象
var cfg = cfg || {};
Ext.apply(this, cfg);
//加载数据源
this.store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({url : 'XXXX.action', method : 'POST'}),
reader : new Ext.data.JsonReader(
{totalProperty:'total',root:'root'},
[{name : 'instanceId'}, {name : 'geoName'}, {name : 'subGeoName'},
{name : 'officeName'}, {name : 'factoryName'}, {name : 'instanceName'}, {name : 'ip'},
{name : 'devType'},{name : 'userCount'}]
)
});
this.initCombo();//初始化定义的函数
Starit.Test.OnuGrid.superclass.constructor.call(this, {
title : 'ONU信息',
id: '_onuGrid',
region :'center',
border : false,
split:true,
loadMask : {
msg : '正在载入数据,请稍候...'
},
viewConfig:{
forceFit:true
},
cm: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
{header : 'XX',dataIndex:'instanceId', align:'center',width:100, hidden : true},
{header : '市', dataIndex:'geoName', align:'center', width:100, sortable : true},
{header : '区县',dataIndex:'subGeoName', align:'center', width:100, sortable : true},
{header : '局站', dataIndex: 'officeName', align:'center', width: 100, sortable : true},
{header : 'XX', dataIndex: 'factoryName', align:'center', width:100, sortable : true},
{header : 'XX', dataIndex: 'instanceName',align:'center', width:260,sortable : true},
{header : 'XX', dataIndex: 'ip', align:'center', width:160, sortable : true},
{header : '设备型号', dataIndex: 'devType',align:'center', width:100, sortable : true },
{header : 'XX',dataIndex: 'userCount', align:'center', width:110, sortable : true},
{header : 'XX',dataIndex: 'test', align:'center', width:110, sortable : true, renderer: this.testRender}
]),
//分页组建的使用
bbar: new Ext.PagingToolbar({
pageSize : 30,
store : this.store,
firstText : '第一页',
nextText : '下一页',
prevText : '上一页',
refreshText : '刷新',
lastText : '最后一页',
beforePageText : '当前',
afterPageText : '页/共{0}页',
displayInfo : true,
displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
doLoad:function(C){ //为了点击下一页传递参数用
var B={};
A=this.paramNames;
B[A.start]=C;
B[A.limit]=this.pageSize;
B['cityId']=cityId;
B['countyId'] = countyId;
B['officeId'] = officeId;
B['oltId'] = oltId;
B['factoryId'] = factoryId ;
B['name'] = name ;
if(this.fireEvent("beforechange",this,B)!==false){
this.store.load({params: B});
}
},
emptyMsg : "没有记录"
}),
//工具栏
tbar: new Ext.Toolbar({
items : [
'市:', this.cityCombo, '-', '区县:', this.countyCombo, '-','局站:', this.officeCombo, '-',
'厂商:', this.factoryCombo,'-', 'OLT:', this.oltCombo, '-','过滤条件:', this.nameText,'-',
{text : '查询',iconCls : 'find', handler :this.doQuery,scope : this},'->','-',
{text : '按用户测试',iconCls : 'update', handler :this.userTest,scope : this},'-'
]
})
});
this.initListener();
},
initCombo:function(){
this.cityCombo = new Ext.form.ComboBox({
width : 80,
editable : false,
valueField : "geoid",
displayField : "geoname",
mode : 'local',
selectAllOn:true,
triggerAction : 'all',
allowBlank : true,
emptyText : '请选择',
store: new Ext.data.Store({
proxy : new Ext.data.HttpProxy({url : '../XXXXX.action',method : 'POST'}),
reader : new Ext.data.JsonReader({}, [
{name : 'geoid'}, {name : 'geoname'}
])
})
});
}
说明:
displayField: 'name',valueField: 'id':combobox对应数据源的显示列与值列,这两个属性也是必须的
mode: 'local':指定数据源为本地数据源,如果是本地创建的数据源,该属性也是必须的,如果数据源来自于服务器
设置为'remote'表示数据源来自于服务器,关于服务器交互后面我们会讲解。
triggerAction: 'all':请设置为”all”,否则默认 为”query”的情况下,你选择某个值后,再此下拉时,只出现匹配选项,
如果设为all的话,每次下拉均显示全部选项。
editable: false:默认情况下,combobox的内容是可以编辑的,该属性设置为false,
this.cityCombo.store.load({callback:function(){
this.cityCombo.setValue(-1);
},scope:this});
该下拉框加载数据时进行赋值操作
this.cityCombo.on("select", this.countyLoad, this);
on为此元素添加一个事件处理器
该下拉框执行select时间的时候 执行countyLoad函数
多查询API文档
分享到:
相关推荐
extjs editgrid combobox 回显extjs editgrid combobox 回显extjs editgrid combobox 回显extjs editgrid combobox 回显
EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf
extJs4 ComboBox 代码组合框实例,ComboBox 各个主要参数详细解释
extjs4 ComboBox 点击下拉框 出现grid效果 这里只实现了点击下拉框显示gird,点击其他地方grid自动消失
该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能
extjs 自动补全,模拟下拉列表combobox
NULL 博文链接:https://wwwzhouhui.iteye.com/blog/701745
当需要为ComboBox加载数据后进行赋初始选中项的话,如果是写在store.load()之后
代码看起来简洁又漂亮是如何做到的,这篇文章主要为大家详细介绍了Extjs如何让combobox写起来更简单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
extjs的combobox功能很强大,通过它可以模糊查询,只要添加几个属性即可,网上找的代码有的不符合我的要求。 所以自己改了一些代码。
为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下: 代码如下: //部门列表 var comboxDepartmentStore = new Ext.data.Store({ proxy: new Ext.data....
NULL 博文链接:https://dengli19881102.iteye.com/blog/1046190
很多网友在问,Extjs4.0 ComboBox如何实现,好在之前用3.x实现过一个三级联动,如今用Extjs4.0来实现同样的联动效果。其中注意的一点就是,3.x中的model:’local’在Extjs4.0中用queryMode: ‘local’来表示,而且在...
combobox定义 combobox 中的id必须要有,后面要跟据id取combobox值。 代码如下: var comboBox = new Ext.form.ComboBox({ id : “cb”, //必须有 typeAhead : true, readOnly : true, allowBlank : false, autoScro
首先在窗体中添加一个comboBox1和一个imageList(本例中带有三个图片) this.comboBox1.DrawMode = System.Windows.Forms.DrawMode.OwnerDrawFixed;
6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇) 8. ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇) 9. ExtJs2.0学习系列(9)--...
基于Ext3.4的一个扩展Combobox组件