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

问题描述

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

请在此处建议出什么地方了/缺少什么。我提供了大多数相关代码。

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',editable : false
                   }
               ];
 

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

}); 
                           

解决方法

正如@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',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。非常感谢您的帮助！