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行）

TypeError：名称未定义

if（name === from || name.substring（0，from.length）=== from）{“

如果我注释掉“xtype：listView”，则标签会正确显示....

我确信这只是一件我很想念的事情......

完整代码：

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'
}
....

在extjs中的选项卡中出现网格问题

1 个答案: