extjs中的選項卡中的網格問題

Question

我已經回顧了有關在選項卡中使用網格的其他文章，並選擇了extend/xtype方法...但是，在選項卡中添加對網格的引用時出現錯誤：

Ext.define('mygrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.mygrid', 
    width:425, 
    height:250, 
    collapsible:true, 
    title:'Simple ListView <i>(0 items selected)</i>', 
    renderTo: Ext.getBody(), 

    store: store, 
    multiSelect: true, 
    viewConfig: { 
     emptyText: 'No images to display' 
    }, 

    columns: [{ 
     text: 'File', 
     flex: 50, 
     dataIndex: 'name' 
    },{ 
     text: 'Last Modified', 
     xtype: 'datecolumn', 
     format: 'm-d h:i a', 
     flex: 35, 
     dataIndex: 'lastmod' 
    },{ 
     text: 'Size', 
     dataIndex: 'size', 
     tpl: '{size:fileSize}', 
     align: 'right', 
     flex: 15, 
     cls: 'listview-filesize' 
    }] 
}); 

Ext.create('Ext.tab.Panel', { 
width: 700, 
height: 200, 
activeTab: 0, 
items: [ 
    { 
     title: 'Item Assets', 
     xtype: 'listView' 
    }, 
    { 
     title: 'Item Assets', 
     bodyPadding: 10, 
     html : 'link to item assets tab' 
    }, 
    { 
     title: 'Item Epi', 
     bodyPadding: 10, 
     html : 'link to epi' 
    }, 
    { 
     title: 'Item Package', 
     bodyPadding: 10, 
     html : 'link to package' 
    }, 
    { 
     title: 'Item Price', 
     bodyPadding: 10, 
     html : 'link to price' 
    }, 
    { 
     title: 'YMM Info', 
     bodyPadding: 10, 
     html : 'link to ymm' 
    }//, 
    //listview,listview,listview 
], 
renderTo : Ext.getBody() 
}); 

我得到的錯誤是：

類型錯誤

「EXT-ALL-debug.js（行5040）：名稱是不明確的

