[Ext JS 6 By Example 翻译] 第6章 - 高级组件

转载自：http://www.jeeboot.com/archives/1227.html

本章涵盖了高级组件，比如 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. var store = Ext.create('Ext.data.TreeStore', {

2. root: {

3. expanded: true,

4. text: 'Continents',

5. children: [{

6. text: 'Antarctica',

7. leaf: true

8. }, {

9. text: 'South America',

10. expanded: true,

11. children: [{

12. text: 'Brazil',

13. leaf: true

14. }, {

15. text: 'Chile',

16. leaf: true

17. }]

18. }, {

19. text: 'Asia',

20. expanded: true,

21. children: [{

22. text: 'India',

23. leaf: true

24. },{

25. text: 'China',

26. leaf: true

27. }]

28. }, {

29. text: 'Africa',

30. leaf: true

31. }]

32. }

33. });

接着继续创建 Ext.tree.Panel ：

1. Ext.create('Ext.tree.Panel', {

2. title: 'Basic Tree',

3. width: 200,

4. height: 450,

5. store: store,

6. rootVisible: true,

7. renderTo: Ext.getBody()

8. });

 

下列截图为以上代码的输出结果：

现在，我们创建一个高级点的树，它是可以拖拽的。同时还需要用到 tree panel 和 tree store 的一些额外选项。拖拽只需要添加一个插件叫做 treeviewdragdrop 。如以下代码所示：

1. var store = Ext.create('Ext.data.TreeStore', {

2. root: {

3. expanded: true,

4. text: 'Continents',

5. checked: false,

6. children: [{

7. text: 'Antarctica',

8. leaf: true ,

9. checked: false

10. },{

11. text: 'South America',

12. expanded: false,

13. checked: true,

14. children: [{

15. text: 'Chile',

16. leaf: true,

17. checked: true

18. }]

19. },{

20. text: 'Asia',

21. expanded: true,

22. checked: true,

23. children: [{

24. text: 'India',

25. leaf: true,

26. checked: true

27. },{

28. text: 'China',

29. leaf: true,

30. checked: true

31. }]

32. },{

33. text: 'Africa',

34. leaf: true,

35. checked: true

36. }]

37. }

38. });

39.  

40. Ext.create('Ext.tree.Panel', {

41. title: 'Basic Tree',

42. width: 200,

43. height: 450,

44. store: store,

45. rootVisible: true,

46. useArrows: true,

47. lines: false,

48. renderTo: Ext.getBody(),

49. viewConfig: {

50. plugins: {

51. ptype: 'treeviewdragdrop',

52. containerScroll: true

53. }

54. }

55. });

如以下截图所示的输出。我把节点  South America 拖拽至  Asia 节点之下：

tree grid

你可以将多个列添加到 tree ，同时也能创建 tree grid 。默认 tree 包含一列，用的是 tree store 中节点的文本字段。

在这个 store 中，你可以看到在每个节点上除了节点名称，还添加了一些其他的字段，这些字段用于在 tree panel 的列展示上。tree grid 的功能有例如 列调整，排序，过滤等等，以下是代码：

1. var store = Ext.create('Ext.data.TreeStore', {

2. root: {

3. expanded: true,

4. text: 'Continents',

5. children: [{

6. name: 'Antarctica',

7. population: 0,

8. area: 14,

9. leaf: true

10. },{

11. name: 'South America',

12. population: 385 ,

13. area: 17.84,

14. expanded: false,

15. children: [{

16. name: 'Chile',

17. population: 18,

18. area: 0.7,

19. leaf: true,

20. }]

21. },{

22. name: 'Asia',

23. expanded: true,

24. population: 4164,

25. area: 44.57,

26. children: [{

27. name: 'India',

28. leaf: true,

29. population: 1210,

30. area: 3.2

31. },{

32. name: 'China',

33. leaf: true,

34. population: 1357,

35. area: 9.5

36. }]

37. },{

38. name: 'Africa',

39. leaf: true,

40. population: 1110,

41. area: 30

42. }]

43. }

44. });

以下的 grid 和上面的 tree panel 差不多一样，只是添加为多列了，这个 xtyp treecolumn 提供缩进和文件夹结构。像一个正常的 grid 一样，tree grid 的列可以是任意类型的例如 checkbox，picture，button，URL 等等。

默认列大小是可调整的，如果需要你也可以固定它的宽度。看下面的代码：

