Extjs文本字段绑定

gxwragnw  于 2022-11-23  发布在  其他
关注(0)|答案(2)|浏览(209)

我试图找到将项目绑定到extjs项目中的文本字段的最佳方法。我将数据下载到控制器中的一个记录的存储中。我将如何从一个记录绑定到这个文本字段?我最好在视图中绑定,而不是在控制器中绑定

kgsdhlau

kgsdhlau1#

您应该阅读this guide以更好地理解什么是绑定
最好的解决方案是将记录绑定到视图的视图模型上,因此:

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

如果需要,也可以使用表单来处理此问题,使用form.loadRecord并为文本字段命名。
提示:在视图模型中将值设置为null:

data:{
 myRec:null
}

在设置到文本字段的绑定之后,在视图模型中设置您的记录。
其他提示:如果可以的话,避免使用setBind,而倾向于在创建文本字段时直接设置绑定:
//可以工作,但可以避免

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

//是

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

Refer to Sencha documentation also

wwtsj6pe

wwtsj6pe2#

您可以使用bind config来绑定数据或ExtJS component的任何其他config

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

例如,对于bind,标题config:

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

要动态绑定add,请执行以下操作:

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

remove绑定:

panel.setBind({
     title: null
});

在这个FIDDLE中,我已经为投标制作了一个演示。我希望这将帮助/指导你达到你的要求。

代码片段

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}'
                }]
            }]
        });
    }
});

相关问题