检索的GridPanel模型/存储/动态地从服务器端列 [英] Retrieve GridPanel model/store/columns dynamically from server side

问题描述

我有一定有其专卖店模式和列模式动态创建一个DB SP返回表的列后的GridPanel。

我的问题是如何能我传递值（字符串或JSON）■从服务器到的GridPanel？

  Ext.define（'Base.GridPanel {
扩展：'Ext.grid.Panel'，
的xtype：'GridPanel中'，
 
弯曲：@ BFE.Frontend.Defaults.BaseGridPanel.flex，
 hideMode：@ BFE.Frontend.Defaults.BaseGridPanel.hideMode'，
 
可折叠：真，
 
构造：功能（ID，标题，列存储）
 {
 this.id = ID; 
 this.title =称号; 
 this.columns =列; 
 this.store =店; 
 
 this.callParent（）; 
} 
}）; 
  

我用这个自定义与下面的模型和存储沿的GridPanel现在。

  Ext.define（'任务'，{
扩展：'Ext.data.Model'，
 
字段：
 [
 {名称：'CASE_ID，输入：@ MCSJS.Models.DataType.Auto'} 
 {名称：'BP_Name'，类型：'@MCSJS.Models .DataType.Auto'} 
 {名称：'工程，输入：@ MCSJS.Models.DataType.Auto'} 
 {名称：'Business_Unit'，类型：'@MCSJS.Models .DataType.Auto'} 
 {名称：'任务'，输入：@ MCSJS.Models.DataType.Auto'} 
 {名：标题，键入：'@MCSJS.Models .DataType.Auto'} 
 {名称：'Last_Edit，输入：@ MCSJS.Models.DataType.Auto'} 
 {名称：'ENTITY_NAME，键入：'@MCSJS.Models .DataType.Auto'} 
 {名称：'Process_Instance_ID，输入：@ MCSJS.Models.DataType.Auto'} 
 {名称：'Start_of_Business'，类型：'@MCSJS.Models .DataType.Auto'} 
 {名称：'LAST_USER，输入：@ MCSJS.Models.DataType.Auto'} 
] 
}）; 
 
 VAR myTaskStore = Ext.create（'Ext.data.Store'，{
 STOREID：myTasks'，
型：任务，
 AUTOLOAD：真的，
代理：
 {
型：阿贾克斯，
网址：'/任务/ GetMyTaskData'，
读者：
 {
型：'JSON'，
根：数据
} 
} 
}）; 
  

这是我创建的GridPanel：

  VAR列= {[文：案例ID，dataIndex：'CASE_ID'}，
 {文字：'BP名称，dataIndex：'BP_Name'}] 
新Base.GridPanel（'@ BFE.Frontend.MyTask.GridPanel，我的任务，列myTaskStore）
  

解决方案

分机提供了一些支持。您可以通过添加的 元 属性添加到服务器响应。您可以配置带有的 元属性 选项。

的文档并不能使它明显，但你可以重新配置模型的字段这种方式。下面是会做的一种反应：

  {
数据：[...] 
 
，元数据：{
 //这会得到承认和自动处理
 //由代理
字段：[
 {名：ID，键入： INT}，
 {名字：MyField的，键入：串}，
：
] 
 
 //这一个是我们的自己的使用情况，参见下文
，列：[
 {dataIndex：ID，文：ID}，
 {dataIndex：MyField的文字：我的场}，
 ... 
] 
} 
} 
  

由于在doc指出，当数据模型发生变化，你需要更新你的分量。煎茶提供了的 metachange 了点。注意，而在代理记录，本次活动将通过实体店中继

最后，更新网格的列模型，你有的 重新配置 方法。例如，您可以修改您的网格类以下列方式，使其从服务器响应自动重新配置本身：

 外部。定义（'Base.GridPanel'，{
扩展：'Ext.grid.Panel'
 
 // ... 
 
 //您可以添加监听器在initComponent，如果你
 //不愿意延长方法docuemented私人... 
，bindStore：功能（存储）{
 
 //解除绑定以前店如果有的话
变种以前= this.getStore（）; 
如果（前）{
 previous.un（'metachange'，this.onMetaChange，这一点）; 
 $} b 
 $ b //绑定到元更改事件
 this.getStore（）上（'metachange'，this.onMetaChange，这一点）; 
 
 this.callParent（参数）; 
} 
 
，onMetaChange：功能（存储，元）{
无功柱= meta.columns; 
如果（列）{
 this.reconfigure（NULL，列）; 
} 
} 
}）; 
  

更新

在 onMetaChange 在 metachange 事件被触发方法被调用，因为我已经把它注册为有这样的监听器行：

  this.getStore（）上（'metachange'，this.onMetaChange，这一点）; 
  

当代理检测到服务器响应的一些元数据事件本身被激发。具体而言，这种情况发生时，元属性（或任何名字，你可能已经配置为元属性代理）的存在在服务器响应。

侦听器有效地通过原始的元对象，即存在于回应，作为第二个参数（名为元在我的例子）。所以，你的服务器可以让你在它需要的任何信息（如新字段标签，工具提示文本，等等）。

bindStore 是已经存在于的GridPanel 的方法。在这里，我重写它，因为我需要注册在我的店里事件侦听器的地方。顾名思义，这种方法被称为商店绑定到组件。它可以是初始商店，或一个新的。这是一个我一直倾向于覆盖此方法，而不是 initComponent 。如果商店在组件以后的生活改变了，我的自定义监听器会从旧店未绑定，并连接到新的。

的

的 参数 关键字的Javascript的特质。它表示已传递给函数的所有参数。 callParent 是由外部提供调用父方法的糖果;它需要一个数组将传递到父的参数。因此， this.callParent（参数），而无需知道什么是正是覆盖方法的所有参数调用父类的方法。这是更容易，而且也更有弹性未来的变化，如果该方法的参数要改变...

我很乐意给你指向一个综合指导有关在内线压倒一切的......可惜我无法找到一个具有快速搜索： - /

I have a GridPanel that must have its store model AND column model created dynamically, after a DB SP returns the columns of the table.

My question is how can I pass the value ( string or JSON )s from the server to the 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();
    }
});

I use this custom defined GridPanel along with the following model and store for now.

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'
        }
    }
});

