如何在ExtJs 6.2中基于Store构建复选框组
How to build checkboxgroup based on Store in ExtJs 6.2
这是可能的形式自动运行一个方法从ViewController?我需要创建一个checkboxgroup,它应该基于这个控制器的数据。在ViewController的这个方法中,我从JSON文件中获取数据,这里我更新了一个视图。当我在视图的监听器中有一个按钮时,一切都很好,但它应该自动运行,并且复选框应该基于此存储数据
构建。onClickLoadData: function(){
console.log('onClickLoadData runned');
var gridStore = this.getStore('perosnellstore');
var columnsArray = this.getStore('perosnellstore').getProxy().getReader().rawData.cols.columns;
console.log(columnsArray.length);
for( var i = 0; i < columnsArray.length; i++){
var checkbox = Ext.create('Ext.form.field.Checkbox', {
boxLabel: columnsArray[i].text,
x: 0,
y: i * 30
});
Ext.ComponentQuery.query("#checkBoxGroupModules")[0].add(checkbox);
}
}
和ViewModel类:
Ext.define('Message.web.view.edit.EditViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.edit',
data:{
title: ''
},
stores : {
perosnellstore: {
fields : ['name'],
autoLoad: true,
proxy: {
type: 'ajax',
url : 'resources/response.json',
reader: {
type: 'json',
rootProperty: 'cols.columns',
keepRawData: true
}
}
}
}
});
答案是store中的侦听器。
var myStore = Ext.create('Ext.data.Store', {
...
listeners: {
'load': {
fn: function(store, records, success, operations) {
Ext.each(records, function(rec) {
console.log(Ext.encode(rec.raw));
});
}
}
}
...
});
在viewController中你可以监听一个store。道格:http://docs.sencha.com/extjs/6.2.0/classic/Ext.app.ViewController.html cfg-listen
存储在加载远程数据时触发一个事件。道格:http://docs.sencha.com/extjs/6.2.0/modern/Ext.data.Store.html event-load
监听store的load事件并调用onClickLoadData。
代码:Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
listen: {
store: {
'#storeId': {
load: 'onClickLoadData'
}
}
}
});
相关文章:
- 我应该如何从xml文件构建一个javascript页面
- 如何在DOM元素上按类型构建此函数
- Sencha Touch构建-排除文件
- RubyonRails——构建交互式接口应该朝哪个方向发展
- TypeError:_this.store.getState在使用来自Redux的连接时不是函数
- 如何在构建node-webkit应用程序后获取外部资源
- Ext.js从json构建模型关系的问题
- 如何为生产构建angular2应用程序
- Grunt构建导致Angular应用程序在dist上崩溃
- Query JS Ext.data.Store
- 构建JS测试,警报窗口重复上一个Q,而不是问下一个Q
- 动态构建一个数据表与scriplets
- 如何只使用特定的表行构建简单的手风琴
- 为tweet构建chrome扩展
- 如何构建angular.js应用程序
- 如何使用Meteorjs构建实时应用程序
- jquery从2个json字符串构建一个复选框表单
- webpack开发模式和生产构建模式之间有什么区别
- js文件是否阻碍了war文件的构建
- 如何在ExtJs 6.2中基于Store构建复选框组