- 浏览: 11682 次
- 性别:
- 来自: 大连
最新评论
1.extjs4对类做了新的定义 记录下以前不知道的知识
类在实例化是分pre-processorts 和post-processors
pre-processors:
Loader,Extend,Mixins,Config,Statics
post-processors:
Alias,Singleton,Legacy->callback()
三个参数:
String-> name of the class , properties, callback
2.extjs4中定义在Config中的特性实例化时会自动生成get, set, reset, and apply方法。
apply方法作update用的:
constructor function相当于构造函数
3.如果类继承自另一个类 那么继承父类的方法callParent会自动被调用 不再需要使用Plane.superclass.constructor.apply(this, arguments);
4.mixins 相当于友元类
By using the mixins configuration option we tell the class defining process to use the mixins
preprocessor to merge all of the mixin class' members into the main class. This now means
that all of the methods and properties defined as part of the HasCamera class can be
accessed directly from the parent class' instance.
还可以在其中重写mixins进来的类的方法。
5.this关键字
This keyword exists
everywhere and provides us with a reference to the context (or scope) that the current piece of code is executing in.
This means that we can define properties on
this object and have them contained within this object, and so, inaccessible from any other scope
If we add a property to the this object in our constructor, we can alert it once a new
instance has been created. Notice that if we try to alert this.myProperty outside the scope of the MyClass object, it doesn't exist because this now refers to the browser window:
Ext.bind()
force the dog object's speak method to execute in the scope of the cat object by passing it as its second parameter:
eg2:
If you were to include multiple event handlers within the listeners property the scope
value would be applied to them all. If you want to specify a different scope value for each
event, you can use the following syntax:
6.使用定义好的类
先载入需要的类的路径:
使用require创建类的实例:
7.实例化一个panel类如:
8.Ext.ComponentQuery 是一个singleton class 接受css/xPath 样式选择器
接受方式:
a.var panels = Ext.ComponentQuery.query('panel');
b.var customXtypeComponents = Ext.ComponentQuery.query('[xtype="My.Custom.Xtype"'];
c.var saveButton = Ext.ComponentQuery.query('button[action="saveUser"]');
d.var buttonsAndTextfields = Ext.ComponentQuery.query('button,textfield');
e.var usersPanel = Ext.ComponentQuery.query('#usersPanel');
f.var extraOptionsComponents = Ext.ComponentQuery.query('component[extraOptions]');
g.var validField = Ext.ComponentQuery.query('form >textfield{isValid()}');
8.继承extjs components -> 为了重写component里的一些方法而定义的类
示例:
an override for the initComponent method, which is used by each
component to add its own configuration and perform any actions that are needed to set the component up. In order to ensure that this component behaves as it should, we call
the parent class' initComponent method (in this case, Ext.panel.Panel) using the callParent method.
Next, we give our new class the configuration we want. We do this by using the Ext.apply method, which merges our configuration object into the class itself.
重写onRender方法:
示例:
类在实例化是分pre-processorts 和post-processors
pre-processors:
Loader,Extend,Mixins,Config,Statics
post-processors:
Alias,Singleton,Legacy->callback()
三个参数:
String-> name of the class , properties, callback
2.extjs4中定义在Config中的特性实例化时会自动生成get, set, reset, and apply方法。
Ext.define('Cookbook.Vehicle', { config: { Manufacturer: 'Aston Martin', Model: 'Vanquish' }, constructor: function(config){ // initialise our config object this.initConfig(config); }, getDetails: function(){ alert('I am an ' + this.Manufacturer + ' ' + this.Model); } }); // create a new instance of Vehicle class var vehicle = Ext.create('Cookbook.Vehicle'); // display its details vehicle.getDetails(); // update Vehicle details vehicle.setManufacturer('Volkswagen'); //here Manufacture自动生成set函数 vehicle.setModel('Golf'); // display its new details vehicle.getDetails();
apply方法作update用的:
applyModel: function(model){ Ext.get('model').update(model); //dom里有一个id为model的span更新它的值 return model; }
constructor function相当于构造函数
3.如果类继承自另一个类 那么继承父类的方法callParent会自动被调用 不再需要使用Plane.superclass.constructor.apply(this, arguments);
4.mixins 相当于友元类
Ext.define('HasCamera', { takePhoto: function(){ alert('Say Cheese! .... Click!'); } }); Ext.define('Cookbook.Smartphone', { mixins: { camera: 'HasCamera' } }); Ext.define('Cookbook.Smartphone', { mixins: { camera: 'HasCamera' }, useCamera: function(){ this.takePhoto(); } });
By using the mixins configuration option we tell the class defining process to use the mixins
preprocessor to merge all of the mixin class' members into the main class. This now means
that all of the methods and properties defined as part of the HasCamera class can be
accessed directly from the parent class' instance.
还可以在其中重写mixins进来的类的方法。
takePhoto: function(){ this.focus(); this.mixins.camera.takePhoto.call(this); //使用mixin进来的类里的方法,而不是重写之后的方法。 }
5.this关键字
This keyword exists
everywhere and provides us with a reference to the context (or scope) that the current piece of code is executing in.
This means that we can define properties on
this object and have them contained within this object, and so, inaccessible from any other scope
If we add a property to the this object in our constructor, we can alert it once a new
instance has been created. Notice that if we try to alert this.myProperty outside the scope of the MyClass object, it doesn't exist because this now refers to the browser window:
function MyClass(){ console.log(this); this.myProperty = 'Hello'; } var myClass = new MyClass(); alert(myClass.myProperty); // alerts 'Hello' alert(this.myProperty); // alerts 'undefined'
Ext.bind()
force the dog object's speak method to execute in the scope of the cat object by passing it as its second parameter:
Ext.bind(dog.speak, cat)(); // alerts 'miaow'
eg2:
var button = Ext.create('Ext.button.Button', { text: 'My Test Button', listeners: { click: function(button, e, options){ alert(this.text); //alert(My Test Button) } }, renderTo: Ext.getBody() }); button.show(); var exampleObject = { text: 'My Test Object' }; listeners: { click: Ext.bind(function(button, e, options){ alert(this.text); }, exampleObject) //alert(My Test Object) } 相当于: listeners: { click: function(button, e, options){ alert(this.text); }, scope: exampleObject }
If you were to include multiple event handlers within the listeners property the scope
value would be applied to them all. If you want to specify a different scope value for each
event, you can use the following syntax:
listeners: { click: { fn: function(button, e, options){ alert(this.text); }, scope: this }, afterrender: { fn: function(button, options){ // do something... }, scope: otherObject } }
6.使用定义好的类
先载入需要的类的路径:
Ext.Loader.setConfig({ enabled: true, paths: { 'Cookbook': 'src/Cookbook' } });
使用require创建类的实例:
Ext.require('Cookbook.Vehicle', function(){ var van = Ext.create('Cookbook.Vehicle', 'Ford', 'Transit', 60); van.travel(200); });
7.实例化一个panel类如:
var panel = Ext.create('Ext.panel.Panel', { height: 500, width: 500, renderTo: Ext.getBody(), layout: { type: 'vbox', align: 'stretch' }, items: [{ xtype: 'tabpanel', itemId: 'mainTabPanel', flex: 1, items: [{ xtype: 'panel', title: 'Users', id: 'usersPanel', layout: { type: 'vbox', align: 'stretch' }, tbar: [{ xtype: 'button', text: 'Edit', itemId: 'editButton' }], items: [{ xtype: 'form', border: 0, items: [{ xtype: 'textfield', fieldLabel: 'Name', allowBlank: false }, { xtype: 'textfield', fieldLabel: 'Email', allowBlank: false }], buttons: [{ xtype: 'button', text: 'Save', action: 'saveUser' }] }, { xtype: 'grid', flex: 1, border: 0, columns: [{ header: 'Name', dataIndex: 'Name', flex: 1 }, { header: 'Email', dataIndex: 'Email' }],store: Ext.create('Ext.data.Store', { //类中可以实例化定义好的其他类 fields: ['Name', 'Email'], data: [{ Name: 'Joe Bloggs', Email: 'joe@example.com' }, { Name: 'Jane Doe', Email: 'jane@example.com' }] }) }] }] }, { xtype: 'component', itemId: 'footerComponent', html: 'Footer Information', extraOptions: { option1: 'test', option2: 'test' }, height: 40 }] });
8.Ext.ComponentQuery 是一个singleton class 接受css/xPath 样式选择器
接受方式:
a.var panels = Ext.ComponentQuery.query('panel');
b.var customXtypeComponents = Ext.ComponentQuery.query('[xtype="My.Custom.Xtype"'];
c.var saveButton = Ext.ComponentQuery.query('button[action="saveUser"]');
d.var buttonsAndTextfields = Ext.ComponentQuery.query('button,textfield');
e.var usersPanel = Ext.ComponentQuery.query('#usersPanel');
f.var extraOptionsComponents = Ext.ComponentQuery.query('component[extraOptions]');
g.var validField = Ext.ComponentQuery.query('form >textfield{isValid()}');
8.继承extjs components -> 为了重写component里的一些方法而定义的类
示例:
Ext.define('Cookbook.DisplayPanel', { extend: 'Ext.panel.Panel' initComponent: function(){ // apply our configuration to the class Ext.apply(this, { title: 'Display Panel', html: 'Display some information here!', width: 200, height: 200, renderTo: Ext.getBody() }); // call the extended class' initComponent method this.callParent(arguments); } });
an override for the initComponent method, which is used by each
component to add its own configuration and perform any actions that are needed to set the component up. In order to ensure that this component behaves as it should, we call
the parent class' initComponent method (in this case, Ext.panel.Panel) using the callParent method.
Next, we give our new class the configuration we want. We do this by using the Ext.apply method, which merges our configuration object into the class itself.
重写onRender方法:
示例:
Ext.define('Cookbook.InfoTextField', { extend: 'Ext.form.field.Text', onRender: function(){ this.callParent(arguments); // insert our Info Text element Ext.core.DomHelper.append(this.getEl(), '<div>' + this. infoText + '</div>'); } //we immediately call the parent's onRender method, so the field is fully rendered before our code is executed. We then use the Ext.core. DomHelper class to insert a new div element, after the textfield, containing the value from the component's infoText property }, function(){ console.log('Cookbook.InfoTextField defined!'); }); var infoTextField = Ext.create('Cookbook.InfoTextField', { renderTo: Ext.getBody(), fieldLabel: 'Username', infoText: 'Your Username must be at least 6 characters long.' }); infoTextField.show();
发表评论
-
extjs actioncolumn 、eclipse 启动时停在loading brend、在controller中找到view
2014-05-12 16:50 5941.extjs mvc actioncolumn handle ... -
extjs cellediting
2014-04-25 14:39 16081.项目使用extjs cellediting,使用后grid ... -
操纵dom,handling事件和ajax请求
2014-01-30 09:45 01.Ext.get() 接收一个参数,可以使dom元素的id, ... -
extjs和java后台间的交互(登录实例)
2014-01-23 10:23 1201一个login.jsp界面 一个ext_login.js: ... -
extjs debug
2014-01-03 15:46 690extjs新引进了bootstrap 可以在其中定义是否deb ... -
前端extjs学习之旅(1)
2013-12-19 09:46 834从上周正式开始学习Extj ...
相关推荐
ExtJS对几种面向对象体现.txt ExtJS对几种面向对象体现.txt
NULL 博文链接:https://lisongqiu168.iteye.com/blog/1004040
EXTJS4自学手册——EXT对象选择 二 Extjs 数据组件 EXTJS4自学手册——EXT数据结构组件(创建一个Model) EXTJS4自学手册——EXT数据结构组件(Model数据验证,数据交互) EXTJS4自学手册——EXT数据结构组件 EXTJS4...
Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读(二)——MVC构架(上) Extjs4 API文档阅读(二)——MVC构架(下) Extjs4 API文档阅读(四)——Data ...
Extjs4的demo 很不错的例子
extJs3升级extjs4方案, extJs3升级extjs4需要修改大量代码
包含各种类型的extjs小图标,Extjs4小图标
我很自豪能代表Sencha和ExtJS团队和大家成功的分享了ExtJS 4的预览版、3个beta版和今天发布的正式版等5个版本。 ExtJS 4从创建之初,就以最全面现代化为目标,它采用了改进的架构和加入了许多新的特性,从而使你可以...
extjs4 中文 API
Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...
ExtJs 4 API 中文
ExtJs2.0学习系列(1)--Ext.MessageBox
项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议
从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从ExtJs5开始则引入了MVVC架构。 从网上资料来看,多数都是停留在ExtJs3...
用extjs4 TreeGrid做的report报表
ExtJS4下拉树组件 ExtJS4下拉树组件
ExtJS4之初体验,中文版的文档,Getting started with extjs的中文版
ExtJs4 中文文档之类系统和编码规范
extjs4-教程搭建 ExtJS 入门学习、可视化开发环境、布局详解 、文档阅读
extjs4环境搭建