先上图![](https://p-blog.csdn.net/images/p_blog_csdn_net/winderain/393877/o_tietu.jpg)
这中间遇到grid分页和下拉comboBox级联(用户、地域)
源代码如下:
/**/
/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
Ext.onReady(
function
()
...
{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
// Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
// example of custom renderer function
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function statusColor(val)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(val == '在线')...{
return '<span style="color:green;">' + val + '</span>';
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else if(val == '会议中')...{
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
// create the Data Store
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var store = new Ext.data.Store(...{
// this page, an HttpProxy would be better
// proxy: new Ext.data.MemoryProxy(data),
// proxy: new Ext.data.HttpProxy({
// url: 'termSearch.action'
//// url:'../../temp/data.txt'
// }),
url:'termSearch.action',
storeId:'searchResult',
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
// create reader that reads the Topic records
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
reader: new Ext.data.JsonReader(...{
totalProperty: 'totalrows',
root: 'data',
// id: 'id',
fields: [
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{name: 'id', type:'int'},
'consumer',
'area',
'termid',
'name',
'status',
'udate'
// {name: 'udate', mapping: 'udate', type: 'date', dateFormat: 'Y-m-d'}
]
})
// ,
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
// turn on remote sorting
// remoteSort: true
});
var sm = new Ext.grid.CheckboxSelectionModel();// 多选行
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{header:'序号',width:40,dataIndex:'id'},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{header:'用户',width:50,dataIndex:'consumer'},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{header:'地域',width:50,dataIndex:'area'},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{header:'终端编号',dataIndex:'termid'},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{header:'终端名称',dataIndex:'name'},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{header:'终端状态',dataIndex:'status',renderer: statusColor},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{header:'更新日期',dataIndex:'udate'}
]);
// cm.defaultSortable = true;
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
// by default columns are sortable
cm.defaultSortable = true;
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var grid = new Ext.grid.GridPanel(...{
store: store,
cm: cm,
stripeRows: true,
height:350,
width:800,
title:'',
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
tbar: new Ext.PagingToolbar(...{
pageSize: 10,
width:'98%',
store: store,
// paramNames:{rowStart: 'start', rowLimit: 'limit'},
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,共 {2} 条',
emptyMsg: "无记录"
})
});
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
// grid.render('div-grid');
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
// grid.getSelectionModel().selectFirstRow();
var consumerStore = getSelectStore("54");
var termTypeStore = getSelectStore("53");
var termStatusStore = getSelectStore("51");
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
// new Ext.data.SimpleStore({
// fields: ['text'],
// data : [['0','0'],['5','5'],['10','10'],['15','15'],['20','20']],
// fields:[{name: 'value', mapping: 0},{name:'text',mapping:1}],
// autoLoad:true
// })
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var table = new Ext.Panel(...{
layout:'table',
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
defaults: ...{
bodyStyle:'padding:1px'
},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
layoutConfig: ...{
columns: 4
},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
items: [...{
width:165,
layout: 'form',
labelWidth:55,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
items: [...{
xtype:'textfield',
fieldLabel: '终端编号',
name: 'termId',
id:'termId',
anchor:'95%'
}]
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
},...{
width:165,
layout: 'form',
labelWidth:55,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
items: [...{
xtype:'textfield',
fieldLabel: '终端名称',
name: 'termName',
id:'termName',
anchor:'95%'
}]
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
},...{
width:165,
layout: 'form',
labelWidth:55,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
items: [...{
xtype:'textfield',
fieldLabel: '刷新延时',
name: 'timeLapse',
id:'timeLapse',
anchor:'95%',
xtype:'combo',
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
store: new Ext.data.Store(...{
proxy: new Ext.data.MemoryProxy([['0','0'],['5','5'],['10','10'],['15','15'],['20','20']]),
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
reader: new Ext.data.ArrayReader(...{}, [
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{name: 'value',mapping: 0, type: 'int'},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{name: 'text',mapping: 1}
]),
autoLoad:true
}) ,
displayField:'text',
valueField:'value',
hiddenName:'timeLapseValue',
typeAhead: true,
triggerAction: 'all',
forceSelection:true
}],
colspan:2
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
},...{
width:165,
layout: 'form',
labelWidth:55,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
items: [...{
xtype:'textfield',
fieldLabel: '用户',
name: 'consumerId',
anchor:'95%',
id: 'consId',
xtype:'combo',
anchor:'95%',
store: consumerStore,
displayField:'text',
valueField:'value',
hiddenName:'consumerId',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
forceSelection : true,
emptyText:'Select a user...',
allowBlank: false,
selectOnFocus:true,
forceSelection:true,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
listeners:...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
select:...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
fn:function(combo,record,index) ...{
// Ext.Msg.alert('','xxxxxxx');
var store = getSelectStore("55",record.get('value'));
// Ext.Msg.alert(''+store.getCount(),'xxxxxxxxx='+store.getTotalCount());
Ext.getCmp('areaId').clearValue();
Ext.getCmp('areaId').store = store;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(Ext.getCmp('areaId').view)...{
Ext.getCmp('areaId').view.setStore(store);
// Ext.getCmp('areaId').view.refresh();
}
Ext.getCmp('areaId').enable();
}
}
}
}]
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
},...{
width:165,
layout: 'form',
labelWidth:55,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
items: [...{
xtype:'textfield',
fieldLabel: '地域',
name: 'consumerArea',
id:'areaId',
anchor:'95%',
xtype:'combo',
store: new Ext.data.Store(),
displayField:'text',
valueField:'value',
hiddenName:'consumerAreaId',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
forceSelection : true,
emptyText:'Select a area...',
allowBlank: false,
selectOnFocus:true,
forceSelection:true,
disabled:true
}]
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
},...{
width:165,
layout: 'form',
labelWidth:55,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
items: [...{
xtype:'textfield',
fieldLabel: '终端状态',
name: 'termStatus',
id:'termStatus',
anchor:'95%',
xtype:'combo',
store: termStatusStore,
displayField:'text',
valueField:'value',
hiddenName:'termStatusId',
typeAhead: true,
triggerAction: 'all',
forceSelection:true,
editable:false,
mode: 'local'
}]
},
// {
// width:165,
// layout: 'form',
// labelWidth:55,
// items: [{
// xtype:'textfield',
// fieldLabel: '终端类型',
// name: 'termType',
// id:'termType',
// anchor:'95%',
// xtype:'combo',
// store: termTypeStore,
// displayField:'text',
// valueField:'value',
// hiddenName:'termTypeId',
// typeAhead: true,
// triggerAction: 'all',
// forceSelection:true,
// editable:false,
// mode: 'local'
// }]
//
// },
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
layout: 'form',
labelWidth:55,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
items: [...{
name: 'Save',
id: 'Save',
text: '查询',
xtype:'button'
}]
}]
});
// table.render('div-grid');
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var fp = new Ext.FormPanel(...{
// labelAlign: 'top',
frame:true,
title: '.',
bodyStyle:'padding:5px 5px 0',
width: 800
});
fp.add(table);
fp.add(grid);
fp.render("div-form");
//增加基本参数
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
store.on('beforeload', function(store) ...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var para = ...{termId:'',termName:'',consumerId:'',areaId:'',termTypeId:'',tstatus:''};
para.termId = Ext.get('termId').getValue();
para.termName = Ext.get('termName').getValue();
para.consumerId = Ext.get('consumerId').getValue();
para.areaId = Ext.get('consumerAreaId').getValue();
para.tstatus = Ext.get('termStatusId').getValue();
// para.termTypeId = Ext.get('termTypeId').getValue();
Ext.apply(store.baseParams,para);
});
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
store.load(...{params:...{start:0, limit:10}});
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
Ext.get("Save").on('click', function()...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
store.load(...{params:...{start:0, limit:10}});
});
}
);
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
function
getSelectStore(selectId,pid)
...
{
if(!pid) pid = '';
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var store = new Ext.data.Store(...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
proxy: new Ext.data.HttpProxy(...{
method: 'GET',
url: '../webapp-cfg/getSelectOption.action?selectId='+selectId+'&pvalue='+pid+'&random='+Math.random()
}),
reader: new Ext.data.ArrayReader(
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{id: "value"},
[
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{name: 'value', mapping: 'value'},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{name: 'text',mapping:'text'}
]),
autoLoad:true
});
// var sss = new Ext.data.Store();
store.load();
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
store.on('load', function( s, records, options ) ...{
var rs = new Array(1);
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var all = new Ext.data.Record([...{name: 'value', mapping: 'value'},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{name: 'text',mapping:'text'}]);
all.set('value','');
all.set('text','全部');
rs[0] = all;
// sss.add(records);
// sss.insert(0,rs);
s.insert(0,rs);
});
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
return store;
}