`

extjs4 类,面向对象原则

 
阅读更多
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方法。
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();
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics