在ExtJS 4网格面板中动态切换视图

Question

需要动态更改ExtJS 4网格面板中的视图。

默认情况下，网格显示为一个表，但在我的应用程序需要来切换从表视图电网瓷砖（或卡）视图。下面我试图表现它应该是什么样子。

Normal view:        Tiles view: 
======================================  ==================================== 
| Name  | Description   |  | Name  | Description   | 
======================================  ==================================== 
| Name 1  | First description |^|  | ------  ------  ------ |^| 
|----------------------------------|X|  | | O O | | @ @ | | > < | |X| 
| Name 2  | Second description |X|  | | \__/ | | \__/ | | \__/ | |X| 
|----------------------------------|X|  | ------  ------  ------ |X| 
| Name 3  | Third description | |  | Name 1  Name 2  Name 3 | | 
|----------------------------------| |  |        | | 
|   |      | |  | ------  ------  ------ | | 
| ...  | ...     |v|  | | o O | | - - | | * * | |v| 
======================================  ==================================== 

我发现几乎的什么，我需要完美的执行，命名Ext.ux.grid.ExplorerView。然而，扩展是为ExtJS的版本2.x（3.X）开发，并为ExtJS的4

我使用的是简单创建为一个网格不能重用：

Ext.create("Ext.grid.Panel", { 
    store: ..., 
    columns: [{ 
     header: "Name", 
     dataIndex: "name", 
    }, { 
     header: "Description", 
     dataIndex: "description" 
    }], 
    tbar: [ ... ], 
    bbar: [ ... ], 
    listeners: { ... }, 
    multiSelect: true, 
    viewConfig: { 
     stripeRows: true, 
     markDirty: false, 
     listeners: { ... } 
    } 
}); 

我有试图更新内部视图组件的tpl属性，但似乎没有任何工作。

对于单个网格面板，您是否有任何关于如何在视图之间动态切换的想法？

Answer 1

的问题很容易与美妙功能解决名为“Tileview”的网格面板由Harald Hanek开发。该解决方案专门为ExtJS 4开发。

基本用法的例子是：

var grid = Ext.create("Ext.grid.Panel", { 
    store: ..., 
    columns: [{ 
     header: "Name", 
     dataIndex: "name", 
    }, { 
     header: "Description", 
     dataIndex: "description" 
    }], 
    tbar: [ ... ], 
    bbar: [ ... ], 
    listeners: { ... }, 
    multiSelect: true, 
    viewConfig: { 
     stripeRows: true, 
     markDirty: false, 
     listeners: { ... } 
    }, 

    features: [Ext.create("Ext.ux.grid.feature.Tileview", { 
     getAdditionalData: function(data, index, record, orig) { 
      if (this.viewMode) { 
       return { 
        name: record.get("name").toLowerCase(), 
       }; 
      } 
      return {}; 
     }, 
     viewMode: 'tileIcons', // default view 
     viewTpls: { 
      tileIcons: [ 
       '<td class="{cls} ux-tileview-detailed-icon-row">', 
       '<table class="x-grid-row-table">', 
        '<tbody>', 
        '<tr>', 
         '<td class="x-grid-col x-grid-cell ux-tileview-icon" style="background-image: url(&quot;...&quot;);">', 
         '</td>', 
         '<td class="x-grid-col x-grid-cell">', 
          '<div class="x-grid-cell-inner">{name}</div>', 
         '</td>', 
        '</tr>', 
        '</tbody>', 
       '</table>', 
       '</td>' 
      ].join(""), 

      mediumIcons: [ ... ].join(""), 
      largeIcons: [ ... ].join("") 
     } 
    })] 
}); 

要改变的观点，我们应该只使用setView()方法，即

grid.features[0].setView("tileIcons"); 

---

这就是功能看起来像在现实生活中。平铺视图的

• 实施例：图像视图的

• 实施例：

---

参考文献：

• https://github.com/harrydeluxe/extjs-ux/blob/master/ux/grid/feature/Tileview.js - Tileview来源
• https://github.com/harrydeluxe/extjs-ux - 所有哈拉尔的扩展与截图
• http://www.sencha.com/forum/showthread.php?183023-Thumbnails-in-Grid-with-switching-between-views - 特征讨论节点上煎茶论坛
• http://harrydeluxe.github.com/extjs-ux/example/grid/tileview.html - 演示

Answer 2

我不会那样做。取而代之的是，有一个网格，并在卡片布局的视图，该视图为您提供了有几乎每个项目的任何标记的能力，这里有一个简单的例子：

Ext.define('Thing', { 
    extend: 'Ext.data.Model', 
    fields: ['name'] 
}); 

Ext.require('*'); 

Ext.onReady(function() { 

    var store = Ext.create('Ext.data.Store', { 
     model: Thing, 
     data: [{ 
      name: 'Name 1' 
     }, { 
      name: 'Name 2' 
     }, { 
      name: 'Name 3' 
     }] 
    }); 

    var gridActive = true; 

    var panel = Ext.create('Ext.panel.Panel', { 
     renderTo: document.body, 
     width: 400, 
     height: 400, 
     layout: 'card', 
     tbar: [{ 
      text: 'Switch', 
      handler: function(){ 
       var item; 
       if (gridActive) { 
        item = panel.items.last(); 
       } else { 
        item = panel.items.first(); 
       } 
       gridActive = !gridActive; 
       panel.getLayout().setActiveItem(item); 
      } 
     }], 
     items: [{ 
      border: false, 
      xtype: 'gridpanel', 
      columns: [{ 
       text: 'Name', 
       dataIndex: 'name' 
      }], 
      store: store 
     }, { 
      xtype: 'dataview', 
      itemTpl: '<b>{name}</b>', 
      store: store 
     }] 
    }); 

});