Extjs4

Question

我在 Panel 中的项目文件字段的 çhange 事件上定义了一个侦听器。使用 loadData 方法，在 ID 为 documentGridStore 的 Store 上，我能够将数据插入到商店中（调试器显示商店已更新）并且下面打印的计数每次都会正确更新。但是，无论我做什么，面板都没有更新。

请在这里建议什么是 wrong/missing。我已经提供了大部分相关代码。

Ext.define('uploadPaperDocumentDialogPanel', {
extend:'Ext.form.Panel',
...,
items: [{
            xtype: 'combobox',
            name: 'documentType',
            id: 'docTypeId',
            fieldLabel: getText('label.document.type'),
            emptyText: getText('label.select.type'),
            store: 'docTypeStore',
            displayField: 'key',
            valueField: 'value',
            allowBlank : false,
            selectOnFocus : true,
            typeAhead: true,
            forceSelection : true,
            queryMode:'local',
            width: 400
        },
        {
            xtype:'filefield',
            buttonText: 'Browse',
            msgTarget: 'qtip',
            name:'files[]',
            id:'fileId',
            allowBlank:false,
            style: "padding-left: 5px;padding-right: 20px",
            width: 275,
            listeners: {
                change: function(fld, value){
                    var files = fld.fileInputEl.dom.files;
                    var names = [];
                    if(files){
                        names.push({"documentType": Ext.getCmp('docTypeId').getValue() , "fileName": files[0].name});
                        Ext.data.StoreManager.lookup('documentGridStore').loadData(names, true);
                        console.log(Ext.data.StoreManager.lookup('documentGridStore').getCount());
                    }
                
                }
            },
            uploadDocumentGrid
        }]
});

Ext.define('DocumentGridModel', {
    extend: 'Ext.data.Model',
    fields:[
             {name : 'documentType' , type : 'string'}
            ,{name : 'fileName',type : 'string'}
         ]
});

var UploadDocumentStore = Ext.create('Ext.data.Store', {
    model: 'DocumentGridModel',
    storeId:'documentGridStore',
    data:[]
    
});
    
var uploadDocumentGrid = Ext.define('DocumentGrid', {
    extend:'Ext.grid.Panel'
    ,alias:'widget.documentGridId',
    width: 400,
    border:true,
    bodyPadding: 0,  
    title: 'Documents to be uploaded',
    id:'documentGridId',
    iconCls: 'icon-stipNote',
    columnLines: true     
    ,store: Ext.data.StoreManager.lookup('uploadDocumentGridStore')
    ,initComponent : function() {
  
    this.columns= [
                    {
                         header : 'Document Type',
                         id : 'documentType',
                         dataIndex : 'doctype',
                         flex:1,
                         align:"left",
                         editable : false,
                        sortable: false,
                        hideable: false,
                        resizable: false,
                   }, {
                        header : 'Filename',
                        id : 'fileName',
                        dataIndex : 'filename',
                        flex:1,
                        align:"left",
                        sortable: false,
                        hideable: false,
                        resizable: false,
                        editable : false
                   }
               ];
 

     this.store=UploadDocumentStore;
     this.callParent();
 
  }, 
  reloadGrid : function() {
    this.store.reload();
  },
  viewConfig: {
      emptyText: getText('queuegrid.pagingtoolbar.nodatamessage')
  }

});

Answer 1

正如@Arthur Rubens 指出的那样，我开始检查 uploadDocumentGrid 网格。猜猜问题出在哪里！

两列的 uploadDocumentGrid 中的 dataIndex 字段与 DocumentGridModel 列不匹配。我更新了 uploadDocumentGrid 如下，值反映在 UI:

var uploadDocumentGrid = Ext.define('DocumentGrid', {
    extend:'Ext.grid.Panel'
    ,alias:'widget.documentGridId',
    width: 400,
    border:true,
    bodyPadding: 0,  // Don't want content to crunch against the borders
    title: 'Documents to be uploaded',
    id:'documentGridId',
    iconCls: 'icon-stipNote',
    columnLines: true     //INITCOMPONENT
    ,store: Ext.data.StoreManager.lookup('uploadDocumentGridStore')
    ,initComponent : function() {
  
    this.columns= [
                    {
                         header : 'Document Type',
                         id : 'documentType',
                         dataIndex : 'documentType',
                         flex:1,
                         align:"left",
                         editable : false,
                        sortable: false,
                        hideable: false,
                        resizable: false,
                   }, {
                        header : 'Filename',
                        id : 'fileName',
                        dataIndex : 'fileName',
                        flex:1,
                        align:"left",
                        sortable: false,
                        hideable: false,
                        resizable: false,
                        editable : false
                   }
               ];
 

     this.store=UploadDocumentStore;
//finally call the super classes implementation
     this.callParent();
 
  }, 
  // RELOADGRID
  reloadGrid : function() {
    this.store.reload();
  },
  viewConfig: {
      emptyText: getText('queuegrid.pagingtoolbar.nodatamessage')
  }

});

我还在学习extjs。非常感谢您的帮助！

Extjs4 - Ext.grid.Panel 未使用 loadData 函数更新插入 Ext.data.Store 的数据

Extjs4 - Ext.grid.Panel not updated with data inserted into Ext.data.Store using loadData function

extjs