javascript - 如何远程排序呈现嵌套对象的 Ext 网格列?

标签 javascript extjs grid extjs4

这里是一个简单的问题,我真的很惊讶我在任何地方都找不到答案。

我有以下产品型号:

Ext.define('Product', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'},
        {name: 'manufacturer', type: 'auto'}, // i.e. nested object literal
    ],
});

可以看出,产品内部有一个嵌套对象,其中包含有关制造商的详细信息(id、名称、描述等)。

我在 Ext.grid.Panel 中显示产品,如下所示:

Ext.create('Ext.grid.Panel', {
    title: 'Products',
    ...
    remoteSort: true,
    columns: [
        {text: 'Id', dataIndex: 'id', sortable: true},
        {text: 'Name',  dataIndex: 'name', sortable: true},
        {text: 'Manufacturer', dataIndex: 'manufacturer', sortable: true, renderer: function(manufacturer) {
                return manufacturer.name; // render manufacturer name
            }
        },
    ],
});

如您所见,所有三列都配置为可排序,我使用的是远程排序。这适用于前两列,但第三列(制造商)给我带来了麻烦。

例如,当用户按产品名称对网格进行排序时,Ext 会向服务器发送以下 JSON:

{ sort: [{ property: 'name', direction: 'ASC' }] }

这很好,因为服务器知道只需按每个产品的 name 属性进行排序。

但是当用户按制造商对网格进行排序时,发送的 JSON 是:

{ sort: [{ property: 'manufacturer', direction: 'ASC' }] }

由于制造商是一个对象,这不会让服务器知道它应该根据制造商的哪个属性进行排序!是厂家的id吗?还是制造商的名称?还是别的?

对于我的网格,因为我呈现了制造商的名称,所以我想按名称对其进行排序。但我看不出有什么办法可以告诉服务器这一点。而且我当然不想让我的服务器一直按制造商名称排序。

如果 JSON 是这样发送的,那将是理想的:

{ sort: [{ property: 'manufacturer.name', direction: 'ASC' }] }

遗憾的是,Ext 似乎没有这样做(?)。那么,解决方案是什么?

最佳答案

好的,我在 Sencha 论坛上提问并得到了回复。看来您可以覆盖列配置中的 getSortParam()。示例:

columns: [
    ...
    {
        header: 'Manufacturer',
        dataIndex: 'manufacturer',
        sortable: true,
        renderer: function(manufacturer) {
            return manufacturer.name; // render manufacturer name
        },
        getSortParam: function() {
            return 'manufacturer.name';
        },
    }
    ...
]

这将发送我在 OP 中描述的理想 JSON。现在我只需要让我的服务器正确解析它! :)

关于javascript - 如何远程排序呈现嵌套对象的 Ext 网格列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14788914/

相关文章:

javascript - 是否可以在 JS 中重命名 "function"?

javascript - Ext JS 4.2.1 - renderTo 导致错误

javascript - 请求到node.js中的其他路由

javascript - 如何在 ExtJS 中添加 Facebook 分享按钮

extjs - 以编程方式选择网格行不会触发 ExtJS4 中的 itemclick 事件

wpf - 在 WPF 中以编程方式设置带有 * 的网格列的宽度

javascript - 如何用不同尺寸的图像创建网格?

html - 创建样式嵌套网格/框的选项

javascript - Chart.js 与 React

javascript - 扩展 google.maps.Marker