ext表格布局

完整源代码如下
/*
* 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);

});