从服务器端动态检索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
)。 因此,您的服务器可以在其中放置您需要的任何信息(例如,新的字段标签,工具提示文本等)。
bindStore
是bindStore
中已存在的GridPanel
。 在这里我覆盖它,因为我需要一个地方在商店注册我的事件监听器。 顾名思义,这个方法被调用来将商店绑定到组件。 它可以是初始商店,也可以是新商店。 这是我更喜欢覆盖此方法而不是initComponent
方法。 如果稍后在组件生命周期中更改商店,我的自定义侦听器将从旧商店解除绑定并附加到新商店。
arguments
关键字是Javascript的特质。 它表示已传递给函数的所有参数。 callParent
是由Ext提供的用于调用父方法的甜心; 它将数组作为将传递给父级的参数。 所以this.callParent(arguments)
调用父方法而不必知道被覆盖方法的所有参数究竟是什么。 如果方法的论据要改变的话,那就更容易了,而且对未来的变化也更有弹性……
我很高兴为您指出关于覆盖Ext的全面指南…不幸的是我找不到一个快速搜索: – /
上述就是C#学习教程:从服务器端动态检索GridPanel模型/存储/列分享的全部内容,如果对大家有所用处且需要了解更多关于C#学习教程,希望大家多多关注—计算机技术网(www.ctvol.com)!
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/cdevelopment/949042.html