ExtJs 3.4 更新 XTemplate 中的数据

Question

我有一个面板，它的模板定义如下：

this.personalPanel = new Ext.Panel({
    title: 'Personal',
    autoScroll: true,
    tpl: new Ext.XTemplate(
        '<div class="addressbook-preview-panel">',
        '<div><span>ID     </span>{[this.encode(values.id, "mediumtext")]}</div>',
        '<div><span>PIN    </span>{[this.encode(values.pin, "mediumtext")]}</div>',
        '<div><span>Address</span>{address_mm}</div>',
        '</div>', {
            encode: function (value, type, prefix) {
                return self.encode.apply(self, arguments);
            }
        })
});

现在最初加载时只加载 ID 和 PIN，我想根据 AJAX 请求填写地址。问题是当我尝试更新该字段时，现有值被覆盖并且我只看到地址（我已缩短对this.personalPanel 的调用，但实际上它是从另一个文件调用的，而不是它定义的文件）。

this.personalPanel.update({address_mm: something.something});

我尝试查看tplWriteMode，因为它默认设置为overwrite，但这并没有帮助，因为其他选项只是在现有内容之前或之后添加另一个模板，所以我有一个副本。

Answer 1

因为你正在使用下面的代码

this.personalPanel.update({address_mm: something.something});

所以它会过度使用之前的对象/数据。您需要将Object.assign() 与前一个数据和新数据一起使用。如下所示

newData = Object.assign({
    address_mm: 'this new address'
}, panel.custObj))

代码片段和Sencha Fiddle

Ext.onReady(function () {
    var personalPanel = new Ext.Panel({
        title: 'Personal',
        autoScroll: true,
        id: 'personalPnl',
        custObj:{},//custom property
        buttons: [{
            text: 'Refresh Data',
            handler: function (btn) {
                //This will be your second load data, you can merge with same custome object,
                //you need to do becuase you are taking data in panel, you are doing dynamically
                var panel = Ext.getCmp('personalPnl'),
                    newData = Object.assign({
                        address_mm: 'this new address'
                    }, panel.custObj);

                panel.update(newData);
            }
        }],
        tpl: new Ext.XTemplate(
            '<div class="addressbook-preview-panel">',
            '<div><span>ID  :</span>{[this.encode(values.id, "mediumtext")]}</div>',
            '<div><span>PIN :</span>{[this.encode(values.pin, "mediumtext")]}</div>',
            '<div><span>Address :</span>{address_mm}</div>',
            '</div>', {
                encode: function (value, type, prefix) {
                    return value; //self.encode.apply(self, arguments);
                }
            })
    });

    personalPanel.render(document.body);
    // this is will be your first load data
    personalPanel.custObj = {
        id: 1,
        pin: '4501111'
    };
    personalPanel.update(personalPanel.custObj);
});