【ExtJS】关于自定义组件

一、命名规范

  在你编码过程中对类,名字空间以及文件名使用统一的命名规则对你代码的组织,结构化以及可读性有很大的好处。


1、类命名规范:

  类名最好只包含字母,在多数情况下,数字是不鼓励使用的,除非非要用不可,也不要使用下划线,-以及其它非字母字符,例如:

    MyCompany.useful_util.Debug_Toolbar 不鼓励这样命名

    MyCompany.util.Base64 可接受的命名

  类名最好包括组织,在适当的名字空间通过使用.来访问对象属性,至少,类名应该有一个顶层的包。例如:

    MyCompany.data.CoolProxy

    MyCompany.Application

  顶层的包名以及实际的类名应该使用CamelCased命名规范,其它应该为小写,如下:

    MyCompany.form.action.AutoLoad

  不要使用Ext作为顶层包名,首字母应该遵循CamelCased命名规范,如:

    Ext.data.JsonProxy instead of Ext.data.JSONProxy

    MyCompany.util.HtmlParser instead of MyCompary.parser.HTMLParser

    MyCompany.server.Http instead of MyCompany.server.HTTP


2、源文件命名规范:

  类名直接映射到存储该类的文件路径,因此,每个文件只能有一个类,如

    Ext.util.Observable is stored in path/to/src/Ext/util/Observable.js

    Ext.form.action.Submit is stored in path/to/src/Ext/form/action/Submit.js

    MyCompany.chart.axis.Numeric is stored in path/to/src/MyCompany/chart/axis/Numeric.js

  path/to/src目录包含应用的所有类,所有类应该放在这个公共根目录下,以合适的名字空间来获得最好的开发,管理以及部署体验。

  方法以及变量的命名规则与类命名相似,方法和变量的命名也只包含字母,数字不鼓励使用,除非必须用到,同样不使用下划线,-以及其它非字母字符。

  方法和变量命名应该遵循CamelCased命名规范,应适用首字母。例如

    可接受的方法名:

      encodeUsingMd5()

      用getHtml() 替代 getHTML()

      用getJsonResponse()替代 getJSONResponse()

      用 parseXmlContent()替代parseXMLContent()

    可接受的变量名:

      var isGoodName

      var base64Encoder

      var xmlReader

      var httpServer


3、属性命名:

  类属性命名和上面方法以及变量一样,除了当属性是静态常量的时候。

  当属性是静态常量时,字母应该大写。

    Ext.MessageBox.YES = "Yes"

    Ext.MessageBox.YES = "Yes"

    Ext.MessageBox.NO = "No"

    MyCompany.alien.Math.PI = "4.13"



二、define

  在ExtJS4之前,使用Ext.extend来创建类,在ExtJS4之后,使用Ext.define来创建类。

  基本语法:

  Ext.define(className, members, onClassCreated);

  其中,

    className:类名

    members:这是一个对象,它表示一个以键值对形式表示的类成员集合。

    onClassCreated:这是一个可定制的回调函数,当这个类所依赖的类都准备完毕时便会调用这个回调函数,并且类本身将会完全创建。由于有这个类创建新异步属性,这个回调在很多情况都会很有用。

例:

 1 Ext.define(‘MyComponent.getWH‘, {
 2     showSize: function(){
 3             var dom = Ext.get(Ext.getBody().dom);
 4             Ext.Msg.alert(‘My Component WH‘,‘Dom Width: ‘ + dom.getWidth() + ‘<br />Dom Height: ‘ + dom.getHeight());
 5     }
 6 });
 7 Ext.onReady(function(){
 8     var myPanel = Ext.create(‘MyComponent.getWH‘,{
 9         renderTo: Ext.getBody()
10     });
11     myPanel.showSize();
12 });

效果:

   



接下来的目标,就是在不同需求中,各种布局之下的组件功能的定制。

时间: 2024-10-10 15:04:18

【ExtJS】关于自定义组件的相关文章

【ExtJS】自定义组件datetimefield(一)

