|
|
Posted on 2008-05-15 09:55 winderain 阅读(5082) 评论(0) 编辑 收藏 所属分类: JAVA 、 WEB
先上图
grid分页：
把grid和page工具绑定在一起
 // create the Data Store
  var store = new Ext.data.Store( {
 url:'termSearch.action',
storeId:'searchResult',
  reader: new Ext.data.JsonReader({
totalProperty: 'totalrows',
root: 'data',
fields: [
{name: 'id', type:'int'},
'consumer',
'area',
'termid',
'name',
'status',
'udate'
]
 })
 });
var sm = new Ext.grid.CheckboxSelectionModel();// 多选行
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'序号',width:40,dataIndex:'id'},
{header:'用户',width:50,dataIndex:'consumer'},
{header:'地域',width:50,dataIndex:'area'},
{header:'终端编号',dataIndex:'termid'},
{header:'终端名称',dataIndex:'name'},
{header:'终端状态',dataIndex:'status',renderer: statusColor},
{header:'更新日期',dataIndex:'udate'}
]);
// by default columns are sortable
cm.defaultSortable = true;
var grid = new Ext.grid.GridPanel({
store: store,
cm: cm,
stripeRows: true,
height:350,
width:800,
title:'',
tbar: new Ext.PagingToolbar({
pageSize: 10,
width:'98%',
store: store,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，共 {2} 条',
emptyMsg: "无记录"
})
});
窗口布局：
Ext2有很多布局，就是在layout包下，我这里用了TableLayout，TableLayout其实就是和一个HTML中的表格一样，可以作row和column的span
var table = new Ext.Panel({
layout:'table',
defaults: {
bodyStyle:'padding:1px'
},
layoutConfig: {
columns: 4
},
items: [{
width:165,
layout: 'form',
labelWidth:55,
items: [{
xtype:'textfield',
fieldLabel: '终端编号',
name: 'termId',
id:'termId',
anchor:'95%'
}]
},{
width:165,
layout: 'form',
labelWidth:55,
items: [{
xtype:'textfield',
fieldLabel: '终端名称',
name: 'termName',
id:'termName',
anchor:'95%'
}]
},{
width:165,
layout: 'form',
labelWidth:55,
items: [{
xtype:'textfield',
fieldLabel: '刷新延时',
name: 'timeLapse',
id:'timeLapse',
anchor:'95%',
xtype:'combo',
store: new Ext.data.Store({
proxy: new Ext.data.MemoryProxy([['0','0'],['5','5'],['10','10'],['15','15'],['20','20']]),
reader: new Ext.data.ArrayReader({}, [
{name: 'value',mapping: 0, type: 'int'},
{name: 'text',mapping: 1}
]),
autoLoad:true
}) ,
displayField:'text',
valueField:'value',
hiddenName:'timeLapseValue',
typeAhead: true,
triggerAction: 'all',
forceSelection:true
}],
colspan:2
},{
width:165,
layout: 'form',
labelWidth:55,
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,
listeners:{
select:{
fn:function(combo,record,index) {
var store = getSelectStore("55",record.get('value'));
Ext.getCmp('areaId').clearValue();
Ext.getCmp('areaId').store = store;
if(Ext.getCmp('areaId').view){
Ext.getCmp('areaId').view.setStore(store);
}
Ext.getCmp('areaId').enable();
}
}
}
}]
},{
width:165,
layout: 'form',
labelWidth:55,
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
}]
},{
width:165,
layout: 'form',
labelWidth:55,
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'
}]
},{
layout: 'form',
labelWidth:55,
items: [{
name: 'Save',
id: 'Save',
text: '查询',
xtype:'button'
}]
}]
});
下拉框级联：
下拉框级联的思路其实很简单，就是在第一个的select事件中刷新跌入下拉框的store。这里问题主要在如何给第二个下拉框的store赋值，我这里是用了一个方法获得一个新的store，然后赋值的。不仅要各combo赋值，还要给combo.view赋值。一开始就卡在这里了，物理如何我给combo赋值后，下拉框中的值总是不能够及时刷新。给combo.view赋值是需要使用combo.view.setStore(store)这个方法，而不能直接赋值。在赋值的时候需要检查combo.view 是否存在。
var store = getSelectStore("55",record.get('value'));
Ext.getCmp('areaId').clearValue();
Ext.getCmp('areaId').store = store;
if(Ext.getCmp('areaId').view){
Ext.getCmp('areaId').view.setStore(store);
}
Ext.getCmp('areaId').enable();
完整源代码如下
/**//*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
// Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// example of custom renderer function
function statusColor(val){
if(val == '在线'){
return '<span style="color:green;">' + val + '</span>';
}else if(val == '会议中'){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
// create the Data Store
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',
// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
totalProperty: 'totalrows',
root: 'data',
// id: 'id',
fields: [
{name: 'id', type:'int'},
'consumer',
'area',
'termid',
'name',
'status',
'udate'
// {name: 'udate', mapping: 'udate', type: 'date', dateFormat: 'Y-m-d'}
]
})
// ,
// turn on remote sorting
// remoteSort: true
});
var sm = new Ext.grid.CheckboxSelectionModel();// 多选行
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'序号',width:40,dataIndex:'id'},
{header:'用户',width:50,dataIndex:'consumer'},
{header:'地域',width:50,dataIndex:'area'},
{header:'终端编号',dataIndex:'termid'},
{header:'终端名称',dataIndex:'name'},
{header:'终端状态',dataIndex:'status',renderer: statusColor},
{header:'更新日期',dataIndex:'udate'}
]);
// cm.defaultSortable = true;
// by default columns are sortable
cm.defaultSortable = true;
var grid = new Ext.grid.GridPanel({
store: store,
cm: cm,
stripeRows: true,
height:350,
width:800,
title:'',
tbar: new Ext.PagingToolbar({
pageSize: 10,
width:'98%',
store: store,
// paramNames:{rowStart: 'start', rowLimit: 'limit'},
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，共 {2} 条',
emptyMsg: "无记录"
})
});
// grid.render('div-grid');
// grid.getSelectionModel().selectFirstRow();
var consumerStore = getSelectStore("54");
var termTypeStore = getSelectStore("53");
var termStatusStore = getSelectStore("51");
// 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
// })
var table = new Ext.Panel({
layout:'table',
defaults: {
bodyStyle:'padding:1px'
},
layoutConfig: {
columns: 4
},
items: [{
width:165,
layout: 'form',
labelWidth:55,
items: [{
xtype:'textfield',
fieldLabel: '终端编号',
name: 'termId',
id:'termId',
anchor:'95%'
}]
},{
width:165,
layout: 'form',
labelWidth:55,
items: [{
xtype:'textfield',
fieldLabel: '终端名称',
name: 'termName',
id:'termName',
anchor:'95%'
}]
},{
width:165,
layout: 'form',
labelWidth:55,
items: [{
xtype:'textfield',
fieldLabel: '刷新延时',
name: 'timeLapse',
id:'timeLapse',
anchor:'95%',
xtype:'combo',
store: new Ext.data.Store({
proxy: new Ext.data.MemoryProxy([['0','0'],['5','5'],['10','10'],['15','15'],['20','20']]),
reader: new Ext.data.ArrayReader({}, [
{name: 'value',mapping: 0, type: 'int'},
{name: 'text',mapping: 1}
]),
autoLoad:true
}) ,
displayField:'text',
valueField:'value',
hiddenName:'timeLapseValue',
typeAhead: true,
triggerAction: 'all',
forceSelection:true
}],
colspan:2
},{
width:165,
layout: 'form',
labelWidth:55,
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,
listeners:{
select:{
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;
if(Ext.getCmp('areaId').view){
Ext.getCmp('areaId').view.setStore(store);
// Ext.getCmp('areaId').view.refresh();
}
Ext.getCmp('areaId').enable();
}
}
}
}]
},{
width:165,
layout: 'form',
labelWidth:55,
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
}]
},{
width:165,
layout: 'form',
labelWidth:55,
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'
// }]
//
// },
{
layout: 'form',
labelWidth:55,
items: [{
name: 'Save',
id: 'Save',
text: '查询',
xtype:'button'
}]
}]
});
// table.render('div-grid');
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");
//增加基本参数
store.on('beforeload', function(store) {
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();
Ext.apply(store.baseParams,para);
});
store.load({params:{start:0, limit:10}});
Ext.get("Save").on('click', function(){
store.load({params:{start:0, limit:10}});
});
});
function getSelectStore(selectId,pid){
if(!pid) pid = '';
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
method: 'GET',
url: '../webapp-cfg/getSelectOption.action?selectId='+selectId+'&pvalue='+pid+'&random='+Math.random()
}),
reader: new Ext.data.ArrayReader(
{id: "value"},
[
{name: 'value', mapping: 'value'},
{name: 'text',mapping:'text'}
]),
autoLoad:true
});
store.load();
store.on('load', function( s, records, options ) {
var rs = new Array(1);
var all = new Ext.data.Record([{name: 'value', mapping: 'value'},
{name: 'text',mapping:'text'}]);
all.set('value','');
all.set('text','全部');
rs[0] = all;
s.insert(0,rs);
});
|