當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Ext JS 6学习文档-第6章-高级组件

發布時間：2025/3/15 javascript 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ext JS 6学习文档-第6章-高级组件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Ext JS 6學習文檔-第6章-高級組件

高級組件

本章涵蓋了高級組件，比如 tree 和 data view。它將為讀者呈現一個示例項目為圖片瀏覽器，它使用 tree 和 data view 組件。以下是本章將要討論的主題：

Trees
Data views
拖放
圖片瀏覽器 — 一個示例項目

本章的主要目標是探索 tree panel 和 data view 并且使用他們來構建一個示例項目圖片瀏覽器。圖片瀏覽器的最終展示效果如下圖。

這個項目中的最重要的組件是 tree panel 和 data view 。本項目中使用的組件和概念有：

tree panel
Data views
Model
store 和 rest 代理
容器和布局
引用
事件處理
過濾

?

除了 tree panel 和 data view 你已經在之前的章節中學習了所有的我們目前已用到的知識。所以在本章中，我們首先學習 tree panel 和 data view。

tree panel

這在 ExtJS 中是一個非常強大且常用的組件，你可以使用它構建任意類型的樹。一個 tree panel 是一個樹形結構的具有層次化數據的UI。

它和?Ext.grid.Panel?相似，?Ext.tree.Panel?也繼承自Ext.panel.Table?。所以，它也是支持多列的。

和 grid panel 不同的是，tree panel 需要一個 tree store (Ext.Store.TreeStore)。 tree store 具有一些 tree panel 的功能所需使用的特殊的屬性。

基本的 tree

我們來用一個簡單的例子演示。tree panel 至少需要一個 tree store 來提供數據。我們首先來創建 tree store 并硬編碼內置數據：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

var store = Ext.create('Ext.data.TreeStore', { root: {???? expanded: true,???? text: 'Continents', children: [{?????? text: 'Antarctica',?????? leaf: true }, { text: 'South America',?????? expanded: true,?????? children: [{???????? text: 'Brazil',???????? leaf: true }, {???????? text: 'Chile',???????? leaf: true }]???? }, {?????? text: 'Asia',?????? expanded: true,?????? children: [{???????? text: 'India',???????? leaf: true },{???????? text: 'China',???????? leaf: true }]???? }, {?????? text: 'Africa',?????? leaf: true }]?? } });

接著繼續創建?Ext.tree.Panel?：

1 2 3 4 5 6 7 8

Ext.create('Ext.tree.Panel', {?? title: 'Basic Tree',?? width: 200,?? height: 450,?? store: store, rootVisible: true,?? renderTo: Ext.getBody() });

下列截圖為以上代碼的輸出結果：

現在，我們創建一個高級點的樹，它是可以拖拽的。同時還需要用到 tree panel 和 tree store 的一些額外選項。拖拽只需要添加一個插件叫做treeviewdragdrop?。如以下代碼所示：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

var store = Ext.create('Ext.data.TreeStore', {?? root: {???? expanded: true,???? text: 'Continents', checked: false,???? children: [{?????? text: 'Antarctica',?????? leaf: true ,?????? checked: false },{ text: 'South America',?????? expanded: false,?????? checked: true,?????? children: [{???????? text: 'Chile',???????? leaf: true, checked: true }] },{?????? text: 'Asia',?????? expanded: true,?????? checked: true,?????? children: [{???????? text: 'India',???????? leaf: true,???????? checked: true?????? },{???????? text: 'China',???????? leaf: true,???????? checked: true }] },{?????? text: 'Africa',?????? leaf: true,?????? checked: true }] } }); Ext.create('Ext.tree.Panel', {?? title: 'Basic Tree',?? width: 200,?? height: 450,?? store: store,?? rootVisible: true,?? useArrows: true,?? lines: false,?? renderTo: Ext.getBody(),?? viewConfig: {???? plugins: {?????? ptype: 'treeviewdragdrop',?????? containerScroll: true } } });

?

如以下截圖所示的輸出。我把節點??South America?拖拽至??Asia?節點之下：

tree grid

你可以將多個列添加到 tree ，同時也能創建 tree grid 。默認 tree 包含一列，用的是 tree store 中節點的文本字段。

在這個 store 中，你可以看到在每個節點上除了節點名稱，還添加了一些其他的字段，這些字段用于在 tree panel 的列展示上。tree grid 的功能有例如列調整，排序，過濾等等，以下是代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

var store = Ext.create('Ext.data.TreeStore', {?? root: {???? expanded: true,???? text: 'Continents',???? children: [{?????? name: 'Antarctica',?????? population: 0,?????? area: 14,?????? leaf: true },{ name: 'South America',?????? population: 385 ,?????? area: 17.84,?????? expanded: false,?????? children: [{???????? name: 'Chile', population: 18,???????? area: 0.7,???????? leaf: true, }] },{?????? name: 'Asia',?????? expanded: true,?????? population: 4164,?????? area: 44.57,?????? children: [{???????? name: 'India',???????? leaf: true,???????? population: 1210,???????? area: 3.2 },{???????? name: 'China',???????? leaf: true,???????? population: 1357,???????? area: 9.5 }] },{?????? name: 'Africa',?????? leaf: true,?????? population: 1110,?????? area: 30 }] } });

以下的 grid 和上面的 tree panel 差不多一樣，只是添加為多列了，這個 xtyp?treecolumn?提供縮進和文件夾結構。像一個正常的 grid 一樣，tree grid 的列可以是任意類型的例如 checkbox，picture，button，URL 等等。

默認列大小是可調整的，如果需要你也可以固定它的寬度。看下面的代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

Ext.create('Ext.tree.Panel', {?? title: 'Tree Grid',?? width: 500,?? height: 450,?? store: store,?? rootVisible: false,?? useArrows: true, lines: false,?? scope: this,?? renderTo: Ext.getBody(),?? columns: [{???? xtype: 'treecolumn',???? text: 'Name',???? flex: 1,???? sortable: true,???? dataIndex: 'name' } , {???? text: 'Population (millons)',???? sortable: true,???? width: 150,???? dataIndex: 'population' } , {???? text: 'Area (millons km^2)',???? width: 150,???? sortable: true,???? dataIndex: 'area' }] });

這是上面?Tree Grid?的輸出結果：

?

Data views

Ext.view.View?(xtype:dataview) 一個現實數據的自定義模板。你需要提供自定義的模板和數據源（store）。模板應該使用?Ext.XTemplate?。

data view 提供了內置的事件，例如 click，double-click，mouseover，mouseout，等等。

首先我們創建一個簡單的 model 名為?Person?,還需要創建一個 store 并持有?Person?的列表，如以下代碼所示：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

Ext.define('Person', { extend : 'Ext.data.Model', fields : [ { name : 'name', type : 'string' }, { name : 'age', type : 'int' }, { name : 'gender', type : 'int' } ] }); Ext.create('Ext.data.Store', { id : 'employees', model : 'Person', data : [{ name : 'Mike', age : 22, gender : 0 },{ name : 'Woo', age : 32, gender : 1 },{ name : 'John', age : 33, gender : 1 },{ name : 'Kalai', age : 25, gender : 0 }] });

然后我們要來創建這個模板。下列模板使用 HTML 的 table 元素來呈現自定義格式的數據。

在模板中使用一個 model 的字段時，你可以使用花括號包括字段名的方式來使用它，例如：{fieldname}

XTemplate?支持有條件的展現和 if 語句，如以下代碼所示：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

var empTpl = new Ext.XTemplate( '<tpl for=".">', ?? '<div style="margin-bottom: 10px;" class="data-view">', ?? '<table style="width:100%">', ???? '<tr>', ?????? '<td style="font-size: 100px;width:100px;" rowspan="3"><i class="fa fa-user"></i></td>',???????? ?????? '<td>Name: {name}< /td>', ???? '</tr>', ???? ???? '<tr>', ?????? '<td>Age:{age}< /td>', ???? '</tr>', ???? ???? '<tr>', ?????? '<td>Gender: <tpl if="gender == 1">', ???????? '<i class="fa fa-mars"></i>', ???????? '<tpl else>', ???????? '<i class="fa fa-venus"></i>', ???????? '</tpl></td>', ???? '</tr></table> ', ?? '</div>', '</tpl>' ) ;