目的: ExtJS中提供了下拉日期选择控件Ext.form.field.Date与下拉时间选择控件Ext.form.field.Time.不过没有一个在选择日期时选择时间的控件datetimefield.目的就是运用自定义组件的方法,来扩展下拉日期选择控件Ext.form.field.Date,在下拉框中添加时间选择的组件.目标效果: 第一步:继承Ext.picker.Date,创建My.picker.DateTime类 1 Ext.define('My.picker.DateTime', {

【ExtJS】关于自定义组件(一)

一.目的: ExtJS中提供了下拉日期选择控件Ext.form.field.Date与下拉时间选择控件Ext.form.field.Time.不过没有一个在选择日期时选择时间的控件datetimefield.目的就是运用自定义组件的方法,来扩展下拉日期选择控件Ext.form.field.Date,在下拉框中添加时间选择的组件.目标效果: 二.一些知识的梳理: 当自定义创建一个新类时,最好根据需要继承一个功能相近的基类,这是因为Ext JS 提供的自动化生命周期管理将会被合适的布局管理器管理并且

ExtJS(3)- 自定义组件(星级评分)

今天介绍ExtJS的组件开发,这里以星级评分为示例,首先来看看效果图: 然后是功能操作:鼠标移动到五个星星上面时,会有tooltip显示当前的分值.如图:鼠标悬停在第四颗星星时前四颗星星显示高亮笑脸,当点击下去时锁定笑脸并且设定份数为4. 然后我们来说一下实现原理,Ext的组件基本单元是Ext.Component,所以自定义组件可以继承Component,然后显示部分直接用html来显示,包括css和动态事件都可以直接在html上编辑添加. 接下来我们来看代码: Ext.define('Pact

extjs自定义组件类

在使用extjs开发应用系统时,难免会出现一个js文件内包含数百行甚至上千行代码的情况,例如程序主界面或者复杂一点的界面,下面介绍如何通过自定义组件减少单个extjs javascript代码行数的方法. 下图中的主界面显示了两个统计图: 最初的时候统计图的js代码是写死在tagpanel里面的,通过extjs 自定义组件的方法拆分成单独的类文件以后的代码: Ext.define('app.view.main.Main_Pie_Chart', { extend: 'Ext.panel.Panel

Vue1.0学习总结(4)———Vue1.0自定义组件、Vue1.0组件之间的通信

Vue自定义组件: 组件:就是一个大的对象:new Vue({})就是一个组件定义一个组件:1.全局组件: <div id="box"> <aaa></aaa> </div> var Aaa=Vue.extend({ template:'<h3>我是一个标题</h3>' }); Vue.component('aaa',Aaa); a)给自定义的组件添加数据: data必须是函数的形式,函数必须返回一个对象(json

1、开发自定义组件简要

一.自定义组件分类 Customized Component:继承VIew ,增加更多的属性和事件.  横向扩展 Compound Component: 继承ViewGroup , 把多个简单控件通过布局拼装一个复合控件.横向扩展 二.定义组件步骤 1 选择继承类(肯定是View or View的子类). 2 类的初始化:新增属性    属性的初值设定. 3 重载方法: 布局及呈现onDraw() , onMeasure() 事件(自定义事件)onKeyEvent() ...  监听器/重载函数

Vue结合原生js实现自定义组件自动生成

就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板:对于多种组件通过同一数据流生成的,如果事先在页面上写好挂载点(mounted),然后通过dom操作去动态添加,会遇到类似这样一条错误提示信息:Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(…).这又是为何呢,下一

ExtJS 4.2 组件介绍

目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 ExtJS的强大功能之一是提供了非常丰富的组件,包括grid(表格).panel(面板).form(表单).button(按钮).progressBar(进度条)等等. 一个的ExtJS 4应用程序的UI界面,就是由一个或多个组件组成. 这里将会介绍组件的分类.名称.结构以及创建方式. 1.2 组件分类

【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2219.html 在上一篇  [REACT NATIVE 系列教程之一]触摸事件的两种形式与四种TOUCHABLE组件详解 中的最后介绍了如何使用Touchable的四种组件进行监听触摸事件.  那么紧接着我们利用Touchable来包装一个带图片的Button组件,且设计成可接受很多自定义参数. 一:创建我们自定义

Yii2.0 高级模版编写使用自定义组件(component)

翻译自:http://www.yiiframework.com/wiki/760/yii-2-0-write-use-a-custom-component-in-yii2-0-advanced-template/ 简单模版中添加自定义组件:http://www.yiiframework.com/wiki/747/write-use-a-custom-component-in-yii2-0/ 我们实现的是添加一个读取真实IP的组件,下面是详细步骤: 1. 在项目根目录的common目录中新建com