今天开始自己去写组件。

这次写组件重点在于参考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. oracle11g安装与拆卸

    Oracle 11g安装 1.解压下载的包,然后进入包内,点击setup.exe开始安装 . 2.出现如下:一般把那个小对勾取消,点击下一步进行, 弹出下图这个后点'是' 3.下图后,选择创建和配置数 ...

  2. canvas的常用api

    canvas 标签 <canvas width="600" height="400" id="canvas"></canv ...

  3. LeetCode 75. Sort Colors (python一次遍历,模拟三路快排)

    LeetCode 75. Sort Colors (python一次遍历,模拟三路快排) 题目分析: 本题需要实现数字只包含0,1,2的排序,并且要求一次遍历. 由于只用把数字隔离开,很容易想到快排的 ...

  4. 【Oracle】三种方式查看SQL语句的执行计划

    查看执行计划的方式有三种: EXPLAIN PLAN .V$SQL_PLAN .SQL*PLUS AUTOTRACE 1.EXPLAIN PLAN: 显示执行相应语句时可以使用的理论计划 读取执行计划 ...

  5. IIS网站调用FFMPEG执行截图命令失败的原因(暂时记录)

    之前有个功能是用户上传视频后,网站对其进行截图处理.功能采用FFMPEG操作,在本机新建一个小程序进行调试时是没有问题的. 可功能原封不动挪到项目里,截图竟然失败了,于是开始排查. 期初以为是参数设置 ...

  6. 【技术累积】【点】【java】【9】Optional

    基础概念 java8引入的,java9有加强 Google公司出品 旨在更好的处理NullPointException 创建Optional实例和基础使用 Optional op1 = Optiona ...

  7. 验证码识别 Tesseract的简单使用和总结

    Tesseract是什么 OCR即光学字符识别,是指通过电子设备扫描纸上的打印的字符,然后翻译成计算机文字的过程.也就是说通过输入图片,经过识别引擎,去识别图片上的文字.Tesseract是一种适用于 ...

  8. Centos7 单节点安装 FastDFS + FastDHT服务

    Centos7 单节点安装 FastDFS + FastDHT服务 1.安装gcc(编译时需要) FastDFS是C语言开发,安装FastDFS需要先将官网下载的源码进行编译,编译依赖gcc环境,如果 ...

  9. JS 100元购物卡,牙刷5元,香皂2元、洗发水15元 100元正好花完有多少种可能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. struct timeval和gettimeofday

    struct timeval和gettimeofday() struct timeval结构体在time.h中的定义为: struct timeval { time_t tv_sec; /* Seco ...