深入浅出ExtJs的部分代码及注释

<script type="text/javascript">
/**
1、定义列的字段   new Ext.grid.ColumnModel({header:'编号',dataIndex:'id'});
2、定义数据源(数组、json)     var data = [];
3、定义数据解析器
4、加载数据 .load()
5、数据页面呈现 new Ext.grid.GridPanel({});
****/
Ext.onReady(function(){
//定义列的字段
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'}, //header就是列的显示名称，dataIndex相当于表中的列即实际的列名称
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
//定义数据
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];
//定义数据解析器
var store = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data), //获取数据的方式
reader:new Ext.data.ArrayReader({},[ //如何解析数据
{name:'id',mapping:0}, //mapping指定列的顺序，列的下标从0开始
{name:'name',mapping:1},
{name:'descn',mapping:2}
])
})
//加载数据
store.load();
//数据页面呈现
var grid = new Ext.grid.GridPanel({
autoHeight:true, //自动控制高度
renderTo:'form',
store:store,
cm:cm
});
});
</script>
//表格部分属性
<script type="text/javascript">
Ext.onReady(function(){
//定义列的字段
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
//定义数据
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];
//定义数据解析器    数据装载、解析
var store = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
//解析器
reader:new Ext.data.ArrayReader({},[
{name:'id',mapping:0},
{name:'name',mapping:1},
{name:'descn',mapping:2}
])
})
//加载数据
store.load();
//数据页面呈现
var grid = new Ext.grid.GridPanel({
autoHeight:true, //自动设置行高
renderTo:'form', //渲染对象
stripeRows:true, //斑马线效果
LoadMask:true, //加载数据时的遮罩效果
enableColumnMove:false, //禁止列拖动
enableColumnResize:false,//禁止改变列宽
store:store, //数据
cm:cm, //列名
});
});
</script>
//遮罩效果
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([ //定义列标题
{header:'编号',dataIndex:'id'}, //header定义列的显示名称，dataIndex定义列的实际名称
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var data = [ //定义数据源
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({ //定义获取数据的方式
url:'http://www.family168.com/data.json'
}),
reader: new Ext.data.ArrayReader({},[ //定义数据解析器
{name:'id'},
{name:'name'},
{name:'descn'}
])
});
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
// autoHeight:true,//自动高度
width:350, //表格的宽度
height:150, //表格高度
loadMask:true, //加载时实行遮罩效果
store:store,
cm:cm
});
store.load();
});
</script>

评论

1 楼 80后的童年2 2018-01-17  

深入浅出Extjs4.1.1视频教程
网盘地址：https://pan.baidu.com/s/1c3QjKhq 密码: wy2v
备用地址（腾讯微云）：http://url.cn/5HzXyoo 密码：uLBinD

Extjs5.0从入门到实战开发信息管理系统（Extjs基础、Extjs5新特性、Spring、Spring mvc、Mybatis）
网盘地址：https://pan.baidu.com/s/1oAspGue 密码: utjf