This is how I create a 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 provides some support for that. You can send the model configuration by adding a metaData property to the server response. You can configure the name of the property with the metaProperty option.

The documentation doesn't make it obvious, but you can reconfigure the fields of the model this way. Here's the kind of response that would do that:

{
    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"},
            ...
        ]
    }
}

As noted in the doc, when the data model changes, you'll want to update your components as well. Sencha has provided the metachange for that. Notice that, while documented in the proxy, this event will be relayed by the store.

Finally, to update the grid's column model, you have the reconfigure method. For example, you could modify your grid class in the following way to make it reconfigure itself automatically from the server response:

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);
        }
    }
});

Update

The onMetaChange method is called when the metachange event is fired, because I have registered it as a listener with this line:

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

The event itself is fired when the proxy detects some meta data in the server response. Concretely, that happens when a metaData property (or whatever name you may have configured as the metaProperty of the proxy) exists in the server response.

The listener is effectively passed the raw metaData object, that is present in the response, as its second argument (named meta in my example). So your server can put any information you need in it (e.g. new field labels, tooltip texts, etc.).

bindStore is a method that is already present in GridPanel. Here I override it because I need a place to register my event listener on the store. As its name suggests, this method is called to bind a store to the component. It can be the initial store, or a new one. That's one I've preferred to override this method instead of initComponent. In case the store is changed later in the component life, my custom listener will be unbound from the old store and attached to the new one.

The arguments keyword is an idiosyncrasy of Javascript. It represents all the arguments that have been passed to a function. callParent is a sweety provided by Ext to call the parent method; it takes an array as the arguments that will be passed to the parent. So this.callParent(arguments) calls the parent method without having to know what were precisely all the arguments of the overridden method. That's easier, and that's also more resilient to future changes, if the arguments of the method were to change...

I'd be glad to point you to a comprehensive guide about overriding in Ext... Unfortunately I couldn't find one with a quick search :-/

这篇关于检索的GridPanel模型/存储/动态地从服务器端列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！