javascript - Gridpanel 没有在 Ext js 4.0.7 的视口(viewport)内显示我的代码有什么问题

Question

我的代码:

 //view port start here dont know where am wrong??
    Ext.create('Ext.container.Viewport', {
      layout: 'border',
     // autoRender:false,
         items: [  {
            region: 'east',
            title: 'Display Selected Frames',
            collapsible: true,
            split: true,
            width: 150
        }, {
            Xtype:'gridPanel',
            title:'Select Parameter and values To Upload in Sheet2',
            region: 'center',
            autoWidth:true,
            autoHeight:true,
           store: store,
          //store:Ext.data.StoreManager.lookup('store'),
          RenderTo:'grid-example',
                 columns: [{
                dataIndex: 'Parameter Name',
                flex: 1,
                text: 'Parameter Name',
                hideable: false,
                 sortable:false
            },
            {
            dataIndex: 'Value1',
            flex: 1.5,
            text: 'Value1',
            hideable: false,
            sortable:false
        }, {
            dataIndex: 'Value2',
            flex: 1.2,
            text: 'Value2',
            hideable: false,
            sortable:false
            }],
            columnLines: true,
            selModel: selModel,
            stripeRows: true,
            frame:true,
            resizable: {
                handles: 's'  
            },
            bbar: Ext.create('Ext.PagingToolbar', {
                pageSize: 10,
                store: store,
                displayInfo: true,
                plugins: Ext.create('Ext.ux.SlidingPager', {})
            }),
            //docueditem are displaying but grid is not displaying

Answer 1

固定代码:

{
    // There is no property `Xtype`, but `xtype`
    // There is no xtype (alias) `gridPanel`, but `gridpanel`
    xtype: 'gridpanel',
    title: 'Select Parameter and values To Upload in Sheet2',
    region: 'center',
    autoWidth: true,
    autoHeight: true,
    store: store,
    // There is no property `RenderTo`, but `renderTo`
    // Also, from the docs for renderTo:
    // "Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render and manage its child items."
    // Thanks Evan Trimboli for pointing on it
    // renderTo: 'grid-example',
    columns: [
        {
            dataIndex: 'Parameter Name',
            flex: 1,
            text: 'Parameter Name',
            hideable: false,
            sortable: false
        },
        {
            dataIndex: 'Value1',
            flex: 1.5,
            text: 'Value1',
            hideable: false,
            sortable: false
        },
        {
            dataIndex: 'Value2',
            flex: 1.2,
            text: 'Value2',
            hideable: false,
            sortable: false
        }
    ],
    columnLines: true,
    selModel: selModel,
    stripeRows: true,
    frame: true,
    resizable: {
        handles: 's'
    }
}