范围问题，Sencha，获取数据从控制器中传递到项目？ [英] Scope Problems, Sencha, Getting Data passed to view from controller in items?

问题描述

我正在通过控制器传递记录：

  showDetail：function（list，record）{
 
 this.getMain（）。push（{
 xtype：'leaddetail'，
 data：record.data 
}）; 
}，
  

我的观点：

  Ext.define（'ApexChat.view.LeadDetail'，{
 extends：'Ext.Panel'，
 xtype：'leaddetail'，
 
 init：function（）{
 debugger; 
}，
 
 
 config：{
 styleHtmlContent：true，
 scrollable：'vertical'，
 title：'Details'，
 frame：true，
 labelwidth：75，
 
 
 
 
项目：[
 {
 xtype：'fieldset'，
 columnWidth：0.5，
 collapsible：true，
 title：'Lead Information'，
 defaultType：'textfield'，
 defaults：{anchor：'100％'}，
 layout：'vbox'，
 items：[
 {
 fieldLabel： 'name'，
 name：'name'，
 tpl：'{name}'，
 value：'{name}'，
 disabled：true 
} ，
 {
 fieldLabel：'Email'，
 name：'email'，
 value：'{email}'，
 disabled：true 
}，
 {
 fieldLabel：'Phone'，
 name：'phone'，
 value：'{phone}'，
 disabled：true 
} 
 ] 
}，
 {
 xtype：'fieldset'，
 columnWidth：0.5，
 collapsible：true，
 title：'Exta Information'，
 defaultType：'textfield'，
 defaults：{anchor：'100％'}，
 layout：'vbox'，
 items：[
 {
 fieldLabel：'Company Key'，
 name：'companykey'，
 value：'{companyKey}'，
 disabled：true 
}，
 {
 fieldLabel：'Chat ID'，
 name：'chatid'，
 value：'{chatId}'，
 disabled：true 
}，
 {
 fieldtype：'textarea'，
 fieldLabel：'Notes'，
 name：'notes'，
 value：'{notes}'，
 disabled：true 
} 
] 
} 
] 
} 
}）; 
  

但是，在textfields里面，我仍然看到{companyName}

假设它不能这样做，那么如何访问从控制器传递的记录，所以我可以做一个.get（'name'）或类似的东西？

解决方案

tpl 和数据自定义HTML，而Ext字段是处理自己的渲染的组件。除了高级用例，您不必触摸他们的 tpl 。

与其他框架相反，主要是基于HTML模板，Ext本质上是面向对象的组件库。你很少自己去HTML级别。

为了一次设置一堆字段的值，你需要将它们放在一个 c / A>。然后，您可以使用 setValues 或者可能更适合您的情况， setRecord 。

使用您的示例，您将以这种方式配置您的字段：

  Ext.define（'ApexChat.view.LeadDetail'，{
 extend：'Ext.Panel'，
 xtype：'leaddetail'，
 
 config：{
 ... 
 items：[{
 fieldLabel：'Name'，
 //您只需要该字段的名称来加载数据
 name：'name'
}，{
 fieldLabel：'Email'，
名称：'email'
}] 
} 
}）; 
  

然后，您可以使用 记录 配置选项：

  this.getMain（）。push（{
 xtype：'leaddetail'，
 // using record config option 
 record：record 
}）; 
  

或者您可以使用方法加载数据：

  //以你想要的方式获得一个引用到你的组件，这一行只是说明了formPanel中的内容
 var formPanel = Ext.create（{xtype：'leaddetail }）; 
 
 //使用setValues 
 formPanel.setValues（record.data）; 
 
 //或使用setRecord 
 formPanel.setRecord（record）; 
  

I am passing a record in from the controller via:

showDetail: function (list, record) {

    this.getMain().push({
        xtype: 'leaddetail',
        data: record.data
    });
},

My View:

Ext.define('ApexChat.view.LeadDetail', {
extend: 'Ext.Panel',
xtype: 'leaddetail',

init: function() {
    debugger;
},


config: {
    styleHtmlContent: true,
    scrollable: 'vertical',
    title: 'Details',
    frame: true,
    labelwidth: 75,




    items: [
    {
        xtype: 'fieldset',
        columnWidth: 0.5,
        collapsible: true,
        title: 'Lead Information',
        defaultType: 'textfield',
        defaults: { anchor: '100%' },
        layout: 'vbox',
        items: [
            {
                fieldLabel: 'Name',
                name: 'name',
                tpl: '{name}',
                value: '{name}',
                disabled: true
            },
            {
                fieldLabel: 'Email',
                name: 'email',
                value: '{email}',
                disabled: true
            },
            {
                fieldLabel: 'Phone',
                name: 'phone',
                value: '{phone}',
                disabled: true
            }
        ]
       }, 
       {
           xtype: 'fieldset',
           columnWidth: 0.5,
           collapsible: true,
           title: 'Exta Information',
           defaultType: 'textfield',
           defaults: { anchor: '100%' },
           layout: 'vbox',
         items: [
            {
                fieldLabel: 'Company Key',
                name: 'companykey',
                value: '{companyKey}',
                disabled: true
            },
            {
                fieldLabel: 'Chat ID',
                name: 'chatid',
                value: '{chatId}',
                disabled: true
            },
            {
                fieldtype: 'textarea',
                fieldLabel: 'Notes',
                name: 'notes',
                value: '{notes}',
                disabled: true
            }
        ]
    }
 ]
}
});

But inside the textfields i still see {companyName}

Assuming it cant be done like that, so how do I access the record being passed from the controller so I can do a .get('name') or something similar to that?

解决方案

tpl and data are used for rendering custom HTML, while Ext fields are components that handle their own rendering. You shouldn't have to touch their tpl, except for advanced use cases.

As opposed to other frameworks that are mainly based on HTML templates, Ext is essentially a object oriented component library. You rarely go to the HTML level yourself.

For setting the values of a bunch of fields at once, you need to put them in a Ext.form.Panel. Then you can use setValues or, maybe more appropriated in your case, setRecord.

Using your example, you would configure your fields this way:

Ext.define('ApexChat.view.LeadDetail', {
    extend: 'Ext.Panel',
    xtype: 'leaddetail',

    config: {
        ...
        items: [{
            fieldLabel: 'Name',
            // you only need the name for the field to load data
            name: 'name'
        },{
            fieldLabel: 'Email',
            name: 'email'
        }]
    }
});

Then you can assign your record at creation time using the record config option:

this.getMain().push({
    xtype: 'leaddetail',
    // using record config option
    record: record
});

Or you can use the methods to load the data:

// get a ref to your component the way you want, this line just illustrates what's in formPanel
var formPanel = Ext.create({xtype: 'leaddetail'});

// using setValues
formPanel.setValues(record.data);

// or using setRecord
formPanel.setRecord(record);

这篇关于范围问题，Sencha，获取数据从控制器中传递到项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！