1. Ext.create('Ext.tree.Panel', {

2. title: 'Tree Grid',

3. width: 500,

4. height: 450,

5. store: store,

6. rootVisible: false,

7. useArrows: true,

8. lines: false,

9. scope: this,

10. renderTo: Ext.getBody(),

11. columns: [{

12. xtype: 'treecolumn',

13. text: 'Name',

14. flex: 1,

15. sortable: true,

16. dataIndex: 'name'

17. } , {

18. text: 'Population (millons)',

19. sortable: true,

20. width: 150,

21. dataIndex: 'population'

22. } , {

23. text: 'Area (millons km^2)',

24. width: 150,

25. sortable: true,

26. dataIndex: 'area'

27. }]

28. });

这是上面 Tree Grid 的输出结果：

 

Data views

Ext.view.View (xtype:dataview) 一个现实数据的自定义模板。你需要提供自定义的模板和数据源（store）。模板应该使用 Ext.XTemplate 。

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

首先我们创建一个简单的 model 名为 Person ,还需要创建一个 store 并持有 Person 的列表，如以下代码所示：

1. Ext.define('Person', {

2. extend : 'Ext.data.Model',

3. fields : [ {

4. name : 'name',

5. type : 'string'

6. }, {

7. name : 'age',

8. type : 'int'

9. }, {

10. name : 'gender',

11. type : 'int'

12. } ]

13. });

14.  

15. Ext.create('Ext.data.Store', {

16. id : 'employees',

17. model : 'Person',

18. data : [{

19. name : 'Mike',

20. age : 22,

21. gender : 0

22. },{

23. name : 'Woo',

24. age : 32,

25. gender : 1

26. },{

27. name : 'John',

28. age : 33,

29. gender : 1

30. },{

31. name : 'Kalai',

32. age : 25,

33. gender : 0

34. }]

35. });

然后我们要来创建这个模板。下列模板使用 HTML 的 table 元素来呈现自定义格式的数据。

在模板中使用一个 model 的字段时，你可以使用花括号包括字段名的方式来使用它，例如：{fieldname}

XTemplate 支持有条件的展现和 if 语句，如以下代码所示：

1. var empTpl = new Ext.XTemplate(

2. '<tpl for=".">',

3. '<div style="margin-bottom: 10px;" class="data-view">',

4. '<table style="width:100%">',

5. '<tr>',

6. '<td style="font-size: 100px;width:100px;" rowspan="3"><i class="fa fa-user"></i></td>',

7. '<td>Name: {name}< /td>',

8. '</tr>',

9.  

10. '<tr>',

11. '<td>Age:{age}< /td>',

12. '</tr>',

13.  

14. '<tr>',

15. '<td>Gender: <tpl if="gender == 1">',

16. '<i class="fa fa-mars"></i>',

17. '<tpl else>',

18. '<i class="fa fa-venus"></i>',

19. '</tpl></td>',

20. '</tr></table> ',

21. '</div>',

22. '</tpl>'

23. );

看上面的例子，我使用了 awesome 字体图标的样式。你需要添加下列代码到你的 HTML 文件才行：

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

一下代码创建了一个 data view，并且它指定了使用的数据源 store ，template 和 itemSelector :

1. Ext.create('Ext.view.View', {

2. store : Ext.getStore('employees'),

3. tpl : empTpl,

4. itemSelector : 'div.data-view',

5. renderTo : Ext.getBody(),

6. listeners : {

7. itemclick : function(node, rec, item, index, e) {

8. alert(rec.data.name);

9. }

10. }

11. });

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. Ext.define('PE.view.pics.Pics', {

2. extend : 'Ext.panel.Panel',

3. /* Marks these are required classes to be to loaded before loading this view */

4. requires : [ 'PE.view.pics.PicsController' ],

5. xtype : 'app-pics',

6. controller : 'pics',

7. items : [ {

8. xtype : 'container',

9. layout : 'hbox',

10. cls : 'pics-list',

11. items : [ {

12. xtype : 'treepanel',

13. width : 200,

14. height : '100%',

15. store : 'albums',

16. border : true,

17. useArrows : true,

18. cls : 'tree',

19. rootVisible : false,

20. listeners : {

21. itemdblclick : 'onNodeSelect'

22. },

23. dockedItems : [ {

24. xtype : 'toolbar',

25. dock : 'top',

26. ui : 'footer',

27. items : [{

28. xtype : 'component',

29. flex : 1

30. },{

31. xtype : 'button',

32. text : 'Upload',

33. cls : 'btn-blue'

34. }]

35. }]

36. },{

37. xtype : 'dataview',

38. reference : 'picsList',

39. cls : 'pics-list-content',

40. store : 'pics',

41. tpl : [

42. '<tpl for=".">',

43. '<div class="thumb"><img src="{url}" title=""></div>',

44. '</tpl>'

45. ],

46. multiSelect : true,

47. minHeight : 400,

48. flex : 1,

49. trackOver : true,

50. overItemCls : 'x-item-over',

51. itemSelector : 'div.thumb',

52. emptyText : 'No images to display'

53. }]

54. }]

55. });

