从服务器端动态检索GridPanel模型/存储/列

我有一个GridPanel,在DB SP返回表的列之后,必须动态创建它的商店模型和列模型。

我的问题是如何将值(字符串或JSON)从服务器传递给GridPanel?

Ext.define('Base.GridPanel', { extend: 'Ext.grid.Panel', xtype: 'gridpanel', flex: @BFE.Frontend.Defaults.BaseGridPanel.flex, hideMode: '@BFE.Frontend.Defaults.BaseGridPanel.hideMode', collapsible: true, constructor: function(id, title, columns, store) { this.id = id; this.title = title; this.columns = columns; this.store = store; this.callParent(); } }); 

我现在使用这个自定义的GridPanel以及以下模型和存储。

 Ext.define('Tasks', { extend: 'Ext.data.Model', fields: [ {name: 'Case_ID', type: '@MCSJS.Models.DataType.Auto'}, {name: 'BP_Name', type: '@MCSJS.Models.DataType.Auto'}, {name: 'Project', type: '@MCSJS.Models.DataType.Auto'}, {name: 'Business_Unit', type: '@MCSJS.Models.DataType.Auto'}, {name: 'Task', type: '@MCSJS.Models.DataType.Auto'}, {name: 'Title', type: '@MCSJS.Models.DataType.Auto'}, {name: 'Last_Edit', type: '@MCSJS.Models.DataType.Auto'}, {name: 'Entity_Name', type: '@MCSJS.Models.DataType.Auto'}, {name: 'Process_Instance_ID', type: '@MCSJS.Models.DataType.Auto'}, {name: 'Start_of_Business', type: '@MCSJS.Models.DataType.Auto'}, {name: 'Last_User', type: '@MCSJS.Models.DataType.Auto'} ] }); var myTaskStore = Ext.create('Ext.data.Store', { storeId: 'myTasks', model: 'Tasks', autoLoad: true, proxy: { type: 'ajax', url: '/Task/GetMyTaskData', reader: { type: 'json', root: 'data' } } }); 

这是我创建GridPanel的方法:

 var columns = [ { text: 'Case ID', dataIndex: 'Case_ID' }, { text: 'BP Name', dataIndex: 'BP_Name' } ]; new Base.GridPanel('@BFE.Frontend.MyTask.GridPanel', 'My Tasks', columns, myTaskStore) 

Ext为此提供了一些支持。 您可以通过向服务器响应添加metaData属性来发送模型配置。 您可以使用metaProperty选项配置属性的名称。

文档并没有明显,但您可以通过这种方式重新配置模型的字段。 这是那种可以做到的响应:

 { data: [...] ,metaData: { // This will be recognized and processed automatically // by the proxy fields: [ {name: "id", type: "int"}, {name: "myField", type: "string"}, ... ] // This one is for our own usage, see bellow ,columns: [ {dataIndex: "id", text: "ID}, {dataIndex: "myField", text: "My field"}, ... ] } } 

如文档中所述,当数据模型发生更改时,您也需要更新组件。 Sencha metachange提供了metachange 。 请注意,虽然在代理中记录,但此事件将由商店中继。

最后,要更新网格的列模型,您需要reconfigure方法。 例如,您可以通过以下方式修改网格类,以使其从服务器响应中自动重新配置:

 Ext.define('Base.GridPanel', { extend: 'Ext.grid.Panel' // ... // You can add your listener in initComponent, if you're // reluctant to extend a method docuemented as private... ,bindStore: function(store) { // unbind previously bind store, if any var previous = this.getStore(); if (previous) { previous.un('metachange', this.onMetaChange, this); } // bind to the meta change event this.getStore().on('metachange', this.onMetaChange, this); this.callParent(arguments); } ,onMetaChange: function(store, meta) { var columns = meta.columns; if (columns) { this.reconfigure(null, columns); } } }); 

更新

触发metachange事件时会调用onMetaChange方法,因为我已将此注册为此行的侦听器:

 this.getStore().on('metachange', this.onMetaChange, this); 

当代理检测到服务器响应中的某些元数据时,将触发事件本身。 具体地说,当服务器响应中存在metaData属性(或您可能已配置为代理的metaProperty的任何名称)时,会发生这种情况。

侦听器有效地传递响应中存在的原始metaData对象作为其第二个参数(在我的示例中名为meta )。 因此,您的服务器可以在其中放置您需要的任何信息(例如,新的字段标签,工具提示文本等)。

bindStorebindStore中已存在的GridPanel 。 在这里我覆盖它,因为我需要一个地方在商店注册我的事件监听器。 顾名思义,这个方法被调用来将商店绑定到组件。 它可以是初始商店,也可以是新商店。 这是我更喜欢覆盖此方法而不是initComponent方法。 如果稍后在组件生命周期中更改商店,我的自定义侦听器将从旧商店解除绑定并附加到新商店。

arguments关键字是Javascript的特质。 它表示已传递给函数的所有参数。 callParent是由Ext提供的用于调用父方法的甜心; 它将数组作为将传递给父级的参数。 所以this.callParent(arguments)调用父方法而不必知道被覆盖方法的所有参数究竟是什么。 如果方法的论据要改变的话,那就更容易了,而且对未来的变化也更有弹性……

我很高兴为您指出关于覆盖Ext的全面指南…不幸的是我找不到一个快速搜索: – /