如果（名稱===從| | name.sub字符串（0，from.length）===從）{」

如果我註釋掉‘的xtype：ListView控件’選項卡顯示正確....

我敢肯定，這只是一些簡單的我「M失蹤......

全部代碼在這裏：

Ext.Loader.setConfig({enabled: true}); 

Ext.Loader.setPath('Ext.ux', '/include/extjs/examples/ux/'); 
Ext.require([ 
'Ext.grid.*', 
'Ext.data.*', 
'Ext.util.*', 
'Ext.toolbar.Paging', 
'Ext.ux.PreviewPlugin', 
'Ext.ModelManager', 
'Ext.tip.QuickTipManager', 
'Ext.state.*' 
]); 

Ext.onReady(function() { 
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API); 
Ext.tip.QuickTipManager.init(); 

//added model inside onready 
Ext.define('Manufacturer', { 
    extend: 'Ext.data.Model', 
    fields: ['id', 'part_no', 'tddb_retail', 'tddb_jobber', 'tddb_descr', 'tddb_category' ,'tddb_subcategory'] 
}); 

//separated store into unique var for guaranteeRange 
var store = Ext.create('Ext.data.Store', { 
    model: 'Manufacturer', 
    autoLoad: true, 
    pageSize: 15, 
    loadMask: true, 
    proxy: { 
     type: 'direct', 
       // extraParams:{ codes_id: 410 }, 
     api: { 
        // create: inventory.readManu, 
        read: inventory.readInventory, 
        update: inventory.updateInventory, 
       // destroy: worklist.getResults 
        }, 
      reader: { 
          type: 'json', 
          root: 'data', 
          totalProperty: 'total', 
       successProperty: 'success' 
       }, 
       writer: { 
          type: 'json', 
       writeAllFields: true, 
         encode: false, 
          root: 'data' 
       }, 
     listeners: { 
        exception: function(proxy, response, operation){ 
            Ext.MessageBox.show({ 
             title: 'REMOTE EXCEPTION', 
              msg: operation.getError(), 
              icon: Ext.MessageBox.ERROR, 
             buttons: Ext.Msg.OK 
            }); 
           } 
        }, 

     } 
     }); 

    store.getProxy().extraParams = { codes_id: document.getElementById('codes_id').value }; 

//create the grid 



var pluginExpanded = true; 
var grid = Ext.create('Ext.grid.Panel', { 
    height: 350, 
    width: 700, 
    title: 'Manufacturer URL Listing with info', 
    store: store, 
    tools:[{ 
    type:'save', 
    tooltip: 'Save Data', 
// hidden:true, 

handler: function(event, toolEl, panel){ 
    // refresh logic 
    //rowEditing.cancelEdit(); 
    var sm = grid.getSelectionModel(); 

    Ext.Msg.show({ 
     title:'Update Data', 
     msg: 'Are you sure you want to update the item information?', 
     buttons: Ext.Msg.YESNO, 
     icon: Ext.Msg.QUESTION, 
     fn: function(btn){ 
     if (btn === 'yes'){ 
      store.update(); 
      //store.sync(); 
      store.load(); 
      //Ext.getCmp(grid).getView().refresh(); 
     } 
     } 
    }); 
    } 
}], 
    columns: [ 
     { 
     dataIndex: 'id', 
     flex: 1, 
     text: 'ID', 
        hidden: true 
    }, 
     { 
     dataIndex: 'part_no', 
     flex: 1, 
     text: 'Part Number', 
     editor: 'textfield' 
    }, { 
     dataIndex: 'tddb_retail', 
     flex: 1.3, 
     text: 'TD Retail', 
     editor: 'textfield' 
    }, 
    { 
     dataIndex: 'tddb_jobber', 
     flex: 1.3, 
     text: 'TD Retail', 
     editor: 'textfield' 
    },{ 
     dataIndex: 'tddb_descr', 
     flex: 1, 
     text: 'Description', 
     editor: 'textfield' 
    }, 
    { 
     dataIndex: 'tddb_category', 
     flex: 1, 
     text: 'Category', 
     editor: 'textfield' 
    }, 
    { 
     dataIndex: 'tddb_subcategory', 
     flex: 1, 
     text: 'Sub Category', 
     editor: 'textfield' 
    },], 
      forceFit: true, 
    selType: 'cellmodel', 
    plugins: [ 
    Ext.create('Ext.grid.plugin.CellEditing', { 
     clicksToEdit: 1 
    }) 
    ], 

//paging bar 
bbar: Ext.create('Ext.PagingToolbar', { 
     store: store, 
     pagesize: 15, 
     displayInfo: true, 
     displayMsg: 'Displaying items {0} - {1} of {2}', 
     emptyMsg: "No items to display", 
    }), 

    renderTo: Ext.getBody(), 

} 



); 

Ext.define('mygrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.mygrid', 
    width:425, 
    height:250, 
    collapsible:true, 
    title:'Simple ListView <i>(0 items selected)</i>', 
    renderTo: Ext.getBody(), 

    store: store, 
    multiSelect: true, 
    viewConfig: { 
     emptyText: 'No images to display' 
    }, 

    columns: [{ 
     text: 'File', 
     flex: 50, 
     dataIndex: 'name' 
    },{ 
     text: 'Last Modified', 
     xtype: 'datecolumn', 
     format: 'm-d h:i a', 
     flex: 35, 
     dataIndex: 'lastmod' 
    },{ 
     text: 'Size', 
     dataIndex: 'size', 
     tpl: '{size:fileSize}', 
     align: 'right', 
     flex: 15, 
     cls: 'listview-filesize' 
    }] 
}); 

Ext.create('Ext.tab.Panel', { 
width: 700, 
height: 200, 
activeTab: 0, 
items: [ 
    { 
     title: 'Item Assets', 
     xtype: 'listView' 
    }, 
    { 
     title: 'Item Assets', 
     bodyPadding: 10, 
     html : 'link to item assets tab' 
    }, 
    { 
     title: 'Item Epi', 
     bodyPadding: 10, 
     html : 'link to epi' 
    }, 
    { 
     title: 'Item Package', 
     bodyPadding: 10, 
     html : 'link to package' 
    }, 
    { 
     title: 'Item Price', 
     bodyPadding: 10, 
     html : 'link to price' 
    }, 
    { 
     title: 'YMM Info', 
     bodyPadding: 10, 
     html : 'link to ymm' 
    }//, 
    //listview,listview,listview 
], 
renderTo : Ext.getBody() 
}); 

}); 

任何幫助，不勝感激！

Answer 1

網格的別名是一個「widget.mygrid」。 因此，需要配置的xtype爲：

... 
{ 
    title: 'Item Assets', 
    xtype: 'mygrid' 
} 
....