Ext 一点点

Ext 一点点

var  TG =  Ext.extend(Ext.grid.GridPanel,  {
            sm : null,
            cm : null,
            data : null,
            ds : null,
            bb : null,
            // constructor function
            constructor : function() {
                this.sm = new Ext.grid.CheckboxSelectionModel();
                this.cm = new Ext.grid.ColumnModel(
                    [
                        new Ext.grid.RowNumberer(),
                        this.sm,
                        {header:'编号',dataIndex:'id',width:80,sortable:true},
                        {header:'名称',dataIndex:'name',width:80},
                        {header:'性别',dataIndex:'sex',renderer:this.renderSex},
                        {header:'日期',dataIndex:'date',width:100,renderer: Ext.util.Format.dateRenderer('Y 年m月d日')},
                        {header:'描述',dataIndex:'descn',width:200}
                    ]);
                this.data = [
                    ['1','name1','girl','1970-01-15T02:58:04','descn1'],
                    ['2','name2','boy','1970-01-15T02:58:04','descn2'],
                    ['3','name3','girl','1970-01-15T02:58:04','descn3'],
                    ['4','name4','girl','1970-01-15T02:58:04','descn4'],
                    ['5','name5','boy','1970-01-15T02:58:04','descn5']
                ];
                this.ds = new Ext.data.Store({
                    scope: this,
                    proxy: new Ext.data.MemoryProxy(this.data),
                    reader: new Ext.data.ArrayReader({}, [
                        {name: 'id'},
                        {name: 'name'},
                        {name: 'sex'},
                        {name: 'date', type:'date',dateFormat:'Y-m-dTH:i:s'},
                        {name: 'descn'}
                    ])
                });
                this.ds.load();
                
                // split page bar
                this.bb = new Ext.PagingToolbar({
                            pageSize : 20,
                            store : this.ds,
                            displayInfo : true,
                            displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                            emptyMsg : "没有记录"
                        });
                
                TG.superclass.constructor.call(this, {
                    id : 'tg',
                    cm : this.cm,
                    store : this.ds,
                    sm : this.sm,
                    //renderTo : "grid",
                    //autoHeight : true,
                    //autoWidth:true,
                    autoExpandColumn: 6,
                    loadMask : {
                        msg : '正在加载数据,请稍候'
                    },
                    autoScroll : true,
                    bbar: this.bb
                });
            },
            
            renderSex : function (value) {
                if (value == 'boy') {
                    return "<span style='color:red; font-weight:bold;'>男</span>";
                } else {
                    return "<span style='color:green; font-weight:bold;'>女</span>";
                }
            }
        } );
        
        Ext.onReady( function () {
        var centerAreaTabPanel = new Ext.TabPanel({
                id: 'centerArea',
                renderTo:'grid_test',
                deferredRender: false,
                activeTab: 0,
                enableTabScroll: true,
                width : 1000,
                height : 600,
                items: [{
                    title: 'WELLCOME',
                    plain:true,
                    border:false,
                    frame:true,
                    layout:'fit',
                    items : [new TG()]
                }]
            });
        } );