ExtJs知識點概述

時間 2019-11-26

標籤 extjs 知識概述简体版

原文原文鏈接

1.前言

ExtJS的前身是YUI(Yahoo User Interface)。通過不斷的發展與改進，ExtJS如今已經成功發佈到了ExtJS 6版本,是一套目前最完整和最成熟的javascript基礎庫之一,利用ExtJS構建的WEB應用具備與桌面程序同樣的標準用戶界面和操做方式，並可以跨不一樣的瀏覽器平臺使用。javascript

就目前的市場趨勢，如今用戶對體驗的要求愈來愈高。涌現出不少優秀的前臺javascript框架，如Prototype、JQuery、ExtJS等等，ExtJS無疑是其中優秀的解決方案之一。它可以幫助開發者快速實現良好的用戶界面開發，在加上ExtJS又是開源的，因此ExtJS的生命力極強，做爲web開發人員來講，咱們須要掌握這個優秀的技術幫助咱們開發。css

2.ExtJS的開發包

要開始Ext之旅的第一步就是要得到開發包，咱們能夠從官方網站裏進行下載: http://www.sencha.com/products/extjs/downloadhtml

包結構說明：java

builds目錄爲ExtJS壓縮後的代碼node

docs目錄爲ExtJS的文檔web

examples目錄中是官方的演示示例ajax

locale是多國語言的資源文件,其中ext-lang-zh_CN.js是簡體中文正則表達式

overview是ExtJS的功能概述數據庫

packages中是ExtJS各部分功能的打包文件json

resource中書ExtJS要用到的圖片文件與樣式表文件

src目錄是未壓縮的源碼

bootstrap.js是ExtJS庫的引導文件,經過參數能夠自動切換ext-all.js和ext-debug.js

ext-all.js文件是ExtJS的核心庫,是必需要引入的

ext-all-debug.js文件是-all.extjs的調試版,在調試的時候可能須要使用

spket-1.6.23插件下載

3.EXT框架基礎

3.1 統一的組件模型

雖然Ext擁有幾乎完美的對象繼承模型,可是這畢竟屬於底層架構的一部分,咱們平常開發時接觸最多的仍是各類組件與佈局,

3.1.1 Ext.Component

Ext中全部的可視化組件都繼承自Ext.Component,這種單繼承的模型保證全部組件都擁有相同的通用方法和生命週期,也保證了佈局時的便利

組件經常使用的幾項功能包含initComponent(),render(),show()與hide(),destroy()不管哪一種組件,都是經過初始化,渲染,顯示,隱藏來實現生命週期的

全部Ext組件的基類,組件下全部的子類均可能參與自動化Ext組件的生命週期執行建立, 渲染和銷燬都是由Container容器類提供,組件能夠經過容器配置items建立, 也能夠經過動態方法 add建立

3.1.2 Ext.Container

Ext.Container繼承Ext.Component,它提供了兩個重要的參數,layout和items,layout參數指定當前組件使用何種佈局,items參數(數據類型)中包含的是當前組件中的全部子組件.此處不得不提的一個重要概念是xtype,這個參數來簡化配置和延遲佈局中組件的初始化,咱們在佈局中添加幾個組件,原始的方法是必須先把這些組件建立好,再加入佈局容器中

採用xtype方式會更加的簡單,咱們只須要關注對應的配置就行,

案例:

new Ext.Viewport({

layout:’border’,

items:[

{xtype:’panel’ region:’north’},

{xtype:’panel’ region:’south’},

{xtype:’panel’ region:’west’},

{xtype:’panel’ region:’east’},

{xtype:’panel’ region:’center’},

]

})

對於沒有設置xtype屬性的,ext默認的使用ext.panel使用,

若是你想製做一個能夠對自身包含的子組件進行佈局的組件,那麼就要繼承ext.container,它是一切可佈局組件的超類

這裏是全部有效的xtypes列表

xtype Class------------- ------------------

button Ext.button.Button

buttongroup Ext.container.ButtonGroup

colorpalette Ext.picker.Color

component Ext.Component

container Ext.container.Container

cycle Ext.button.Cycle

dataview Ext.view.View

datepicker Ext.picker.Date

editor Ext.Editor

editorgrid Ext.grid.plugin.Editing

grid Ext.grid.Panel

multislider Ext.slider.Multi

panel Ext.panel.Panel

progressbar Ext.ProgressBar

slider Ext.slider.Single

splitbutton Ext.button.Split

tabpanel Ext.tab.Panel

treepanel Ext.tree.Panel

viewport Ext.container.Viewport

window Ext.window.Window

Toolbar components-------------------------------

pagingtoolbar Ext.toolbar.Paging

toolbar Ext.toolbar.Toolbar

tbfill Ext.toolbar.Fill

tbitem Ext.toolbar.Item

tbseparator Ext.toolbar.Separator

tbspacer Ext.toolbar.Spacer

tbtext Ext.toolbar.TextItem

Menu components---------------------------------------

menu Ext.menu.Menu

menucheckitem Ext.menu.CheckItem

menuitem Ext.menu.Item

menuseparator Ext.menu.Separator