看上面的例子，我使用了 awesome 字體圖標的樣式。你需要添加下列代碼到你的 HTML 文件才行：

1	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font- awesome/4.3.0/css/font-awesome.min.css">

一下代碼創建了一個 data view，并且它指定了使用的數據源 store ，template 和?itemSelector?:

1 2 3 4 5 6 7 8 9 10 11

Ext.create('Ext.view.View', { store : Ext.getStore('employees'), tpl : empTpl, itemSelector : 'div.data-view', renderTo : Ext.getBody(), listeners : { itemclick : function(node, rec, item, index, e) { alert(rec.data.name); } } });

itemSelector?是一個必須的簡單 CSS 選擇器。這里 itemSelector 是應用于在 template 中的 HTML ，就是使用 data-view 類的 div 標簽，最終根據這個模板，你在 data view 中選擇的每一個 item ，就是這樣一個 div 標簽，設置了 itemSelector 屬性，data view 會知道如何處理這些節點，itemSelector 是用于將 DOM 節點映射到 records 。

你可以監聽的事件例如 click ，double-click ，等等，以上代碼已經添加了監聽，下列是輸出結果：

圖片瀏覽器 – 一個示例項目

慣例，我們將用一個示例項目來回顧本章所學，下面是示例項目的最終設計效果：

通過查看這個設計，你會看到我們使用的最重要的組件就是 tree panel 和 data view 。它們如何使用和一些概念已經在本章的前面部分提及。

我們看看, 項目的目錄結構。

完整的源碼在這里?https://github.com/ananddayalan/extjs-byexample-picture-explorer

下列視圖代碼是本項目的重要部分。這個視圖呈現了應用中大部分可視組件。它使用 tree panle 和 data view ：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

Ext.define('PE.view.pics.Pics', { extend : 'Ext.panel.Panel', /* Marks these are required classes to be to loaded before loading this view */ requires : [ 'PE.view.pics.PicsController' ], xtype : 'app-pics', controller : 'pics', items : [ { xtype : 'container', layout : 'hbox', cls : 'pics-list', items : [ { xtype : 'treepanel', width : 200, height : '100%', store : 'albums', border : true, useArrows : true, cls : 'tree', rootVisible : false, listeners : { itemdblclick : 'onNodeSelect' }, dockedItems : [ { xtype : 'toolbar', dock : 'top', ui : 'footer', items : [{ xtype : 'component', flex : 1 },{ xtype : 'button', text : 'Upload', cls : 'btn-blue' }] }] },{ xtype : 'dataview', reference : 'picsList', cls : 'pics-list-content', store : 'pics', tpl : [ ?????? '<tpl for=".">', ?????? '<div class="thumb"><img src="{url}" title=""></div>', ?????? '</tpl>' ], multiSelect : true, minHeight : 400, flex : 1, trackOver : true, overItemCls : 'x-item-over', itemSelector : 'div.thumb', emptyText : 'No images to display' }] }] });

控制器?ViewController?里處理了 tree panel 的?itemdblclick?事件，只顯示所選擇節點下的圖片。

還有一個 upload 按鈕的 click 事件，這里是未處理的。額，這是你的作業啦。看看下列代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Ext.define('PE.view.pics.PicsController', { extend : 'Ext.app.ViewController', alias : 'controller.pics', views : [ 'PE.view.pics.Pics' ], requires : [ 'PE.store.Pics', 'PE.store.Albums' ], onNodeSelect : function(node, rec, item, index, e){ var albums = []; albums.push(rec.id); rec.childNodes.forEach(function(item) { albums.push(item.id); }); Ext.getStore('pics').filter({ property : 'albumId', operator : 'in', value : albums }); } });

