我试图找到将项目绑定到extjs项目中的文本字段的最佳方法。我将数据下载到控制器中的一个记录的存储中。我将如何从一个记录绑定到这个文本字段?我最好在视图中绑定,而不是在控制器中绑定
kgsdhlau1#
您应该阅读this guide以更好地理解什么是绑定最好的解决方案是将记录绑定到视图的视图模型上,因此:
textfield.setBind({ value:'{myRec.valueToRefer}' }) viewmodel.set('myRec',record.getData());
如果需要,也可以使用表单来处理此问题,使用form.loadRecord并为文本字段命名。提示:在视图模型中将值设置为null:
form.loadRecord
data:{ myRec:null }
在设置到文本字段的绑定之后,在视图模型中设置您的记录。其他提示:如果可以的话,避免使用setBind,而倾向于在创建文本字段时直接设置绑定://可以工作,但可以避免
textfield.setBind({ value:'{myRec.valueToBind}' })
//是
var textfield=Ext.create({ xtype:'textfield', bind:{ value:'{myRec.valueToBind}' } });
Refer to Sencha documentation also
wwtsj6pe2#
您可以使用bind config来绑定数据或ExtJS component的任何其他config。
bind
component
config
绑定设置此配置选项可添加或删除其他配置数据绑定
例如,对于bind,标题config:
var panel = Ext.create({ xtype: 'panel', bind: { title: 'Hello {user.name}' } });
要动态绑定add,请执行以下操作:
add
panel.setBind({ title: 'Greetings {user.name}!' });
到remove绑定:
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}' }] }] }); } });
2条答案
按热度按时间kgsdhlau1#
您应该阅读this guide以更好地理解什么是绑定
最好的解决方案是将记录绑定到视图的视图模型上,因此:
如果需要,也可以使用表单来处理此问题,使用
form.loadRecord
并为文本字段命名。提示:在视图模型中将值设置为null:
在设置到文本字段的绑定之后,在视图模型中设置您的记录。
其他提示:如果可以的话,避免使用setBind,而倾向于在创建文本字段时直接设置绑定:
//可以工作,但可以避免
//是
Refer to Sencha documentation also
wwtsj6pe2#
您可以使用
bind
config来绑定数据或ExtJScomponent
的任何其他config
。绑定设置此配置选项可添加或删除其他配置数据绑定
例如,对于
bind
,标题config:要动态绑定
add
,请执行以下操作:到
remove
绑定:在这个FIDDLE中,我已经为投标制作了一个演示。我希望这将帮助/指导你达到你的要求。
代码片段