[英]Dynamically switch views in ExtJS 4 grid panel
需要在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
屬性,但似乎沒有任何工作。
您是否知道如何在單個網格面板的視圖之間進行動態切換 ?
Harald Hanek開發的名為“ Tileview ”的網格面板的精彩功能很容易解決了這個問題。 該解決方案專為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("...");">',
'</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");
這就是這個特征在現實生活中的樣子。
參考文獻:
我不會那樣做。 相反,在卡片布局中有一個網格和一個視圖,該視圖使您能夠為每個項目提供幾乎任何標記,這是一個簡單的示例:
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
}]
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.