Model?和?Store?的代碼在這兒。

注意：當你不指定 model 的字段類型時，將會自動猜測類型。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

Ext.define('Pic', { extend : 'Ext.data.Model', fields : [ 'id', 'url', 'albumId' ] }); Ext.define('PE.store.Pics', { extend : 'Ext.data.Store', storeId : 'pics', model : 'Pic', proxy : { type : 'rest', url : 'pics', // URL that will load data with respect to start and limit params reader : { type : 'json' } } }); Ext.create('PE.store.Pics').load(); Ext.define('PE.store.Albums', { extend : 'Ext.data.TreeStore', storeId : 'albums', root : { expanded : true, children : [ { id : 100, text : ' California', expanded : true, children : [ { id : 600, text : ' Big Sur', leaf : true }, { id : 500, text : ' Yosemite', leaf : true }] }, { id : 400, text : ' Arizona', expanded : true, children : [ { id : 300, text : ' Horseshoe bend', leaf : true }] }, { id : 200, text : ' Home', leaf : true }, { id : 700, text : ' India', expanded : true, children : [ { id : 800, text : ' Ooty', leaf : true }, { id : 900, text : ' Chennai', leaf : true }, { id : 1000, text : ' Munnar', leaf : true } ] } ] } }); Ext.create('PE.store.Albums');

我是用的 Go 語言為此項目寫的 REST API 。完整可用的代碼在這里?https://github.com/ananddayalan/extjs-byexample-picture-explorer

圖片瀏覽器這個示例是一個非常簡單并用來學習 tree panel 和 data view 使用是很合適的。也可以通過添加更多功能來改進這個例子。例如如何通過拖拽將圖片從一個相冊移動到另一個相冊中。?我會留給你作為一個編碼的練習，但在這里，我給你簡要的概述一下拖拽功能，這將幫助你在此項目中添加拖拽功能。

?

拖拽

任意元素或組件都能支持拖拽。使用拖拽有三個重要的事情：

配置 item 為可拖拽的Configure the items as draggable
創建放置目標
完成放置目標

?

配置 item 為可拖拽的

想要拖拽一個 item ，你需要為每一個元素創建?Ext.dd.DD?實例。

查看下列代碼，通過創建?Ext.dd.DD?讓所有使用?pics?類的?div?元素成為可拖拽的：

1 2 3 4 5 6

// Configure the pics as draggable var pics = Ext.get('pics').select('div'); Ext.each(pics.elements, function(el) { var dd = Ext.create('Ext.dd.DD', el, ' picsDDGroup', { isTarget : false }); });

創建放置目標

使用?Ext.dd.DDTarget?創建放置容器。以下代碼為所有的使用?album?類的?div?元素創建放置目標：

1 2 3 4 5

var albums = Ext.get('album').select('div'); Ext.each(albums.elements, function(el) { var albumDDTarget = Ext.create('Ext.dd.DDTarget', el, 'picsDDGroup'); });

完成放置目標

當一個可拖拽項放置到一個放置容器，我們需要從這個 item 的源位置將它移動到目標位置。這通過覆蓋?DD?的?onDragDrop?方法來實現。看一看下列代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

因為?DD?元素已經是實例了，重寫的方法需要應用?Ext.apply(dd, overrides)?，如以下代碼所示：

1 2 3 4 5 6 7 8

var albums = Ext.get('album').select('div'); var pics = Ext.get('pics').select('div'); Ext.each(pics.elements, function(el) { var dd = Ext.create('Ext.dd.DD', el, ' picsDDGroup', { isTarget : false }); Ext.apply(dd, overrides); });

總結

在本章中，你學習到如何使用拖拽功能。我們也看了幾個高級組件：tree panel 和 data view。最后結合所學創建了一個示例項目。

轉載于:https://www.cnblogs.com/hq2008/p/5804656.html

總結

以上是生活随笔為你收集整理的Ext JS 6学习文档-第6章-高级组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。