Question

我正在尝试找到将项目绑定到extjs项目中的文本字段的最佳方法。我将数据下载到商店中，控制器中有一条记录。如何从一条记录绑定到此文本字段？我最好在视图中绑定，而不是在控制器中绑定

Answer 1

您应该阅读this guide以更好地了解绑定是什么

最适合您的解决方案是绑定视图的viewmodel上的记录，所以：

textfield.setBind({
  value:'{myRec.valueToRefer}'
})
viewmodel.set('myRec',record.getData());

如果需要，您还可以使用表单来处理此问题，使用form.loadRecord并为文本字段添加名称..

小贴士：在viewmodel中设置一个值为null：

data:{
 myRec:null
}

在将绑定设置为文本字段后，在viewmodel中设置记录。

其他提示：如果可以，请避免使用setBind，并且更喜欢直接在文本字段创建上设置绑定：

//会工作，但你可以避免它

textfield.setBind({
      value:'{myRec.valueToBind}'
     })

// YES

var textfield=Ext.create({
 xtype:'textfield',
 bind:{
  value:'{myRec.valueToBind}'
 }
});

Refer to Sencha documentation also

Answer 2

您可以使用bind配置为ExtJS config绑定数据或任何其他component。

绑定设置此配置选项可为其他配置添加或删除数据绑定。

例如，bind标题配置：

var panel = Ext.create({
     xtype: 'panel',
     bind: {
         title: 'Hello {user.name}'
     }
});

动态add绑定：

panel.setBind({
     title: 'Greetings {user.name}!'
});

到remove绑定：

panel.setBind({
     title: null
});

在 FIDDLE 中，我创建了一个biding的演示版。我希望这有助于/指导您实现您的要求。

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {

        //defining Store
        Ext.define('Store', {
            extend: 'Ext.data.Store',

            alias: 'store.gridstore',

            autoLoad: true,

            fields: ['name', 'email', 'phone'],

            proxy: {
                type: 'ajax',

                url: 'data1.json',

                reader: {
                    type: 'json',
                    rootProperty: ''
                }
            }
        });

        //defining view model
        Ext.define('MyViewModel', {

            extend: 'Ext.app.ViewModel',

            alias: 'viewmodel.myvm',

            data: {
                formdata: null
            },

            stores: {
                gridstore: {
                    type: 'gridstore'
                }
            }
        });

        //Controller
        Ext.define('MyViewController', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.myview',

            onGridItemClick: function (grid, record) {
                //Bind the form data for CLICKED record
                this.getViewModel().set('formdata', record)
            }
        });

        //creating panel with GRID and FORM
        Ext.create({

            xtype: 'panel',

            controller: 'myview',

            title: 'Binding Example',

            renderTo: Ext.getBody(),

            viewModel: {
                type: 'myvm'
            },

            layout: 'vbox',

            items: [{
                xtype: 'grid',

                flex: 1,

                width: '100%',

                bind: '{gridstore}',

                columns: [{
                    text: 'Name',
                    dataIndex: 'name'
                }, {
                    text: 'Email',
                    dataIndex: 'email',
                    flex: 1
                }, {
                    text: 'Phone',
                    dataIndex: 'phone'
                }],

                listeners: {
                    itemclick: 'onGridItemClick'
                }
            }, {
                xtype: 'form',

                flex: 1,

                width: '100%',

                defaults: {
                    anchor: '100%'
                },

                title: 'Bind this form on Grid item Click',

                bodyPadding:15,

                margin: '20 0 0 0',

                // The fields
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'Name',
                    name: 'first',
                    allowBlank: false,
                    bind: '{formdata.name}'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    allowBlank: false,
                    bind: '{formdata.email}'
                }, {
                    fieldLabel: 'Phone',
                    name: 'phone',
                    allowBlank: false,
                    bind: '{formdata.phone}'
                }]
            }]
        });
    }
});

Extjs文本字段绑定

2 个答案: