ext学习笔记1 gridPanel

  

< link rel = " stylesheet "  type = " text/css "  href = " ../resources/css/ext-all.css "   />
< script type = " text/javascript "  src = " ../adapter/ext/ext-base.js " ></ script >
< script type = " text/javascript "  src = " ../ext-all.js " ></ script >
< script type = " text/javascript "  src = " ../examples.js " ></ script >

< html >
     < div id = " grid " />
</ html >

< script >
    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 >