ext学习笔记1 gridPanel

来源：互联网发布：js中event属性编辑：程序博客网时间：2024/04/30 12:14

<html>

</html>

Ext.onReady(function() {

test2();

});

function test2() {

var cm = new Ext.grid.ColumnModel([

{header:'编号', dataIndex:'id'},

{header:'名称', dataIndex:'name'},

{header:'描述', dataIndex:'descn'}

]);

var data = [

['1', 'male', 'name1', 'descn1'],

['2', 'female', 'name2', 'descn2'],

['3', 'male', 'name3', 'descn3'],

['4', 'female', 'name4', 'descn4'],

['5', 'male', 'name5', 'descn5']

];

var ds = new Ext.data.Store({

proxy: new Ext.data.MemoryProxy(data),

reader: new Ext.data.ArrayReader({}, [

{name: 'id'},

{name: 'sex'},

{name: 'name'},

{name: 'descn'}

])

});

ds.load();

// 一定要在ds和cm都写好了以后再写grid

var grid = new Ext.grid.GridPanel({

el: 'grid',// html中div的id

ds: ds,

cm: cm

});

grid.render();

}

function test1() {

//var sm = new Ext.grid.CheckboxSelectionModel();

var cm = new Ext.grid.ColumnModel([

/*{header:'NO.',renderer:function(value, cellmeta, record, rowIndex){

return rowIndex + 1;

}},*/

//new Ext.grid.RowNumberer(),

//sm,

{header:'编号',dataIndex:'id', sortable:true},

{header:'名称',dataIndex:'name', sortable:true},

{header:'性别',dataIndex:'sex', sortable:true},

{header:'描述',dataIndex:'descn', sortable:true}

]);

var data = [

['1','name1','male', 'descn1'],

['2','name2','female', 'descn2'],

['3','name3','male', 'descn3'],

['4','name4','female', 'descn4'],

['5','name5','male', 'descn5']

];

var ds = new Ext.data.Store({

proxy: new Ext.data.MemoryProxy(data),

reader: new Ext.data.ArrayReader({}, [

{name: 'id', mapping:0},

{name: 'name', mapping:1},

{name: 'sex', mapping:2},

{name: 'descn', mapping:3}

])

});

ds.load();

var grid = new Ext.grid.GridPanel({

el: 'grid',

cm: cm,

ds: ds/*,

sm: sm,

bbar: new Ext.PagingToolbar({

pageSize: 3,

store: ds,

displayInfo: true,

displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',

emptyMsg: "没有记录"

})*/

});

grid.render();

}

</script>