javascript-在ext网格中显示值,其中值对应于另一个表/模型中的字符串

2019-11-02 12:34:42 阅读：333 来源： 互联网

我正在通过构建一个非常简单的“ scrum”开发跟踪应用程序自学ExtJS.我目前正在将“积压”显示为一个网格面板,以显示卡(用户素材)的属性.

Card.js(卡模型)

Ext.define('AM.model.Card', {
    extend: 'Ext.data.Model',
    fields: [
                'id',
                'name',
                'priority_id',
                ...
            ]
});

Priority.js(优先级模型)

Ext.define('AM.model.Priority', {
    extend: 'Ext.data.Model',
    fields: [
                'id',
                'name',
                'short_name'
            ]
});

因此,卡的数据将如下所示：

backlogcards.json(数据)

{
    success: true,
    backlogcards: [
        {
            id: 1, 
            name: 'ONEs',
            priority_id: 2,
            ...
        },
        {
            id: 2, 
            name: 'TWOs',
            priority_id: 3,
            ...
        }
    ]
}

优先级如下所示：

priority.json(数据)

{
    success: true,
    priorities: [
        {
            id              : 1, 
            name            : "High",
            short_name      : "H"
        },
        {
            id              : 2, 
            name            : "Medium",
            short_name      : "M"
        },
            {
            id              : 3, 
            name            : "Low",
            short_name      : "L"
        }
    ]
}

因此,理想情况下,我想做的是让网格面板显示相应的priority_id的short_name.单击该项目以进行内联编辑时,将显示一个组合框,其中显示了name属性.我已经到一半了.

BacklogList.js(查看)

Ext.define('AM.view.card.BacklogList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.backlogcardlist',

    title: 'Backlog',
    store: 'BacklogCards',

    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],

    columns: [
        { header: 'ID', dataIndex: 'id' },
        { header: 'Name', dataIndex: 'name', field: 'textfield' },
        {
            header: 'Priority',
            dataIndex: 'priority_id',
            width: 130,
            field: {
                xtype: 'combobox',
                typeAhead: true,
                store: 'Priorities',
                displayField: 'name',
                valueField: 'id',
                listClass: 'x-combo-list-small'
            }
        }
    ]

});

所以我知道’dataIndex’属性是我需要修改以更改显示的内容,但是我不确定如何将这两个存储绑定在一起.

如上所示,优先级显示为数字而不是short_name.

这是我需要使用关联的情况吗？ (我只知道他们)Sencha Docs

谢谢！

EDIT1：哦,我意识到我可以对执行此更改的渲染器属性进行“硬编码”,但是我想避免这种情况,而是使用优先级存储中的值.

    renderer: function(value){
        if (value==3)
        {
            return "L";
        }
        else if (value==2)
        {
            return "M";
        }
        else
        {
            return "H";
        }
    },

埃文(Evan)的EDIT2：
优先商店

Ext.define('AM.store.Priorities', {
    extend: 'Ext.data.Store',
    model: 'AM.model.Priority',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        api: {
            read: 'app/data/priorities.json',
            update: 'app/data/updateUsers.json'
        },
        reader: {
            type: 'json',
            root: 'priorities',
            successProperty: 'success'
        }
    }
});

store.each都指这个商店,对不对？如果是这样,我该如何执行每个操作？

我尝试将声明行更改为：

var test = Ext.define('AM.store.Priorities', {

然后尝试将代码更改为test.each,但未成功.

再次感谢！

解决方法:

您需要使用渲染器,但是并没有阻止您循环遍历优先级存储和检查中的值的操作,例如：

renderer: function(value) {
    var display = '';
    store.each(function(rec){
        if (rec.get('id') === value) {
            display = rec.get('name');
            return false;
        }
    });
    return display;
}

标签：extjs,extjs4,javascript
来源： https://codeday.me/bug/20191102/1991583.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-在ext网格中显示值,其中值对应于另一个表/模型中的字符串