ExtJs4 – 테이블 - Grid

1、 ：

Ext.define('log',{

            extend:'Ext.data.Model',

            fields:[

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

                {name: 'user'}, 

                {name: 'type'},

                {name: 'time'},

                {name: 'describe'}

            ]

        });

2、 Store：

        var logStore=Ext.create('Ext.data.Store', {

            pageSize:rowNum,

            model:'log',// 

            remoteSort:true,

            proxy: {

                type:'ajax',

                actionMethods:{read:'POST'},// 。post get

                url: 'log.htm?show',

                extraParams:{//  

                startTime:"",

                endTime:""

              },

               reader: {

                     totalProperty: 'totalRows',// ， 

                     root: 'data'// list

                },

            simpleSortMode :true

            },

            sorters:[{

                property:'id',// 

                direction:"ASC"

            }]

        });

3、 grid：

var logGrid =  Ext.create('Ext.grid.Panel',{

            columnLines: true,

            width: '100%',

            id: 'logGrid',

            bbar:  Ext.create('Ext.PagingToolbar', {// 

                store: logStore,

                id: 'pagger',

                displayInfo: true,

                displayMsg: '  {0}   {1}  ，  {2}  ',

                emptyMsg: " "

            }),

            viewConfig: {

                stripeRows: true

            },

            tbar: [{}],

            columns:[// 

                {xtype: 'rownumberer',text:' ',width:35,align:'left'},

                {header: 'ID',width: 70,dataIndex: 'id',id: 'id',hidden: true,menuDisabled: true},

                {header: ' ',width: 200,dataIndex: 'type',id: 'type',menuDisabled: false},

                {header: ' ',width: 200,dataIndex: 'time',id: 'time',menuDisabled: true},

                {header: ' ',width: 200,dataIndex: 'user',id: 'user',menuDisabled: true},

                {header: ' ',width: 200,dataIndex: 'describe',id: 'describe',menuDisabled: true}

            ],

             forceFit : true,// 

            store: logStore,

            autoScroll: true,

            stripeRows: true

        });

        

        logStore.load({params:{start:1,limit:10}});// 

       //logStore.loadPage(1);// 

<!--
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
-->
<!--
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
-->