Grid初识三

最新推荐文章于 2024-11-27 20:35:32 发布

iteye_14115

最新推荐文章于 2024-11-27 20:35:32 发布

阅读量119

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJs 文章标签： EXT

本文链接：https://blog.youkuaiyun.com/iteye_14115/article/details/81898113

ExtJs 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架创建网格面板的例子。该网格面板包括id、email、姓名、性别和年龄等字段，展示了如何从指定URL加载JSON数据并显示在网格中。通过这个例子，读者可以了解到ExtJS中GridPanel组件的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.onReady(function(){

var fields = ["id","name","email","sex","age"];

var store = new Ext.data.Store({
url:"user/grid-data.js",
reader:new Ext.data.JsonReader({})
});
store.load();

var cm = new Ext.grid.ColumnModel([{
header:"id",
dataIndex:"id"
},{
header:"email",
dataIndex:"email"
},{
header:"姓名",
dataIndex:"name"
},{
header:"性别",
dataIndex:"sex"
},{
header:"年龄",
dataIndex:"age"
}]);

var grid = new Ext.grid.GridPanel({
title:"grid列表显示示例",
width:600,
height:300,
cm:cm,
store:store
});
grid.render(Ext.getBody());
});

//user/grid-data.js
{
metaData:{
totalProperty:"total",
root:"xx",
fields:["id","name","email","sex","age"]
},
total:100,
xx:[{
id:"1",
name:"langsin1",
email:"langsin@langsin.com",
sex:"0",
age:"20"
},{
id:"2",
name:"langsin2",
email:"langsin@langsin.com",
sex:"0",
age:"21"
},{
id:"3",
name:"langsin3",
email:"langsin@langsin.com",
sex:"0",
age:"22"
},{
id:"4",
name:"langsin4",
email:"langsin@langsin.com",
sex:"0",
age:"23"
},{
id:"5",
name:"langsin5",
email:"langsin@langsin.com",
sex:"0",
age:"24"
}]
}