Ext JS 是一個(gè) JavaScript 框架,它具有面向?qū)ο缶幊痰墓δ堋?/span>
Ext 是封裝 Ext JS 中所有類(lèi)的命名空間。
在 Ext JS 中定義類(lèi)
Ext 提供了 300 多個(gè)類(lèi),我們可以用于各種功能。
Ext.define()用于在 Ext JS 中定義類(lèi)。
語(yǔ)法:
Ext.define(class name, class members/properties, callback function);
類(lèi)名稱(chēng)是根據(jù)應(yīng)用程序結(jié)構(gòu)的類(lèi)名稱(chēng)。 appName.folderName.ClassName
studentApp.view.StudentView。
類(lèi)屬性/成員 - 定義類(lèi)的行為。
回調(diào)函數(shù)是可選的。 當(dāng)類(lèi)正確加載時(shí),會(huì)調(diào)用它。
Ext JS 類(lèi)定義示例
Ext.define(studentApp.view.StudentDeatilsGrid, {
extend : 'Ext.grid.GridPanel',
id : 'studentsDetailsGrid',
store : 'StudentsDetailsGridStore',
renderTo : 'studentsDetailsRenderDiv',
layout : 'fit',
columns : [{
text : 'Student Name',
dataIndex : 'studentName'
},{
text : 'ID',
dataIndex : 'studentId'
},{
text : 'Department',
dataIndex : 'department'
}]
});
創(chuàng)建對(duì)象
像其他基于 OOPS 的語(yǔ)言一樣,我們也可以在 Ext JS 中創(chuàng)建對(duì)象。
不同的方式創(chuàng)建對(duì)象在 Ext JS。
使用 new 關(guān)鍵字:
var studentObject = new student();
studentObject.getStudentName();
使用 Ext.create():
Ext.create('Ext.Panel', {
renderTo : 'helloWorldPanel',
height : 100,
width : 100,
title : 'Hello world',
html : 'First Ext JS Hello World Program'
});
Ext JS 中的繼承
繼承是將類(lèi) A 中定義的功能用于類(lèi) B 的原理。
在 Ext JS 繼承可以使用兩種方法 。
Ext.extend:
Ext.define(studentApp.view.StudentDetailsGrid, {
extend : 'Ext.grid.GridPanel',
...
});
這里我們的自定義類(lèi) StudentDetailsGrid 使用 Ext JS 類(lèi) GridPanel 的基本功能。
使用 Mixins:
Mixins 是在沒(méi)有擴(kuò)展的情況下在類(lèi) B 中使用類(lèi) A 的不同方式。
mixins : {
commons : 'DepartmentApp.utils.DepartmentUtils'
},
Mixins 我們添加在控制器中,我們聲明所有其他類(lèi),如存儲(chǔ),視圖等。在這種方式,我們可以調(diào)用 DepartmentUtils 類(lèi),并在控制器或在這個(gè)應(yīng)用程序中使用其功能。
更多建議: