今天开始自己去写组件。

这次写组件重点在于参考cfWeb来写出自己的组件。

首先先把结构做出来。

对于这次的自定义组件,现在所做的事情关键在于上面四个文件。于是将上面四个文件贴出来。

MyApp.js

Ext.application({
name : 'testComponent',
appFolder : 'testComponent',
views :['testComponent.view.PanelCenter'],
controllers : ['testComponent.controller.ControllerCenter'], launch : function(){
Ext.create('Ext.container.Viewport',{
layout : 'fit',
items : [{
xtype :'panel',
layout:'border',
items : [
{
region : 'west',
xtype : 'panel',
html : 'helloworld',
width : 200
},{
region : 'center',
xtype : 'panelCenter'
},{
region : 'south',
xtype : 'panel',
html : 'hellosouth',
height : 150
}
]
}]
});
}
});

PanelCenter.js

Ext.define('testComponent.view.PanelCenter',{
extend : 'Ext.panel.Panel',
alias : 'widget.panelCenter',
layout : 'fit',
items :[{
xtype : 'myPanel'
}], initComponent : function(){
this.callParent(arguments);
}
});

ControllerCenter.js

Ext.define('testComponent.controller.ControllerCenter',{
extend : 'Ext.app.Controller',
alias : 'controllerCenter',
views : ['testComponent.myComponent.MyPanel'], init : function(){
this.control({
"myPanel" :{
onConsole : this.consoleLog3
}
}) this.callParent(arguments);
}, consoleLog3 : function(){
console.log("consoleLog3");
} })

接下来主要内容

MyPanel.js

Ext.define('testComponent.myComponent.MyPanel',{
extend : 'Ext.panel.Panel',
alias : 'widget.myPanel', dockedItems : [{
xtype : 'toolbar',
dock : 'bottom',
items :[
{xtype : 'button',text : '上一步',height : 30,width : '50',action : 'goNext'},'->',
{xtype : 'button',text : '下一步',height : 30,width : '50',action : 'goPrev'}
]
}], initComponent : function(){
// this.addEvents({// onConsole : true// });//是否注释掉这一行结果没有太大的变化 this.callParent(arguments);
}, listeners :{
boxready : function(){
this.consoleLog1();
this.consoleLog2();
}
}, consoleLog1 : function(){
console.log("consoleLog1");
},
consoleLog2 : function(){
console.log("consoleLog22");
this.fireEvent("onConsole",this);
}
});

运行结果

上面的MyPanel还是相当简单的,这里的重点是通过这个demo看MyPanel中的方法如何执行以及如何抛出事件。

现在将MyPanel、contorller稍微进行修改,则更能够明白MyPanel中的方法是怎么回事以及抛出事件时的参数是什么。

修改后的MyPanel.js

Ext.define('testComponent.myComponent.MyPanel',{
extend : 'Ext.panel.Panel',
alias : 'widget.myPanel', dockedItems : [{
xtype : 'toolbar',
dock : 'bottom',
items :[
{xtype : 'button',text : '上一步',height : 30,width : '50',action : 'goNext'},'->',
{xtype : 'button',text : '下一步',height : 30,width : '50',action : 'goPrev'}
]
}], initComponent : function(){
// this.addEvents({
// onConsole : true
// }); this.callParent(arguments);
}, listeners :{
boxready : function(){
this.consoleLog1();
this.consoleLog2();
}
}, consoleLog1 : function(){
console.log("consoleLog1");
this.consoleLog4();
},
consoleLog2 : function(){
console.log("consoleLog22");
this.fireEvent("onConsole",this);
},
consoleLog4: function(){
console.log("consoleLog4");
}
});

修改后的ControllerCenter.js

Ext.define('testComponent.controller.ControllerCenter',{
extend : 'Ext.app.Controller',
alias : 'controllerCenter',
views : ['testComponent.myComponent.MyPanel'], init : function(){
this.control({
"myPanel" :{
onConsole : this.consoleLog3
}
}) this.callParent(arguments);
}, consoleLog3 : function(me,you){
console.log("consoleLog3");
console.log(me);
console.log(this);
console.log(you);
me.consoleLog4();
} })

在chrome中的运行结果

自定义组件的一个相当重要的作用就是满足开发的过程中不同的需求。

作为一个前端,能够改变自定义组件的样式是一种相当必要的能力。必须要有有一定的CSS基础。

现在对MyPanel中的next进行监听,并处理监听事件。(这里就是on的用法,使用on后组件一直监听并触发方法,当然也可以在方法中抛出事件)

MyPanel.js

Ext.define('testComponent.myComponent.MyPanel',{
extend : 'Ext.panel.Panel',
alias : 'widget.myPanel', dockedItems : [{
xtype : 'toolbar',
dock : 'bottom',
items :[
{xtype : 'button',text : '上一步',height : 30,width : '50',action : 'goPrev'},'->',
{xtype : 'button',text : '下一步',height : 30,width : '50',action : 'goNext'}
]
}], initComponent : function(){
// this.addEvents({
// onConsole : true
// }); this.callParent(arguments);
}, listeners :{
boxready : function(){
this.consoleLog1();
this.consoleLog2();
}
}, consoleLog1 : function(){
console.log("consoleLog1"); var obj=this.down("button[action=goNext]");
console.log(obj);
obj.on("click",this.goNextClick,this);//设置监听事件 this.consoleLog4();
},
consoleLog2 : function(){
console.log("consoleLog22");
this.fireEvent("onConsole",this);
},
consoleLog4: function(){
console.log("consoleLog4");
},
goNextClick : function(){//处理监听事件的方法,并扔出事件
console.log("You have click the 下一步");
console.log("goodbye");
this.fireEvent("onGoNextClick",this);
}
});

ControllerCenter.js

Ext.define('testComponent.controller.ControllerCenter',{
extend : 'Ext.app.Controller',
alias : 'controllerCenter',
views : ['testComponent.myComponent.MyPanel'], init : function(){
this.control({
"myPanel" :{
onConsole : this.consoleLog3,
onGoNextClick : this.goNextClick //捕捉点击扔出的事件
}
}) this.callParent(arguments);
}, consoleLog3 : function(me,you){
console.log("consoleLog3");
console.log(me);
console.log(this);
console.log(you);
me.consoleLog4();
},
goNextClick : function(me,you){ //在controller中处理点击的方法
console.log(me);
console.log("你没有点击上一步");
}
})

运行结果,点击了两次“下一次”按钮

Extjs 可重用组件开始写 2014 8 23日的更多相关文章

  1. Android 的Fragment组件(写完放假。。。)

    今天写的有点晚,做个题目有点慢,然后搞其他事搞定就到了0点,总结下就差不多该睡了. 今天学长讲的是Fragment: 一个可以将activity拆分成几个完全独立封装的可重用的组件,每个组件有自己的生 ...

  2. extjs每一个组件要设置唯一的ID

    extjs每一个组件要设置唯一的ID,否则会造成各种错误 EXTJS基本上是靠ID来识别组件的,假如你在panel1中有个ID:"keyword"的textfield,而panel ...

  3. 实用ExtJS教程100例-007:ExtJS中Window组件最小化

    在上一节中我们演示了如何使用ExtJS的Window组件,这篇内容中我们来演示一下如何将窗口最小化. 要让ExtJS标题栏中显示最小化按钮并不麻烦,只需要设置 minimizable: true 即可 ...

  4. 【ExtJS】自定义组件datetimefield(二)

    接上[ExtJS]自定义组件datetimefield(一) 第三步:添加按钮事件绑定,获取选定的时间 privates:{ finishRenderChildren: function () { v ...

  5. CSDN下载频道于2014年7月17日改版,23日-24日系统维护

    尊敬的用户你们好: CSDN于2005年推出了下载服务,经过数年的发展,下载频道的用户已经为无数用户提供了帮助.分享500万的技术资源. 感谢用户们的资源共享精神,以及对CSDN下载频道的支持 下载频 ...

  6. ExtJS 4.2 组件介绍

    目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...

  7. ExtJS 4.2 组件的查找方式

    组件创建了,就有方法找到这些组件.在DOM.Jquery都有各自的方法查找元素/组件,ExtJS也有自己独特的方式查找组件.元素.本次从全局查找.容器内查找.form表单查找.通用组件等4个方面介绍组 ...

  8. BootStrap入门教程 (三) :可重用组件(按钮,导航,标签,徽章,排版,缩略图,提醒,进度条,杂项)

    上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求. Bootstrap作为完整的前 ...

  9. ExtJS动态创建组件

    J是代码动态创建dom: 或者 eval有后台组织代码,前台执 ======================= ExtJS组件的动态的创建: 程序中大多数时候需要在后台根据业务逻辑创建符合要求的组件, ...

随机推荐

  1. 第5章分布式系统模式 在 .NET 中使用 DataSet 实现 Data Transfer Object

    要在 .NET Framework 中实现分布式应用程序.客户端应用程序需要显示一个窗体,该窗体要求对 ASP.NET Web Service 进行多个调用以满足单个用户请求.基于性能方面的考虑,我们 ...

  2. 重温前端基础之-css浮动与清除浮动

    文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...

  3. java学习笔记4——返回值

    这个简单,返回值就是计算结果. 打个比方:个表格中我只要结果,不要经过,这个返回值就是结果.这个过程就是函数. 另外还有一个函数套用一个函数,被套用的函数的结果作为一个返回值给套用的外层函使用.比如: ...

  4. poj 2955 Brackets 【 区间dp 】

    话说这题自己折腾好久还是没有推出转移的公式来啊------------------ 只想出了dp[i][j]表示i到j的最大括号匹配的数目--ค(TㅅT)------------------- 后来搜 ...

  5. jq遍历 下拉框

    var selectA1 = $("select[name=A1]"); //从A1下拉框中 搜索值 $(selectA1).children("option" ...

  6. 优动漫PAINT如何打开图形文件

    优动漫PAINT也就是我们常说的clip studio paint(CSP)的中文版本,在优动漫PAINT软件中打开文件的方式有很多,您可以直接拖拽至优动漫PAINT界面或者文档窗口,也可以执行文件菜 ...

  7. jquery里面控制显示和隐藏 ___土狗toggle

    $("#hide").click(function(){ $("p").hide(); }); $("#show").click(funct ...

  8. C++进阶 STL(3) 第三天 函数对象适配器、常用遍历算法、常用排序算法、常用算数生成算法、常用集合算法、 distance_逆序遍历_修改容器元素

    01昨天课程回顾 02函数对象适配器 函数适配器是用来让一个函数对象表现出另外一种类型的函数对象的特征.因为,许多情况下,我们所持有的函数对象或普通函数的参数个数或是返回值类型并不是我们想要的,这时候 ...

  9. react阻止无效重渲染的多种方式

    在开发React组件的过程中,我们经常会遇到这个问题:什么情况下组件会重新渲染? 当内部data发生改变,state发生改变(通过调用this.setState()) 以及父组件传过来的props发生 ...

  10. spring 组件注册

    一.声明配置类和注册 bean /** * 配置类 == applicationContext.xml 配置文件 * @author Administrator * */ //@Configurati ...