Ext.grid.Panel

Basic GridPanel

Code Editor

Live Preview

Select Code

Ext.create('Ext.data.Store', {

    storeId:'simpsonsStore',

    fields:['name', 'email', 'phone'],

    data:{'items':[

        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },

        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },

        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },

        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }

    ]},

    proxy: {

        type: 'memory',

        reader: {

            type: 'json',

            root: 'items'

        }

    }

});

Ext.create('Ext.grid.Panel', {

    title: 'Simpsons',

    store: Ext.data.StoreManager.lookup('simpsonsStore'),

    columns: [

        { header: 'Name',  dataIndex: 'name' },

        { header: 'Email', dataIndex: 'email', flex: 1 },

        { header: 'Phone', dataIndex: 'phone' }

    ],

    height: 200,

    width: 400,

    renderTo: Ext.getBody()

});

The code above produces a simple grid with three columns. We specified a Store which will load JSON data inline. In most apps we would be placing the grid inside another container and wouldn't need to use the height, width and renderTo configurations but they are included here to make it easy to get up and running.

The grid we created above will contain a header bar with a title ('Simpsons'), a row of column headers directly underneath and finally the grid rows under the headers.

dockedItems :  Object/ Object[]

A component or series of components to be added as docked items to this panel. The docked items can be docked to either the top, right, left or bottom of a panel. This is typically used for things like toolbars or tab bars:

var panel = new Ext.panel.Panel({
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        items: [{
            text: 'Docked to the top'
        }]
    }]
});

引用自：http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.grid.Panel-cfg-dockedItems