menutextitem Ext.menu.Item

Form components---------------------------------------

form Ext.form.Panel

checkbox Ext.form.field.Checkbox

combo Ext.form.field.ComboBox

datefield Ext.form.field.Date

displayfield Ext.form.field.Display

field Ext.form.field.Base

fieldset Ext.form.FieldSet

hidden Ext.form.field.Hidden

htmleditor Ext.form.field.HtmlEditor

label Ext.form.Label

numberfield Ext.form.field.Number

radio Ext.form.field.Radio

radiogroup Ext.form.RadioGroup

textarea Ext.form.field.TextArea

textfield Ext.form.field.Text

timefield Ext.form.field.Time

trigger Ext.form.field.Trigger

Chart components---------------------------------------

chart Ext.chart.Chart

barchart Ext.chart.series.Bar

columnchart Ext.chart.series.Column

linechart Ext.chart.series.Line

piechart Ext.chart.series.Pie

3.2 完善的事件機制

在ext中,時間分爲兩種類型,自定義事件和瀏覽器事件,全部繼承ext.util.observable類的控件均可以支持事件,而後爲這些繼承observable的對象定義一些事件,而後爲這些事件配置監聽器,當某個事件被觸發時,ext會自動調用對應的監聽器,這就是ext的事件模型,代碼清單

3.2.1自定義事件

person=function(name){

this.name=name;

this.addEvents(「walk」,」eat」,」sleep」);

}

Ext.extend(person,Ext.util.Observable,{

info:function(event){

return this.name

}

})

以上代碼實現了一個名稱爲person的類,也能夠用(ext.define定義)他有一個name屬性,初始化時調用addEvents()函數定義三個事件,walk,eat,sleep,而後使用extend()函數讓person繼承ext.util.Observable的全部屬性,此外還加上了info()函數,讓他返回person的信息,

var person =new person();

person.on(「walk」,function(){

Ext.Msg.alert(‘event’,person.name+」在走啊走啊」)

...

})

這裏的On()是addlistener()的簡寫形式,爲對象添加事件監聽器,第一個參數傳遞事件名稱,第二個參數是事件發生時的函數

3.2.2開發中常用的事件

itemclick:選項的單擊事件單擊選項時觸發。

beforeexpand:在Panel被展開以前觸發.監聽器能夠返回false取消展開操做。

beforeload:在一個新數據對象請求發出前觸發此事件

........

擴展:

handler與listener的區別

ExtJS裏handler和listener都是用來對用戶的某些輸入進行處理的，有必要區分一下各自都是怎麼用的。

一、handler是一個特殊的listener；通常用於按鈕(button)的配置項.

二、handler是一個函數，而listener是<event , 函數>對；能夠配置多個事件,能夠對Event進行方便的管理；

3.3開發模式

MVC框架總體認識

1，每一個應用都有一個實體，就是Application對象，而每一個應用一樣採用單一入口結構，有個快捷函數就是Ext.application({config})，建立一個Application對象實例，而且運行它。Application在建立之初，會去加載Controller類

2，Application在lunch的時候，會建立一個Viewport實例，這個東西就像一個骨架同樣，上面能夠拼裝各類View，具體說，就是各類佈局形式和窗體控件，能夠說是view界面的載體，一個頁面只能有一個Viewport實例。

3，View純粹是一個界面組件，或者說窗體控件的集合（好比form,grid和window）。它其實就是利用窗體控件panel,grid或form等進行用戶界面展現,表格能夠經過Ext.grid.GridPanel的getView()函數獲取當前表格使用的視圖實例,當咱們但願在建立Gridview初始化一些參數可使用Ext.grid.GridPanel的viewConfig參數,具體屬性能夠查看api.

經過Store來加載數據而且展示到界面上，界面控件的響應都寫在Controller裏面，View對Controller的存在全無所知，也沒有代碼上的依賴。

4，Controller的角色徹底是個粘合劑，它在加載之初，會幫忙加載跟其有關的Model，Store，View類，而其真正的做用，是經過一系列的事件處理函數(好比點擊保存按鈕)，肯定了每一個View上面界面組件對用戶交互行爲的響應方法，能夠說是一堆事件處理器函數的集合；這裏面主要經過一個control成員函數來進行事件綁定，經過另外一個叫ComponentQuery的組件，使用相似css selector的語法來定位界面上的組件，併爲其綁定事件處理器。

5，Model是對抽象數據的具體化，簡單理解就是數據庫裏面的一行記錄。

6，Store是對經過網絡加載數據的過程的一個抽象，Store經過data發送請求(通常爲ajax請求)到後臺獲取數據(通常返回json格式)，Store依賴於Model，經過關聯的Model對象才知道如何將取回的數據對象化。

無論是grid(表格),tree(樹),form(表單)均可以經過model格式化字段,這樣就能夠把後臺字段轉化爲Ext想要的字段,有時須要用到mapping屬性

3.4 應用程序的初始化和頁面佈局

3.4.1 經過Ext.Loader開啓動態加載功能

Ext4.x版本提供的一大亮點就是Ext.Loader這個類的動態加載機制！只要遵循路徑規範，便可動態加載js文件，方便把本身擴展組件動態加載進來，而且減輕瀏覽器的壓力

經過Loader對象咱們能夠開啓動態加載的依賴加載功能，咱們通常經過它的setConfig方法開啓動態加載，經過setPath設置加載路徑，而後經過Ext.require方法加載相關類庫。代碼以下。

/**

開啓動態加載的依賴加載功能和設置插件的路徑，並加載相關類庫

**/

Ext.Loader.setConfig({ enabled: true });//開啓動態加載的依賴加載功能，默認爲false不開啓

Ext.Loader.setPath('Ext.ux', '/Scripts/ux');//設置命名空間"Ext.ux"的路徑

Ext.require(['Ext.ux.CheckColumn', //加載相關類庫和它的直接依賴

'Ext.ux.grid.FiltersFeature',

'Ext.ux.RowExpander',

'Ext.ux.grid.SPrint']);

3.4.2類的建立與繼承

定義類的方法：define

對於Ext4.X版原本說，採用了新定義類的define方法

Ext.define(classname,properties,callback);

classname:要定義的新類的類名

properties：新類的配置對象

callback：回調函數，當類建立完後執行該函數

Ext.Class類

configs:

extend：用於繼承

3.4.3利用Viewport和view進行頁面佈局

一個頁面只能有一個Viewport，它就像骨架同樣承載着多個view（這裏指的上，下，左，右的panel），它是應用程序界面的載體

3.4.4 view，store和model建立組件和數據交互

JSON的全稱是」JavaScript Object Notation」，意思是JavaScript對象表示法，它是一種基於文本，獨立於語言的輕量級數據交換格式。XML也是一種數據交換格式，爲何沒有選擇XML呢？由於XML雖然能夠做爲跨平臺的數據交換格式，可是在JS(JavaScript的簡寫)中處理XML很是不方便，同時XML標記比數據多，增長了交換產生的流量，而JSON沒有附加的任何標記，在JS中可做爲對象處理，因此咱們更傾向於選擇JSON來交換數據。

3.4.5 Json對象與Json字符串

json字符串：指的是符合json格式要求的js字符串。例如：var jsonStr = "{StudentID:'100',Name:'tmac',Hometown:'usa'}";

json對象：指符合json格式要求的js對象。例如：var jsonObj = { StudentID: "100", Name: "tmac", Hometown: "usa" };

4.經常使用的組件

4.1 Ext.Panel

Ext.Panel是Ext常用的一個組件,它直接繼承自Ext.Container,Ext.Panel無須繼承就能夠直接使用,使用collapseFirst,collapsed,collapsedCls和collapsible設置與面板摺疊相關的配置,除此以外,還可使用floating和shadow設置浮動陰影效果,以及使用html直接設置面板內容.

4.2表格控件

Ext表格功能很是的強大,包括排序,緩存,拖動,隱藏某一列,自動顯示行號,,單元格編輯等實用功能.

表格由Ext.grid.Gridpanel定義,繼承於Ext.panel,其xtype爲grid,在ext中,表格控件必須包含列定義信息,並指定表格的數據存儲器,表格的列信息由數組columns定義,而表格的數據存儲器由Ext.data.Store定義

表格包含的列由columns配置屬性來描述,columns是一個數組,每一行數據元素描述表格的列信息,表格的列信息包含首部顯示文本(header),列對應的記錄集字段(dataIndex),列是否可排序(sortable),列的渲染函數(renderer),寬度(width),格式化信息(format)等,主要用的是顯示文本和記錄集字段

var columns=[

{hearder:’編號’,dataIndex:’id’},

{hearder:’名稱’,dataIndex:’name’},

{hearder:’描述’,dataIndex:’descn’}

]

列的默認寬度是100px,可使用width屬性自定義寬度,表格的結構肯定後咱們就能夠向裏面添加數據了,

var data =[

[‘1’,’name1’,’descn1’],

[‘2’,’name2’,’descn2’],

[‘3’,’name3’,’descn3’],

[‘4’,’name4’,’descn4’]

]

var store =new Ext.data.arrayStore({

renderTo:’grid’,

data:data,

fields:[//與columns定義的地方相對應,利用屬性mapping能夠控制對應關係

{name:’id’,mapping:1},

{name:’name’,mapping:0},

{name:’descn’,mapping:2},

] })

store.load();//初始化數據

var data=...建立了一個數據存儲對象,用來定義表格中要顯示的數據,這也是表格必須配置的屬性,數據存儲對象store負責把各類各樣的原始數據(如二維數組,json對象數組,xml文本等)轉換成Ext.data.Record類型的對象,經過Ext.data.ArrayStore,咱們能夠把任何格式的數據轉換成表格可使用的形式,

store對應兩個部分:proxy和reader,proxy是指獲取數據的方式,reader是指如何解析這一對數據,這裏咱們使用Ext.data.ArrayStore,它的內部會默認經過內存加載json數據做爲元數據

renderTo屬性指定ext將表格渲染到什麼地方,因此HTML裏應該有一個<div id=」grid」></div>與之對應

4.2.1自動顯示行號

var columns=[

new Ext.grid.RowNumberer(),

{hearder:’編號’,dataIndex:’id’},

...

]

grid.view.refresh();//能夠刷新表格,從新顯示行號,

4.2.2複選框

var sm =new Ext.selection.CheckboxModel();

var grid =new Ext.grid.gridpanel({

autoHeight:true,

renderTo:grid,

store:store,

columns:columns,

selModel:sm

sm:new Ext.grid.RowModel({singleSelect:true})//(行選擇模型),按ctrl能夠多選

})

4.2.3表格分頁

var grid =new Ext.grid.gridpanel({

renderTo:grid,

store:store,

columns:columns,

bbar:new Ext.PagingToolbar({

pageSize:10,

stroe:store,

displayInfo:teue,

displayMsg:’顯示第{0}條到{1}條記錄,一共{2}條’,

emptyMsg:」沒有記錄」

})

store.load();

後臺翻頁使用json獲取數據格式通常是

{totalProperty:100,

root:[

{id:0,name:」name0」,descn:」dwscn0」}

{id:1,name:」name1」,descn:」dwscn1」}

]}

proxy也要改一下

proxy{

type:’ajax’,

url:’####.jsp’

}

reader:{

type:’json’,

totalProperty:’totalProperty’,

root:’root’,

idProperty:’id’

}

最後在初始化時經過傳遞對應的分頁參數去得到但願獲得額數據,具體代碼

store.load({params:{start:0,limit:10}})

拓展:

1.利用pagingMemoryProxy.js能夠實現前臺分頁,適用於數據量比較小的

2.Ext.grid.plugin.CellEditing與Ext.grid.propertyGrid能夠提供表格編輯的功能,詳情查看api

3.表格的features:[{htype:’grouping’}]能夠實現表格分組

4.表格的resizable函數實現拖放改變表格大小

5.gridviewdragdrop實現單個表格或者表格之間的拖放

6.利用右鍵事件itemconextmenu能夠實現表格的右鍵菜單

7.在表格的plugins屬性添加一個Ext.ux.RowEditor就能夠啓用行編輯器,而後雙擊表格的某一行就會看到行編輯器,咱們還要爲columns添加一個editor屬性,該屬性定義輸入控件的xtype和校驗規則,

8.在分頁工具pagingToolbar中添加Ext.ux.ProgressBarPager能夠用進度條方式顯示分頁

4.2.4樹形表格

樹形表格同時具有樹形的分級結構和表格的豐富內容,

Ext.ux.tree.TreeGrid詳細使用查看api

4.2.5 root與record的用法

{

"total": 122,

"success": true,

"users": [

{

"id": "ed-spencer-1",

"value": 1,

"user": {

"id": 1,

"name": "Ed Spencer",

"email": "ed@sencha.com"

}

]

}

reader: {

type : 'json',

root : 'users',

record: 'user'

}

reader讀取返回的json

reader : {

type : 'json',

root : 'users',//通常爲數組的鍵名稱

record:'user'

totalProperty : 'total',(默認值)若是不是total就用這個屬性指定下

successProperty : "success" (默認值)

}

若是是data[list[{....},{....}]]若是root是list,則root:data.list

4.3表單與輸入控件

4.3.1表單

Ext.form.FormPanel繼承自Ext.Panel,能夠對其執行各類panel的操做,實際上,表單的功能是Ext.form.BasicForm中實現的,在獲取Ext.form.FormPanel以後,隨時可使用getForm()方法得到BasicForm對象,咱們能夠在獲得的BasicForm上執行」提交表單數據」和」復位表單初始值」等操做,

Ext.form.FormPanel最大的好處就是利於佈局,Ext.form.FormPanel繼承了Ext.Panel,咱們能夠把Ext.form.FormPanel放在Ext.Viewport中做爲整個頁面佈局的一部分,同時也能夠利用items指定Ext.form.FormPanel內部的子組件,若是其餘panel同樣,能夠經過xtype來指定每一個子組件的類型,

Ext各類輸入組件的繼承圖

4.3.2輸入控件

Ext.form.Field是全部表單輸入控件的基類,定義了輸入控件通用的屬性和功能函數,這些通用的屬性和功能函數大體分爲3大類:頁面顯示樣式,控件參數配置和數據有效性驗證

頁面顯示樣式:clearCls,cls,fieldClass,focusClass,itemCls,invalidClass,labelStyle等屬性,它們用來定義不一樣狀態下輸入框採用的樣式,

控件參數配置:

autoCreate,disabled,fieldLabel,hideLabel,inputType,labelSeparator,name,readOnly,tabIndex,value等屬性,它們主要來設置輸入控件生成的DOM內容和標籤內容,以及是否禁用和是否可讀等配置

數據有效性校驗: invalidText,msgFx,msgTarget,validateOnBlur,validateDelay,validateEvent等屬性,它們用來設置數據校驗的方式以及如何顯示錯誤信息

4.3.3控件類型

文本輸入框控件:Ext.form.TextField

日期輸入控件:Ext.form.DateField

時間輸入控件:Ext.form.TimeField

下拉控件:Ext.form.ComboBox

在線編輯器:Ext.form.HtmlEditor

隱藏域:Ext.form.Hidden

複選框:Ext.form.Checkbox

單選框:Ext.form.Radio

4.3.4表單佈局

默認佈局

表單中的標籤默認使用左對齊的方式,一共有left,top,right,經過配置lableAlign:’right’,咱們可使用右對齊標籤,標籤文字的寬度也可使用labelWidth設置,formPanel的默認佈局是layout:’form’(自上而下佈局)

平行分列布局

咱們使用layout=’column’來講明使用的是列布局,而後在items指定的每列中使用columnWidth指定每列所佔總寬度的百分比,若是使用列布局,不能使用defaultType只能默認的xtype了,不然會影響佈局,在每一列中,咱們也手動指定layout:’form’這樣才能在每列中正常顯示輸入框和對應的標籤

4.3.5數據校驗

1.輸入不能爲空:allowBlank:false

2.最大長度和最小長度:maxLength ,minLength

3.藉助vtype,屬性值alpha:只能輸入英文

alphanum:只能輸入字母和數字

email:電子郵箱

url:網址

4.自定義校驗規則,這種規則其實就是應許自定義正則表達式,

regex:正則表達式,regexText:提示語

4.3.6表單提交

1.表單提交方式

buttons:[{

text:’按鈕’,

handler : function() {

var form = this.up('form').getForm()

if (form.isValid()) {

form.submit({

url : url,

method : 'POST',

waitTitle : '請等待',

waitMsg : '正在提交中...',

success : function(form, action) {

//Ext.Msg.alert('提示', suessMes);

//center.getStore().reload();

failure : function(form, action) {

//Ext.Msg.alert('提示', failureMes);

}

});

}

}]

form參數是form對象,若是想實現表單功能,可使用這個參數,好比提交後清空全部數據,第二個參數action是響應信息,action.result是一個簡易通道,省去了現貨的responseText在轉換成json的麻煩,咱們直接從它裏面調用返回的json數據,好比action.result.msg

2.Ajax提交

Ext.Ajax.request()

表單自身的ｓｕｂｍｉｔ就使用了ａｊａｘ方式，這裏用單獨的ａｊａｘ，

既然使用外部的ajax,咱們就只需知道如何從中把字段的數據取出來,具體有如下幾種方式,

1.form.getValues()函數,它有一個參數,true表明返回json組裝的字符串,把表單數據封裝爲json字符串返回,false則返回json對象,默認爲false,

2.findField()函數,它能夠得到表單裏的空間,例如,我悶悶如今有一個TextField,名稱是text,那麼就能夠經過下面的方式得到控件

var text =form.getForm().findField(「text」);

例子:

ar form = this.up('form').getForm();

var vals=form.getValues();

Ext.Ajax.request({

url: url,

method:"POST",

params: {

userid : vals['userid'],

success: function(response){

alert("請求成功");

//var text = response.responseText;

// process server response here

}

});

3.使用Html原始的提交方式

Ext默認提交方式是不會進行頁面跳轉的,主要考慮到’one page one application’的形式,ext的本質是javascript,javascript能作的事ext也能夠作到,Ext.form.Form中包裹了HTML的form表單,咱們可使用form.getForm().getEl().dom獲得ＤＯＭ模型，而後．ａｃｔｉｏｎ＝＃＃＃＃．ｊｓｐ就能夠表單提交後的跳轉了

4.3.7文件上傳

使用文件上傳控件只須要爲Ext.form.field設置inputType:’file’便可

4.3.8數據自動填充至表單

這種適用於進入修改頁面,咱們能夠利用var reder=new Ext.data.JsonReader({},[

{name:’text’,type:’String’}

{name:’number’,type:’float’}

{name:’date’,type:’date’,dateFormat:’Y-m-dTH:i:s’}

]);

而後在表單load()函數中添加向後臺獲取數據的url,而且設置表單屬性reader:reader

4.4樹形結構

在應用中,咱們常常須要顯示或者處理樹形結構的對象信息,好比部門信息或者地區信息,這些信息能夠用樹來表示,樹是典型的數據結構.

4.4.1建立樹

樹控件由Ext.tree.TreePanel類定義,繼承自Ext.Panel類,

1.得到樹面板

var tree =new Ext.tree.TreePanel();

tree.render(‘tree’)

這裏的參數tree表示渲染的DOM的id.在html中,有<div id=’tree’ ></div>與之相對應,最後這棵樹就出如今div的位置上

如今咱們得到了樹形的面板,既然是樹,就必須有一個根,有了根才能在上面生長樹枝,最後成爲一顆完整的樹,

2.建立樹根

strore:new Ext.data.TreeStore({

root:{

text:’我是根’,

leaf:true

}

})

上面定義了一顆樹的根,經過store參數把根root放到樹形裏,而後對樹形進行渲染,讓它出如今id=’tree’的位置,

3.爲樹添加枝和葉

var tree =new Ext.tree.TreePanel({

strore:new Ext.data.TreeStore({

root:{

text:’我是根’,

children:[{

text:’我是根的第一個樹枝’,

children:{

text:’我是根的第一個樹枝上的第一個葉子’,

leaf:true

}

},{text:’我是根的第一個葉子’,leaf:true }]

}

}),

rendTo:’tree’//渲染到指定的id

});

咱們建立了三個TreeNode,可讓樹加載後直接展開tree.getRootNode().expand(true,true)

4.4.2使用TreeStore得到數據

像上面那樣得到數據不只麻煩,並且容易出錯,Ext.data.TreeStore能夠利用從後臺獲取的數據爲咱們組裝出一顆樹來,咱們只須要提供數據,讓TreeStore完成數據轉換和裝配節點的操做

var tree=new Ext.tree.TreePanel({

store:new Ext.data.TreeStore({

proxy{

type:’ajax’,

url:’###.text’

root{

id=」root」,

text:’我是根’

}

})

咱們根據根節點的id返回對應JSON數據,返回的響應中必須包含每一個節點的id和text,id是節點的惟一標識,若是是葉子(後面沒有數據了)設置leaf:true

4.4.3樹的事件

tree.on(「itemexpand」,function(node){});//展開

tree.on(「itemcollapse」,function(node){});//摺疊

tree.on(「itemclick」,function(node){});//點擊

4.4.4右鍵菜單

1.製做自定義菜單

var contextmenu=new Ext.menu.Menu({

id:’theContextMenu’,

items:[{

text:’有本事點我啊!’,

handler:function(){

alert(「我被擊中了」);

}

}]

})

2.綁定contextmenu事件

tree.on(「itemcontextmenu」,function(view,record,item,index.e){

e.preventDefault();

contextmenu.showAt(e.getXY())

})

e爲右鍵事件

4.4.5修改節點的默認圖標

每一個樹形節點都有icon和iconCls屬性,他們負責指定節點的圖標

使用iconCls時,咱們還須要在HTML中添加對應的ＣＳＳ定義，好比

iconCls：icon-male,

.x-tree-icon-leaf.icon-male｛

ｂａｃｋｇｒｏｕｄ－ｉｍａｇｅ：ｕｒｌ（ｕｓｅｒ－ｍａｌ．ｐｎｇ）

｝//css要使用層疊的寫法,定義在x-tree-icon-leaf,不然css不起做用

4.4.6帶有CheckBox的樹形

只要我樹形節點添加checked:true 就會顯示對應的Checkbox,

children{

{text:’name1’,leaf:true,checked:true}

{text:’name1’,leaf:true,checked:}

}

拓展:

刷新樹的全部節點

根節點有一個reload()函數,使用它會刷新其下的全部節點

4.5數據存儲與傳輸

4.5.1 Store

Ext.data.Connection

Ext.data.Connection是對Ajax的封裝,它提供了配置實用Ajax的通用方法,Ext.data.Connection主要用於在Ext.data.HttpProxy和Ext.data.ScriptTag proxy中執行與後臺交互的任務,他會從指定的URL得到數據,並把後臺返回的數據交給HttpProxy或ScriptTagProxy處理,Ext.Ajax繼承此類

Ext.data.Record

Ext.data.Record就是一個設定了內部數據類型的對象,他是Ext.data.Store的最基本組成部分,若是把Ext.data.Store當作一張二維表,那麼它的每一行就對應一個Ext.data.Record實例

Ext.data.Record的主要功能是保存數據,使用Ext.data.Record時,一般都是由create()函數開始的

Ext.data.Store

Ext.data.Store是Ext中用來進行數據交換和數據交互的標準中間件,不管是表格仍是combobox,都是經過它實現數據讀取,類型轉化,排序分頁和搜索等功能,在Ext.data.Store中,有一個Ext.data.record 數組,全部數據都存放在這些Ext.data.record實例中,爲後面的修改和讀取操做作準備

每一個store最少須要兩個組件的支持,分別是proxy和reader,前者用於從某個途徑讀取原始數據,後者用於將原始數據轉換成record實例

4.5.2經常使用的proxy

proxy的做用是經過內存,http等不一樣的媒介獲取原始數據,而後將獲取的數據交給對應的讀取器進行處理

MemoryProxy

MemoryProxy只能從javascript對象得到數據,能夠直接把數組或者JSON和ＸＭＬ格式的數據交給他處理

HttpProxy

HttpProxy使用http協議,經過Ajax去後臺獲取數據,構造它時須要設置url:’###.jsp’參數,這裏的url能夠更換成任何一個合法的網址,這樣HttpProxy才知道去哪裏獲取數據,

ScriptTagProxy

ScriptTagProxy幾乎和HttpProxy用法同樣,可是它支持跨域

4.5.3經常使用的Reader

讀取器做用是將數組,json等個數的原始數據轉換成Ext所須要的通用數據類型

ArrayReader

從proxy中讀取的數據須要進行解析,這些數據轉換成record數組後才能提供給Ext.data.Store使用

arrayREder的做用是從而爲數組裏依次讀取數據,而後生成對應的record,默認狀況下按列順序讀取數組中的數據,不過也能夠考慮用mapping指定record與原始數組對應的列號,arryReader不支持分頁

JsonReader

處理json的讀取器,支持分頁,幾個重要的參數root,totalProperty,record

xmlReader

處理Xml的讀取器

ArrayStore=store+MemoryProxy+arrayReader

使用arrayStore只須要設置MemoryProxy的data和arrayReader的fields就能夠了

JsonStore=store+HttpProxy+JsonReader

4.5.4 Store傳參

數據格式:

[

{

id: 'children',

text: '系統管理',

children: [

{

text: '角色管理',

leaf: true

{

text: '部門管理',

leaf: true

{

text: '權限管理',

leaf: true

}

]

}

]

proxy : {

type : 'ajax',

url : content + "/statute/searchStatute.do",

reader : {

type : 'json',

root : 'children',

totalProperty : 'totalCount'//數據中全部記錄數

}

listeners : {

beforeload : {

fn : function(s) {

Ext.apply(s.proxy.extraParams, {

userid: ""

});

}

}}

4.6.窗口

4.6.1確認框

Ext.MessageBox.confirm('提示', '確認要退出嗎?', callBack);

function callBack(id) {

//alert('單擊的按鈕id是：'+id);

if(id=="yes"){

Ext.Msg.alert("提示","退出成功");

}

4.6.2提示框

Ext.Msg.alert()

5.佈局

5.1 fit佈局

它自動適應頁面大小,適應頁面大小變化,頁面變大表格變大,頁面變小表格也變小,缺點是每次只能使用一個子組件,

5.2 border佈局

它將整個佈局區域劃分了東西南北中五個部分,

5.3 accordion佈局

伸縮菜單,展開摺疊分組

5.4 card佈局

Card佈局：這種佈局用來管理多個子組件，而且在任什麼時候刻只能顯示一個子組件。這種佈局最經常使用的狀況是嚮導模式，也就是咱們所說的分佈提交。好比上一步,下一步

5.5 anchor佈局

anchor佈局將使組件固定於父容器的某一個位置，既能夠爲items中的每一個組件指定與整體佈局大小的差值,也能夠設置一個比例使子組件能夠根據總體自行計算自己的大小,即父容器容器的大小發生變化時，使用anchor佈局的組件會根據規定的規則從新渲染位置和大小,是一個比較靈活的佈局

5.6 absolute佈局

Absolute佈局繼承Ext.layout.container.Anchor佈局方式，並增長了X/Y配置選項對子組件進行定位，Absolute佈局的目的是爲了擴展布局的屬性，使得佈局更容易使用

5.7 form佈局

form佈局也是anchor的一個子類,是表單專用佈局,能夠在它裏面使用anchor設置寬和高的比例,但主要仍是佈局表單

5.8 column佈局

它將整個容器進行豎直切分的佈局方式,通常被稱爲列布局，這種佈局的目的是爲了建立一個多列的格式

5.9 table佈局

通常被border佈局和column佈局代替

5.10 HBox佈局

水平佈局,它能夠實現一行中排列多個組件的功能,實現組件的平行排列,column顯得過於複雜.

5.11 VBox佈局

豎直佈局,用法和HBox用法相似

6.實用工具

6.1Ext提供的經常使用函數

6.1.1 onReady()函數

這個方法是Ext的準備函數，也就是Ext相關的代碼都會在這個函數裏書寫，它比較相似於window的onload方法，可是注意其執行時機是在頁面的DOM對象加載完畢以後當即執行。

6.2.2 get()函數

用來獲取一個Ext元素,也就是類型爲Ext.Element的對象,Ext.Element類是對Ext對DOM的封裝,每一個Element對象都對應着HTML中的一個DOM元素,咱們能夠爲每個DOM建立一個對應的Element對象,並經過Element對象中的函數實現Dom的指定操做,例如可使用hide()函數隱藏元素get函數是Ext.Element.get的簡寫形式,參數能夠是DOM節點的id,也能夠是一個element,或者是一個DOM節點對象

6.3.3 getCmp()函數

該函數用來得到一個Ext組件,也就是已經在頁面中被初始化的Component或者其子類的對象,getCmp()函數能夠根據指定的id得到對應的Ext.Component,實際上Ext.getCmp()是對Ext.ComponentMgr.get()的簡寫形式,Ext每一個組件都會註冊到ComponentMgr中,只要獲得他的id,就能夠獲得對應的組件

6.4.4 getDom()函數

該函數能夠得到文檔中的Dom節點,他只包含一個參數,該參數能夠是Dom節點的id,Dom節點的對象,或者Dom節點對應的Ext元素,Ext.getDom()能夠看作是Ext.get().dom的等同形式,

6.5.5 getBody()函數

該函數直接獲取文檔中與document.body這個Dom節點對應的Ext元素,實際上就是把document.body對象封裝成Ext元素對象並做爲結果返回,沒有參數

6.6.6 getDoc()函數

getDoc能夠將當前HTML文檔對象(也就是document對象)封裝成Ext的element對象並返回,沒有參數,

6.7.7 encode()函數與decode()函數

encode()和decode()函數是專門用來對json數據進行編碼和解碼的函數,

encode()函數的做用是對對想,數組,或者其餘值進行編碼,將對象轉換爲json字符串的形式,目的是把javascript中的對象經過HTTP協議發送到後臺服務器並進行相應的處理,由於Http協議只能發送字符串形式的參數,沒法將javascript中的對象直接傳遞到後臺,http只能發送iso-8859-1編碼的字符,像中文這種沒法使用iso-8859-1編碼的字符,還須要先轉換爲iso8859-1編碼格式才能經過http傳輸,

Ext.decode()函數的做用是將字符串解析爲JSON對象,在ajax應用中,咱們常常讓服務器返回json數據,因爲json數據是字符串,因此在程序中須要先把它解析成javascript對象,咱們利用XmlHttpRequest對象responseText或者responseXML屬性得到服務器返回的數據,利用decode進行json轉換爲javascript對象的操做.

6.8.8 apply()函數與applyIf()函數

Ext.apply()函數的做用是將一個對象中全部屬性都複製到另外一個對象中,applyIf()的做用與apply的做用相似,區別在於若是某個屬性在目標對象中已經存在,則不會覆蓋原屬性

Ext.apply(屬性接受者,屬性提供者)

6.9.9 namespace()函數

該函數的做用是將可以傳入的參數轉換爲對象,使用該方法的主要目的是區分名稱相同的類,這與java中package的做用相似

6.10.Ext.each()函數

當須要對數組中每一個元素進行同一種操做時,能夠利用each()函數,它會迭代循環數組,將每一個元素傳入預先定義的回調函數中進行處理

6.11 Ext之DOM

6.11.1 Ext.Element（幾乎對DOM的一切進行了完全封裝）能夠查詢Ext.dom.Element

6.11.2 EXt.DomHelper（操控UI界面的工具類）

Element這個類，無疑是很是強大的，裏面提供了豐富的方法供咱們使用，可是Ext爲了更加的方便咱們去操做DOM元素，特提供了DomHelper這個輔助的工具類。下面是DomHelper提供的幾個經常使用的函數

DomHelper.append()函數會將生成的節點放到指定節點的最後邊

DomHelper.insertBefore()函數會將新生成的節點插入指定節點的前面

DomHelper..insertAfter()函數會將新生成的節點插入指點節點的後邊

DomHelper.overwrite()會替換指定節點的insertHTML內容

DomHelper.applyStyles()爲指定的DOM元素設置指定的css樣式

DomHelper.createTemplate()能夠建立一個模板,具體參閱Api

6.11.3 Ext.DomQuery（用來進行DOM節點查詢）參閱Ext.dom.Query

下面是此方法的詳細使用規則：

基本元素選擇器 id選擇器css的類選擇器標籤選擇器（簡單選擇器）

屬性選擇器

僞類選擇器（也能夠說是至關於JQ過濾選擇器）

Ext.query基本使用形式：

Ext.query('span') 返回整個文檔的span標籤

Ext.query('span' , 'root') 根據跟節點進行查詢

Ext.query('#id') 根據id進行查詢，但返回數組

Ext.query('.class') 根據樣式進行查詢，返回數組

Ext.query('div span') 根據標籤進行包含選擇器過濾

Ext.query('*') 匹配全部元素

Ext.query('input[value*=val]') 進行一個屬性的選擇匹配

Ext.query('E>F') 進行一個層次查找父節點爲E的F節點

7.代碼積累

7.1方式

1.樹形菜單的幾種切換方式

1.centerPanel.body.update('<iframe id="workspace" src=’’ scrolling="no" frameborder="0" width="100%" height="100%"></iframe>')

2.var mainPanel =Ext.getCmp('main');

mainPanel.removeAll();

mainPanel.add(Ext.create("Forestry.app.systemManage.UserManagement",""));

3.center.getStore().load({

url:content+"/statute/searchStatuteByTree.do",

params:{

scope:1,

statuteProperty:type,

}

});獲得樹的根節點

treePanel.getRootNode()或者treePanel.store.getRootNode()

2.表格的選擇模式

var gsm = 表格名稱.getSelectionModel(); //選擇模式

var rows = gsm.getSelection();

if(rows.length ==1){

var id = rows[0].get('statuteId');

}else{

alert("請選擇一條數據！");

}

7.2其餘

define:定義一個類或覆蓋。

create實例化一個類,建立類對象,

extend繼承一個類

Ext系統基礎架構我把他分爲了6部分：

第一：類的建立define、類的實例化create，這其中根據你的配置通過了複雜的處理。

首先，全部的用define建立的類都通過這個流程：用classname處理器解析你定義的類名，而後通過loader處理器實現動態加載功能，而後走extend處理器，默認繼承自Ext.Base，這是一個根基類。若是你寫了extend這個配置，那麼就繼承你配置的類。這三個處理器是必須走的！！

而後根據咱們的配置去走其餘的處理器：期間通過statics、inheritableStatics、config、mixins、xtyle、alias、singleton、alternateClassName、use這些處理器，最後調用Ext.ClassManger把當前定義的類交給Ext管理起來，方便咱們使用。