sencha touch Container控件 setRecord 与 setData的区别

今天一个朋友问我setRecord 与 setData的区别

这里就不得不说到record与data的区别

console.log(record);

console.log(data);

根据官方api的解释说

record : Ext.data.Model

A model instance which updates the Component's html based on it's tpl. Similar to the data configuration, but tied to to a record to make allow dynamic updates. This must be a model instance and not a configuration of one.

谷歌后：更新组件的HTML基础上的模型实例的TPL。类似的数据结构，但是连接到一个记录，以允许动态更新。这必须是一个模型的实例，而不是一个一个配置。

data : Mixed

The initial set of data to apply to the tpl to update the content area of the Component.

谷歌后：初始数据集应用到TPL更新组件的内容区域。

record之中包括data

看api貌似是说record允许动态更新，这是神马意思呢？

实际测试一下吧

从list之中进入，执行itemtap中代码

            //招聘信息
            postList: {
                show: function () {
                    app.app.showList('postList');
                },
                itemtap: function (list, index, target, record, e) {
                    this.redirectTo('postInfo');
                    app.app.showInfo(record, 'post_Info', 'PostInfo.ashx', 'telephone', {
                        id: record.data.id
                    });
                    app.app.showInfo(record, 'companyInfo', 'CompanyInfo.ashx', 'c_nature', {
                        id: record.data.company_id
                    });
                    Ext.getCmp('tel').setRecord(record);
                }
            }

　　

以下是 app.app.showInfo

    //list->info公用加载方法
    showInfo: function (record, id, url, checkId, params) {
        if (record.data[checkId]) {
            Ext.getCmp(id).setRecord(record);
            return;
        }
        var message = Ext.getCmp('cardPanel');
        message.showMessage('正在努力加载中...', true);
        Ext.data.JsonP.request({
            url: app.app.postUrl + url,
            params: params,
            success: function (result, request) {
                record.set(result);
                Ext.getCmp(id).setData(record.data);
                message.hideMessage();
            },
            failure: function (response, opts) {
                message.showMessage('加载失败，请检查网络是否正常...');
            }
        });
    }

关键在于 Ext.getCmp(id).setData(record.data);还是Ext.getCmp(id).setRecord(record);

在这里测试过结果貌似没啥区别，不过我突然觉得也许setData()要好些，因为我只需要数据，不需要其他的东西。

结果如下：

好吧，这里还是没找出setData()和setRecord()的实质区别，不过我喜欢上了setData(),把其他地方也换成setData()吧。

意外的发现了二者的区别

                    this.redirectTo('postInfo');
                    app.app.showInfo(record, 'post_Info', 'PostInfo.ashx', 'telephone', {
                        id: record.data.id
                    });
                    app.app.showInfo(record, 'companyInfo', 'CompanyInfo.ashx', 'c_nature', {
                        id: record.data.company_id
                    });
                    Ext.getCmp('tel').setRecord(record);

如代码之中，因为不想破坏我封装的showInfo()方法，所以结果图中的联系方式我是用的Ext.getCmp('tel').setRecord(record);

他的数据来源于

                    app.app.showInfo(record, 'post_Info', 'PostInfo.ashx', 'telephone', {
                        id: record.data.id
                    });

　　

之前我就在奇怪，Ext.getCmp('tel').setRecord(record);这行代码为啥能成功获取到数据

在我换成Ext.getCmp('tel').setData(record.data);之后得出的结果就让我明白了

获取不到联系人的信息了，这才正常蛮。

因为通过jsonp获取数据是异步，所以Ext.getCmp('tel').setData(record.data);的执行是先于showInfo()中Ext.getCmp(id).setData(record.data);执行的

能取到数据才怪呢

但是为啥我用Ext.getCmp('tel').setRecord(record);能获取到呢？

在这里我就明白了，record能够在它的值改变的时候事实更新Container，不需要再次setRecord()。而data只在setData()的时候才能起到作用,每次里面的值发生改变都需要重新setData()

所以官方给出了setData()和setRecord()两种方法.大家可以根据具体情况来选择使用。感谢开发组

那么showInfo这样封装是不是比较酷一点？

    //list->info公用加载方法
    showInfo: function (record, id, url, checkId, params) {
        Ext.getCmp(id).setRecord(record);
        if (record.data[checkId]) {
            return;
        }
        var message = Ext.getCmp('cardPanel');
        message.showMessage('正在努力加载中...', true);
        Ext.data.JsonP.request({
            url: app.app.postUrl + url,
            params: params,
            success: function (result, request) {
                record.set(result);
                message.hideMessage();
            },
            failure: function (response, opts) {
                message.showMessage('加载失败，请检查网络是否正常...');
            }
        });
    }