计算机名词a

首先导入ext的包包，样式库等

其次就是做一个 extgrid，里面定义显示的属性，值等等。header里面的值要和你数据源的值对应。

其次定义数据源，发送到后台的。

后台可以返回xml，也可以返回json的字符串。

附：大概的例子：

//页面加载时执行的操作-------------------------------------------------
Ext.onReady(function(){

//alert(document.all('AreaID').value);
createPanel();
createLayout();
});
//公共变量-----------------------------------------------------------------

var panels;

//布局管理--------------------------------------------------------------
function createLayout(){
new Ext.Viewport({
layout:'border',
items:[{
region:'center',
id:'panel',
xtype:'panel',
//activeTab:0,
layout:'fit',
contentEl:'dms-content',
items:panels
}]
})

}
//搭建一个右面的面板，里面包含了一个grid-------------------------------------
function createPanel(){
//详细
//----构建grid
grid = new Ext.grid.GridPanel({
id:'SearchGrid',
loadMask:{msg:"数据加载中，请稍等..."},
height:400,

store:ds,
columns:[
{header:'工号',dataIndex:'workNo',width:100},
{header:'姓名',dataIndex:'name',width:100},
{header:'卡号',dataIndex:'cardNO',width:100},
{header:'部门',dataIndex:'deptname',width:80},
{header:'职务',dataIndex:'dutyName',width:80},
{header:'当前基站',dataIndex:'jiZhan',width:130},
{header:'入井时间',dataIndex:'inTime',width:160},
{header:'井下停留时长',dataIndex:'overTime',width:130},
{header:'进入时间',dataIndex:'enterTime',width:160},
{header:'超时',dataIndex:'overTime1',width:130}
],
tbar:[
'工号：','-',{

xtype:"textfield",
width:80,
name: 'personID'
},'-',
'卡号：',
'-',
{

xtype:"textfield",
width:80,
name: 'cardNo'
},'-',
'姓名(拼音缩写)：',
'-',
{

xtype:"textfield",
width:80,
name: 'userName'
},'-',
{
text:'查询',
iconCls:'tool-find',
handler:function(){

var thisname = Ext.getDom('personID').value
var thisenname = Ext.getDom('cardNo').value
var username = Ext.getDom('userName').value
//alert(thisname+"|"+thisenname);
searchFn(thisname,thisenname,username)
ds.reload()
}
}],
bbar:new Ext.PagingToolbar({
store:ds,
displayMsg: '当前显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录",
displayInfo:true,
pageSize:20
}),
border:false ,

view: new Ext.grid.GroupingView({
showGroupName: false,
enableNoGroups:false, // REQUIRED!
hideGroupedColumn: true
}),
animCollapse: false


});

panels = new Ext.Panel({
border: false,
layout:'fit',
title:'区域下井人员信息列表',
items: grid
});

}
var reader = new Ext.data.JsonReader({
totalProperty:'total',

root:"demo",
fields: [
"personID",
"workNo",
"cardNO",
"jiZhan",
"name",
"dutyName",
"deptname",
"inTime",
"overTime",
"enterTime",
"overTime1"
]
});

//定义的数据源--------------------------------------------------------------------------
var ds = new Ext.data.GroupingStore({
reader:reader,
remoteSort: true,
groupField:'jiZhan',
proxy: new Ext.data.HttpProxy({
url:'../servlet/PersonListServlet?AreaID='+document.all('AreaID').value
}),

groupField:'jiZhan',
sortInfo:{field:'jiZhan', direction: "ASC"},
baseParams:{
limit:20
},
totalProperty:'total',
root:'demo'

});
ds.load({
params:{start:0}
});
var summary = new Ext.grid.GroupSummary();

//数据源重载
function searchFn(personID,cardNo,name) {
// 获取Grid

var grid = Ext.getCmp("SearchGrid");
if(grid == null) {
Ext.MessageBox.show({
title: '提示信息',
msg: '找不到列表控件！',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
return;
}
// 获取Grid中的数据存储
var store = grid.store;
if(store == null) {
Ext.MessageBox.show({
title: '提示信息',
msg: '找不到数据适配器！',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
return;
}
// 把数据加载到数据存储中
store.load({
// 传一些搜索参数
params:{
start: 0,
limit: 20,
workNo: personID,
cardNo : cardNo,

Name: name
}
});

// 把参数保存到数据存储中(把上面除了start和limit不复制之外，把全部复制下来就可以了)
store.on('beforeload',function() {
Ext.apply(
this.baseParams,
{
workNo: personID,
cardNo : cardNo,

Name: name

});
});
}