【ExtJS】关于constructor、initComponent、beforeRender

ExtJS提供的组件非常丰富,不过当原生的组件无法满足要求时,就需要扩展原生自定义组件了. initComponent 和 constructor 就是Extjs 提供用来实现继承和扩展的方式. 在Extjs 中使用Ext.define来实现扩展, initComponent 和 constructor的使用方式类似: Ext.define('My.panel.Panel', { extend : 'Ext.panel.Panel', initComponent : function() { /…

[Ext JS 4] Extjs 它 initComponent 和 constructor差分

initComponent 和 constructor是什么 Extjs 提供的组件还是挺丰富的, 可是有时候需求更丰富. 当Extjs 原生的组件无法实现我们的要求的时候, 就须要扩展Extjs 的组件实现自制组件了. 除了这种使用状况, 有时候对于一些同样却有使用非常多的配置, 可能像把它独立出来,单独设为一种组件供大家调用, 节省开发时间和提高代码重用度. initComponent 和 constructor 就是Extjs 提供用来实现继承和扩展的方式. Ext.define 实现扩展…

ExtJS4中initComponent和constructor的区别

Ext的define方法参数类型define( String className, Object data, Function createdFn ) 创建自定义类时,先构造(constructor)后初始化(initComponent).如: Ext.define('Btn',{ extend:'Ext.button.Button', initComponent:function(){ this.callParent(); //一定要有这句 alert('后初始化部件启动...'); }, c…

解决ExtJs Uncaught TypeError: c is not a constructor错误

ExtJs项目使用sencha app build编译以后,浏览时很容易抛出Uncaught TypeError: c is not a constructor的错误,而且会加载没有名称的js,例如 http://localhost:8080/.js 出现这种问题时,系统往往无法正常预览,但是可以通过以下方式进行解决: 使用命令 sencha app build -testing 进行编译编译完成以后进入项目根目录\\build\\testing 目录,进行预览现在可以看到具体错误,因为无…

ExtJS关于组件Component生命周期

extjs组件生命周期大体分为3个阶段:初始化.渲染.销毁. 第一阶段:初始化初始化工作开始于组件的诞生,所有必须的配置设定.事件注册.预渲染处理等都在此时进行. 1.应用组件的配置: 当初始化一个组件的实例时,传递的组件配置对象包含了希望让组件拥有的所有功能,这些都是在Ext.Component基类的前几行代码完成的. 2.注册事件: 诸如enable/disable,show,hide,render,destory,state restore,state save等等事件,是所有继承于Ex…

【ExtJS】关于Component生命周期

很久以前就学习过extjs的组件生命周期,很久之后,再回头看一看,又增加好多新的认识. extjs组件生命周期大体分为3个阶段:初始化.渲染.销毁. 第一阶段:初始化初始化工作开始于组件的诞生,所有必须的配置设定.事件注册.预渲染处理等都在此时进行. 1.应用组件的配置: 当初始化一个组件的实例时,传递的组件配置对象包含了希望让组件拥有的所有功能,这些都是在Ext.Component基类的前几行代码完成的. 2.注册事件: 诸如enable/disable,show,hide,render,d…

ExtJS笔记5 Components

参考 :http://blog.csdn.net/zhangxin09/article/details/6914882 An Ext JS application's UI is made up of one or many widgets called Components. All Components are subclasses of theExt.Component class which allows them to participate in automated lifecycl…

ExtJs MVC应用架构示例

项目目录结构 (源码)2. app.js Ext.Loader.setConfig({ enabled : true, paths : { 'Ext' : 'extjs', 'App' : 'app', 'Ext.ux' : 'extjs/ux' } }); Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; Ext.require('Ext.container.Viewport'); Ext.applicatio…

在开发 ExtJS 应用程序常犯的 10 个错误

这是 CNX 公司在开发 ExtJS 项目中总结的需要特别注意的 10 个地方.有时候,我们完全是自己使用 ExtJS 从零开始构建的新的应用程序,但有时候我们的客户会要求我们使用他们自己的代码,并且帮助他们提高性能.解决bug以及结构上的问题.同时,我们已经在 ExtJS 项目中作为“清洁者”的角色工作相当长的一段时间了,开始注意到项目中经常会出现一些很值得优化的代码,而这些情况不仅仅只在我们的项目中出现,也会经常出现在其他开发者的代码中.基于过去几年对我们自己工作的总结,我们想应该把这些经验…

ExtJS学习(一)Ext自定义类实现

工作中项目需要extjs,所以学习一下,做个笔记防止遗忘了.以后回忆起来也方便. 首先下载extjs官网地址:http://extjs.org.cn/ 下载以后的目录结构: 先写一个入门的程序吧自定义类实现新建web项目. 导入js文件. 项目中引用. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type&q…

Javascript框架 - ExtJs - 类

类(ExtJs Class) preparation! 我用的是ext-4.2,解压后会得到以下文件学习要用到的文件很少,现在保留以下文件和整个文件夹,然后删除其它文件并保持目录结构.本页面底部有提供基础包的下载. 在aspx页面中引入必要的Extjs文件,ext-all-dev.js作为调试使用,否则可替换为ext-all.js. <link href="~/Extjs/extjs-42/resources/ext-theme-neptune/ext-theme-neptune-all…

javascript:base.superclass.constructor.call(this,config)

javascript中类的继承机制如下,有一个baseClass的类,然后为其定义两个方法,someMethod()和overwriteMethod() 1 var BaseClass = function(){ 2 //do something 3 }; 4 BaseClass.prototype.someMethod = function(){ 5 //do something 6 }; 7 BaseClass.prototype.overridenMethod = function(){…

Extjs 代码拾穗

1.tree grid 添加一行 var rootNode = store.getRootNode(); var newRecord = Ext.create('MatrixDlv',{"sdDlvrName":text}); rootNode.appendChild(newRecord); var rowEditor = treeGrid.getPlugin('rowplugin'); rowEditor.startEdit(newRecord,0); 2. tree 加上这个的话,…

Extjs 自定义控件

// JavaScript Document Ext.namespace('CRM.Panels'); CRM.Panels.UserDetail = Ext.extend(Ext.Panel,{ width:350, height:120, data:{ ID: 0, FirstName: '', LastName: '', Email: '', City: '', Phone:'' }, split:true, tpl: new Ext.XTemplate([ '<div>编号:{ID}&…

ASP.NET MVC EXTJS 通用主菜单框架

一.说明首先我不知道定义的文章标题是不是准确,我这篇博文介绍的是一个通用的软件主菜单框架,界面布局用的是extjs,还是先上一个图吧. 软件主界面左侧菜单采用的风格是extjs的手风琴模式,需要注意的是,界面上“修改密码”和“退出”功能没有实现. 2.系统应用步骤 (1).在数据表moduleList中修改菜单信息,moduleList数据表的结构.数据将在后面展示 (2).在菜单对应的界面上,添加UI设计,添加新功能的后台代码即可在源代码中,在项目目录中的文件夹“ItemPanel”中查找…

ExtJS 4.2 评分组件

上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍代码参考的是 Sencha Touch 2上的一个RatingStar扩展插件,在此基础上做了移植到ExtJS 4.2,并扩展了默认值.form表单支持等功能. 1.1 JavaScript代码 /*! * 评分组件 */ Ext.define('App.Demo.RatingStarFiledDemoTab', { extend: 'Ext.panel.Panel'…

ExtJS 4.2 业务开发(三)数据添加和修改

接上面的船舶管理业务,这里介绍添加和修改操作. 目录 1. 添加操作 2. 修改操作 3. 在线演示 1. 添加操作 1.1 创建AddShipWindow.js 在业务中的view目录下创建一个AddShipWindow.js文件,表示一个增加船舶的窗口组件. 此文件中包含了一个form组件用于显示所要添加的字段:船舶名称.状态.吨数和核载人数. 具体代码如下: Ext.define('App.ShipMgr.view.AddShipWindow', { extend: 'Ext.window…

ExtJS 4.2 Date组件扩展：添加清除按钮

ExtJS中除了提供丰富的组件外,我们还可以扩展他的组件. 在这里,我们将在Date日期组件上添加一个[清除]按钮,用于此组件已选中值的清除. 目录 1. Date组件介绍 2. 主要代码说明 3. 代码与在线演示 1. Date组件介绍这里的Date组件全称为 Ext.form.field.Date,为form表单一个组件. 查看Ext.form.field.Date的源代码的得知需要 Ext.picker.Date. Ext.picker.Date是一个日期选择器,包含了日期选中.渲染布局…

ExtJS 中类的选项 - config

首先看一个例子,我们在ExtJS中定义一个Window对象,代码如下: var win = Ext.create("Ext.window.Window", { title: '示例窗口', width: 300, height: 200 }); win.show(); 在上面的代码中,我们通过Ext.create方法创建了一个Window 对象,Ext.create 方法的第一个参数是类名,第二个参数是类的选项,它是一个JSON格式的对象,用来初始化Window对象.我们的窗口运行如下…

ExtJS 中类的继承

ExtJS 允许对现有的类进行扩展,其扩展可以通过继承来实现.接下来我们就对刚刚使用ExtJS定义的Person类进行继承,定义一个Developer类,它继承自Person,同时还拥有Coding方法,代码如下: Ext.define("Developer", { extend: 'Person', Coding: function (code) { Ext.Msg.alert(this.Name + " 正在编码", code); }, constructor:…

ExtJS扩展：扩展grid

ExtJs的grid功能很强大,但是有时候觉得总是少那么一点点功能,我们就来扩展它,让它用起来更方便. 今天我们要扩展的是:根据记录的选择数量来禁用或启用grid toolbar上的某些按钮. 本文所有的代码和例子都在我的github上:ExtJsExtend 开始之前在开始之前,我们先来扩展ExtJs的container容器. 在ExtJs中,可以通过给组件分配一个id来标识它,id是一个全局的唯一的标识,然后通过Ext.getCmp(id)来获取这个组件,看起来很方便,但是在单页应用中,给…

Extjs扩展：封装Plupload

关于Plupload Plupload是一个web文件上传组件,支持通过HTML5.Silverlight.Flash或者普通的form来上传文件,提供了过滤文件类型.设置上传文件大小.上传进度.针对图片的缩放上传的特性,在使用上也非常简单: 1: var uploader = new plupload.Uploader({ 2: runtimes : 'html5,flash,silverlight,html4', 3: browse_button : 'pickfiles', // you…

Extjs 学习总结-Ext.define自定义类

本教程整理了extjs的一些基本概念及其使用,包括自定义类(Ext.define).数据模型.代理等.本节介绍使用Ext.define自定义类使用Ext.define自定义类 1. 首先看看js中自定义类的代码: var Person = function (name, age) { this.Name = ""; this.Age = 0; this.Say = function (msg) { alert(this.Name + " Says : " + ms…

ExtJs 实现表单联动

最近做的项目使用Extjs.遇到表单联动的业务.下面来说说主要实现思想: 说明:表单联动一般存在从属关系,有大范围的对象和大范围中的小对象.比如地理位置的选定(例:浙江省-杭州市-某某县).在这里,我将大范围的对象称为包含对象,大范围中的小对象称为被包含对象. 表单联动针对ComboBox(组合框).在实现时,将包含对象传入被包含对象中,在后台查询被包含对象时,使用传入的包含对象的某个值(一般为被包含对象的外键)作为condition,查询与其相关的被包含对象.实现指定的被包含对象查询. 还有一…

无废话ExtJs 入门教程二十一[继承：Extend]

无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承”定义在我们定义的新组件中,从而达到重用的目地. 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-…

无废话ExtJs 入门教程十九[API的使用]

无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节. ExtJs的Api必须部署到IIS上,ExtJS的API首页如下图所示: 左侧是搜索栏,可以搜索所有的Ext的组件,如上图…