gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-30 01:05:26 25 4
gpt4 key购买 nike

我有一个 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为了那个原因。请注意,虽然记录在代理中,但该事件将由商店转发。

最后,要更新网格的列模型,您需要 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);
}
}
});

更新

onMetaChange 方法在 metachange 事件被触发时被调用,因为我已经用这一行将它注册为监听器:

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

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

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

bindStore 是一个已经存在于 GridPanel 中的方法。在这里我重写了它,因为我需要一个地方来在商店中注册我的事件监听器。顾名思义,调用此方法将商店绑定(bind)到组件。它可以是初始商店,也可以是新商店。这是我更喜欢覆盖此方法而不是 initComponent 的方法。如果商店在组件生命周期的后期发生变化,我的自定义监听器将与旧商店解除绑定(bind)并附加到新商店。

arguments关键字是 Javascript 的一个特性。它表示已传递给函数的所有参数。 callParent是Ext提供的调用父方法的小甜心;它需要一个数组作为将传递给父级的参数。所以 this.callParent(arguments) 调用父方法时不必知道被覆盖方法的所有参数到底是什么。如果方法的参数发生变化,这会更容易,而且对 future 的变化也更有弹性......

我很乐意向您指出有关在 Ext 中覆盖的综合指南...不幸的是,我无法通过快速搜索找到一个:-/

关于c# - 从服务器端动态检索 GridPanel 模型/存储/列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18769482/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com