[ExtJS5学习笔记]第二十一节 Extjs5中使用config配置给ext.widget或者create方法传递参数
本文地址: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配合数组的push方法,动态创建并加载组件
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39226773 官方例子:http://docs.sencha.com/extjs/5. ...
- [ExtJS5学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38612721 本文作者:sushengmiyan ------------------ ...
- [ExtJS5学习笔记]第七节 Extjs5的组件components及其模板事件方法学习
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38487519 本文作者:sushengmiyan ------------------ ...
- [ExtJS5学习笔记]第二十三节 Extjs5中表格gridpanel的列格式设置
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39665979 官方文档:http://docs.sencha.com/extjs/5. ...
- [ExtJS5学习笔记]第十一节 Extjs5MVVM模式下系统登录实例
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38815923 实例代码下载地址: http://download.csdn.net/d ...
- [ExtJS5学习笔记]第二十七节 CMD打包错误 Error C2009: YUI Parse Error (identifier is a reserved word => debugger;)
本文地址:http://blog.csdn.net/sushengmiyan/article/details/41242993 本文作者:sushengmiyan ------------------ ...
- [ExtJS5学习笔记]第二十七节 CMD打包错误 Error C2009: YUI Parse Error (identifier is a reserved word => debugger;)
本文地址:http://blog.csdn.net/sushengmiyan/article/details/41242993 本文作者:sushengmiyan ------------------ ...
- [ExtJS5学习笔记]第十七节 Extjs5的panel组件增加accodion成为折叠导航栏
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39102335 官方例子:http://dev.sencha.com/ext/5.0.1 ...
- [EXTJS5学习笔记]第二十六节 在eclipse/myeclipse中使用sencha extjs的插件
本文地址:http://blog.csdn.net/sushengmiyan/article/details/40507383 插件下载: http://download.csdn.net/detai ...
随机推荐
- hy 的惩罚
[问题描述] hy 抄题解又被老师抓住了,现在老师把他叫到了办公室. 老师要 hy 和他 玩一个游戏.如果 hy 输了,老师就要把他开除信息组: 游戏分为 k 轮.在游戏开始之前,老师会将 n 个由 ...
- 【JZOJ4307】喝喝喝
Description solution 正解:尺取法. 很容易想到尺取法,维护左右指针,\(a[i]\%a[j]==K\),当且仅当 \(a[j]>K\) 并且 \(a[i]-K\) 的约数中 ...
- ●POJ 1269 Intersecting Lines
题链: http://poj.org/problem?id=1269 题解: 计算几何,直线交点 模板题,试了一下直线的向量参数方程求交点的方法. (方法详见<算法竞赛入门经典——训练指南> ...
- ●SPOJ 8222 NSUBSTR - Substrings(后缀数组)
题链: http://www.spoj.com/problems/NSUBSTR/ 题解: 同届红太阳 --WSY给出的后缀数组解法!!! 首先用倍增算法求出 sa[i],rak[i],hei[i]然 ...
- ●BZOJ 4559 [JLoi2016]成绩比较(容斥)
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=4559 题解: 容斥,拉格朗日插值法. 结合网上的另一种方法,以及插值法,可以把本题做到 O( ...
- ●BZOJ 1855 [Scoi2010]股票交易
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=1855 题解: DP,单调队列优化.(好久没做 DP题,居然还意外地想出来了) 定义 dp[i ...
- c++中成员函数的参数名与成员变量名重合的问题
有一天写类的时候突然想到了这个问题,下面就来介绍如何解决这个问题. 定义一个类: class test{ public: void setnum(); void getnum(); private: ...
- 华科机考:a+b
时间限制:1秒空间限制:32768K 题目描述 计算a+b的和 每行包行两个整数a和b 对于每行输入对应输出一行a和b的和 输入 1 5 输出 6 吐槽:这尼玛是机考题? 代码: #include & ...
- 树莓派3B(2)- 配置多个wifi,自动寻找可用网络
一.背景 在上篇<Raspberry Pi 3B 安装系统并联网>中,树莓派使用wifi连接,但是把树莓派带到公司,树莓派就连不了公司的wifi,要是支持连接多个wifi就好了,在此整理分 ...
- eclipse maven could not resolve archetype之类的错误
先说下网上有种联网导入的方法 而我的是本地导入的方法 就是导入原型特慢 或者 原型下载都下载不了的问题 解决方法只能 把那个文件下载搞到本地 没有被墙 就是速度慢 http://repo1.maven ...