控制器 ViewController 里处理了 tree panel 的 itemdblclick 事件，只显示所选择节点下的图片。

还有一个 upload 按钮的 click 事件，这里是未处理的。额，这是你的作业啦。看看下列代码：

1. Ext.define('PE.view.pics.PicsController', {

2. extend : 'Ext.app.ViewController',

3. alias : 'controller.pics',

4. views : [ 'PE.view.pics.Pics' ],

5. requires : [ 'PE.store.Pics', 'PE.store.Albums' ],

6. onNodeSelect : function(node, rec, item, index, e){

7. var albums = [];

8. albums.push(rec.id);

9. rec.childNodes.forEach(function(item) {

10. albums.push(item.id);

11. });

12.  

13. Ext.getStore('pics').filter({

14. property : 'albumId',

15. operator : 'in',

16. value : albums

17. });

18. }

19. });

Model 和 Store 的代码在这儿。

• 注意：当你不指定 model 的字段类型时，将会自动猜测类型。

1. Ext.define('Pic', {

2. extend : 'Ext.data.Model',

3. fields : [ 'id', 'url', 'albumId' ]

4. });

5.  

6. Ext.define('PE.store.Pics', {

7. extend : 'Ext.data.Store',

8. storeId : 'pics',

9. model : 'Pic',

10. proxy : {

11. type : 'rest',

12. url : 'pics', // URL that will load data with respect to start and limit params

13. reader : {

14. type : 'json'

15. }

16. }

17. });

18.  

19. Ext.create('PE.store.Pics').load();

20.  

21. Ext.define('PE.store.Albums', {

22. extend : 'Ext.data.TreeStore',

23. storeId : 'albums',

24. root : {

25. expanded : true,

26. children : [ {

27. id : 100,

28. text : ' California',

29. expanded : true,

30. children : [ {

31. id : 600,

32. text : ' Big Sur',

33. leaf : true

34. }, {

35. id : 500,

36. text : ' Yosemite',

37. leaf : true

38. }]

39. }, {

40. id : 400,

41. text : ' Arizona',

42. expanded : true,

43. children : [ {

44. id : 300,

45. text : ' Horseshoe bend',

46. leaf : true

47. }]

48. }, {

49. id : 200,

50. text : ' Home',

51. leaf : true

52. }, {

53. id : 700,

54. text : ' India',

55. expanded : true,

56. children : [ {

57. id : 800,

58. text : ' Ooty',

59. leaf : true

60. }, {

61. id : 900,

62. text : ' Chennai',

63. leaf : true

64. }, {

65. id : 1000,

66. text : ' Munnar',

67. leaf : true

68. } ]

69. } ]

70. }

71. });

72.  

73. 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. // Configure the pics as draggable var pics = Ext.get('pics').select('div');

2. Ext.each(pics.elements, function(el) {

3. var dd = Ext.create('Ext.dd.DD', el, ' picsDDGroup', {

4. isTarget : false

5. });

6. });

创建放置目标

使用 Ext.dd.DDTarget 创建放置容器。以下代码为所有的使用 album 类的 div 元素创建放置目标：

1. var albums = Ext.get('album').select('div');

2. Ext.each(albums.elements, function(el) {

3. var albumDDTarget = Ext.create('Ext.dd.DDTarget', el,

4. 'picsDDGroup');

5. });

完成放置目标

当一个可拖拽项放置到一个放置容器，我们需要从这个 item 的源位置将它移动到目标位置。这通过覆盖 DD 的 onDragDrop 方法来实现。看一看下列代码：

1. var overrides = {

2. onDragDrop : function(evtObj, targetElId) {

3. var dropEl = Ext.get(targetElId);

4. if (this.el.dom.parentNode.id != targetElId) {

5. dropEl.appendChild(this.el);

6. this.onDragOut(evtObj, targetElId);

7. this.el.dom.style.position = '';

8. this.el.dom.style.top = '';

9. this.el.dom.style.left = '';

10. } else {

11. this.onInvalidDrop();

12. }

13. },

14. onInvalidDrop : function() {

15. this.invalidDrop = true;

16. }

17. };

因为 DD 元素已经是实例了，重写的方法需要应用 Ext.apply(dd, overrides) ，如以下代码所示：

1. var albums = Ext.get('album').select('div');

2. var pics = Ext.get('pics').select('div');

3. Ext.each(pics.elements, function(el) {

4. var dd = Ext.create('Ext.dd.DD', el, ' picsDDGroup', {

5. isTarget : false

6. });

7. Ext.apply(dd, overrides);

8. });

 

总结

在本章中，你学习到如何使用拖拽功能。我们也看了几个高级组件：tree panel 和 data view。最后结合所学创建了一个示例项目。