All geek questions in one place

Dynamically switch views in ExtJS 4 grid

There is a need to dynamically change the appearance in the ExtJS 4 panel.

By default, the grid is displayed in the form of a table, but in my application I need a function to switch the grid from the table view to the tile (or map). Below I tried to imagine how it should look.

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

I found an almost perfect implementation of what I need with the name Ext.ux.grid.ExplorerView . However, the extension was developed for ExtJS version 2.x (3.x) and cannot be reused for ExtJS 4.

I use a grid that is created as simple as:

 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: { ... } } });

I tried to update the tpl property of the internal view component, but nothing works.

Do you have any idea on how to make a dynamic switch between views for one grid panel?

+4
source share
2 answers

The problem was easily resolved with the remarkable feature of the mesh panel called “ Tileview , developed by Harald Hanek . The solution was specifically designed for ExtJS 4 .

Basic usage example:

 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("") } })] });

To change the view, we should simply use the setView() method, i.e.

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

What a function looks like in real life.

  • An example of a tile view:

enter image description here

  • Image representation example:

enter image description here

Literature:

+5
source

I wouldn’t do that. Instead, you have a grid and a view in the map layout, the view gives you the opportunity to have almost any markup for each element, here is a simple example:

 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 }] }); });
+2
source

Source: https://habr.com/ru/post/1442536/

More articles:


All Articles