[ExtJS5学习笔记]第二十一节 Extjs5中使用config配置给ext.widget或者create方法传递参数
来源:互联网 发布:网线布局知乎 编辑:程序博客网 时间:2024/06/03 02:26
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39252805
官方例子: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Class-cfg-config
本文作者:sushengmiyan
------------------------------------------------------------------------------------------------------------------------------------
对于Extjs5的使用方式,我习惯性的是,先使用Ext.define方法定义一个自己的类,然后使用extend属性继承某一ext现在存在的类,然后制定alias的widget别名,最后配置属性,格式如下:
Ext.define(//使用Ext.define定义一个类 'argtest.view.form.BaseForm',//类名称是BaseForm 存在于argtest项目中,在view文件夹中的form文件夹下是以BaseForm.js的文件形式存在的 { extend: 'Ext.form.Panel',//继承自Ext的类,相当于重写了 alias: 'widget.baseform',//制定别名,后期使用的时候就可以拿baseform来获取了 title: 'abc', //组件初始化,在构造方法之后执行 initComponent: function(){ this.items = []; this.callParent(arguments);}});
这样我定义了一个BaseForm当后期使用的时候,我就可以通过uses引入这个类,然后使用Ext.widget('baseform')获取这个对象的。但是现在有个问题就是,我想给这个对象赋值一定的特性,比如我想给form制定标题,那么我们是这么做的,Ext.widget('baseform',{title: '自定义标题'})
这样的话,每调用一次,都会按照你制定的标题来创建这个窗体了,但是现在的问题是,title是form自带的,所以你这么写是正确的,但是我想传入一个自己定义的数据该怎么办呢?
这时候就需要使用config属性了。
我们这样做:
在define定义的时候,制定config属性:
Ext.define( 'argtest.view.form.BaseForm', { extend: 'Ext.form.Panel', alias: 'widget.baseform',title: 'abc',config:{ fields: undefined}, //组件初始化,在构造方法之后执行 initComponent: function(){ this.items = []; var me = this; var fieldsets = this.fields; Ext.each(fieldsets, function(onefieldset, fieldindex) { console.log(onefieldset); me.items.push(onefieldset); console.log(me.items); }); this.callParent(arguments);}});
在调用的时候,传入一个这个即可:
var form = Ext.widget('baseform',{fields: me.fields});这个原理的话,看一下http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Class-cfg-config这个就可以的。
下面是我写的参数传递的例子,大家可以看下:
一、使用sencha cmd生成一个默认extjs5项目
二、在app文件夹下的view目录下定义两个包form和window 分别在里面创建BaseWindow.js和BaseForm.js文件,代码如下:
Ext.define( 'argtest.view.window.BaseWindow', { extend: 'Ext.window.Window', alias: 'widget.basewindow', uses: ['argtest.view.form.BaseForm'], autoshow: true, config: { fields: undefined }, closeAction: 'hide', //初始化为一个空数组,后期使用push方法增加组件 items: [], //组件初始化,在构造方法之后执行 initComponent: function(){ var me = this; var form = Ext.widget('baseform',{fields: me.fields}); me.items = [form]; console.log(me.items); this.callParent(arguments); } });
Ext.define( 'argtest.view.form.BaseForm', { extend: 'Ext.form.Panel', alias: 'widget.baseform',title: 'abc',config:{ fields: undefined}, //组件初始化,在构造方法之后执行 initComponent: function(){ this.items = []; var me = this; var fieldsets = this.fields; Ext.each(fieldsets, function(onefieldset, fieldindex) { console.log(onefieldset); me.items.push(onefieldset); console.log(me.items); }); this.callParent(arguments);}});
三、修改MianController.js的按钮单击函数
/** * This class is the main view for the application. It is specified in app.js as the * "autoCreateViewport" property. That setting automatically applies the "viewport" * plugin to promote that instance of this class to the body element. * * TODO - Replace this content of this view to suite the needs of your application. */Ext.define('argtest.view.main.MainController', { extend: 'Ext.app.ViewController', uses: ['argtest.view.window.BaseWindow'], requires: [ 'Ext.MessageBox' ], alias: 'controller.main', onClickButton: function () { //Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);var win = Ext.widget('basewindow', { fields: this.getViewModel().get('tf_fields') }); win.show();//console.log(this.getViewModel().get('tf_fields')); }, onConfirm: function (choice) { if (choice === 'yes') { // } }});
修改MainModel中的数据,增加字段集合的定义:
/** * This class is the view model for the Main view of the application. */Ext.define('argtest.view.main.MainModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.main', data: { name: 'argtest',tf_fields: [{ // Fieldset in Column 1 - collapsible via toggle button xtype:'fieldset', columnWidth: 0.5, title: 'Fieldset 1', collapsible: true, defaultType: 'textfield', defaults: {anchor: '100%'}, layout: 'anchor', items: [{ fieldLabel: 'First Name', name: 'first', allowBlank: false },{ fieldLabel: 'Last Name', name: 'last', allowBlank: false }] },{ // Fieldset in Column 1 - collapsible via toggle button xtype:'fieldset', columnWidth: 0.5, title: 'Fieldset 2', collapsible: true, defaultType: 'textfield', defaults: {anchor: '100%'}, layout: 'anchor', items: [{ fieldLabel: 'First Name', name: 'first', allowBlank: false },{ fieldLabel: 'Last Name', name: 'last', allowBlank: false }] }] } //TODO - add data, formulas and/or methods to support your view});
好了。到此都修改完成了。现在所做的东西就是讲MainModel中的自定义的tf_fields数组内容,安装传递的方式,将数组逐级传入到了显示出来的form里面,最后你点击按钮,显示出的界面就是这样了:
后面想修改这个界面,不需要修改其他东西了,只需要修改MaiModel.js中内容就可以了,这样就方便多了。
- [ExtJS5学习笔记]第二十一节 Extjs5中使用config配置给ext.widget或者create方法传递参数
- [ExtJS5学习笔记]第二十三节 Extjs5中表格gridpanel的列格式设置
- [ExtJS5学习笔记]第二十二节 Extjs5中使用beforeLabelTpl配置给标签增加必填选项星号标志
- [ExtJS5学习笔记]第二十四节 Extjs5中表格gridpanel或者表单数据后台传输remoteFilter设置
- [ExtJS5学习笔记]第十三节 Extjs5的Ext.each方法学习
- [ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题
- Extjs5的Ext.each方法学习
- [EXTJS5学习笔记]第二十六节 在eclipse/myeclipse中使用sencha extjs的插件
- [ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用
- [ExtJS5学习笔记]第三十一节 sencha extjs 5使用cmd生成的工程部署到tomcat服务器
- [ExtJS5学习笔记]第七节 Extjs5的组件components及其模板事件方法学习
- [ExtJS5学习笔记]第十八节 Extjs5的panel的dockeditems属性配置toolbar
- [ExtJS5学习笔记]第十四节 Extjs5中data数据源store和datapanel学习
- [ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件
- [ExtJS5学习笔记]第十一节 Extjs5MVVM模式下系统登录实例
- [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标
- [ExtJS5学习笔记]第十六节 Extjs5使用panel新增的ViewModel属性绑定数据
- extjs5学习笔记之combobox
- cocos2d-js中怎么去掉左下角的三行数字(即帧数FPS)
- swift,变量
- pycharm 在写django时,一些很奇怪的东西
- 程序员要学会读源代码
- sqlSERVER创建账户
- [ExtJS5学习笔记]第二十一节 Extjs5中使用config配置给ext.widget或者create方法传递参数
- mfc动态链接库
- Java中关于Json对象类型和字符串类型之间互相转化的问题
- Ubuntu下彻底卸载apache2
- matlab数据拟合工具箱的应用(转载)
- UML—概述
- JavaScript 闭包
- 图的遍历---广度优先搜索(BFS)
- 懂技术/ 更应该了解社会 /让社会变好 中国社会学家 周孝正经典语录