I want to construct simple register with the grid component with tittle bar and bottom bar constant (I mean title visible always on top and bottom bar visible always on the bottom of the screen):
-------------------------------------
| title bar |
|-----------------------------------|
| |
| pure grid, only rows |
| |
|-----------------------------------|
| bottom bar |
-------------------------------------
simple but I have a problem to set grid parameters. When I set "layout: 'fit'" bottom bar is not visible until I scroll down to the end of the screen. And in this place I can't see title bar.
I want to scroll only rows but app scrolls all the elements.
Be so kind as to prompt me how should I set parameters.
Something like:
Ext.define('MyApp.view.Ranking', {
extend: 'Ext.Panel',
...
requires: [
'Ext.grid.View',
'Ext.grid.column.Number'
],
resizable: true,
initComponent: function() {
var me = this,
upper_tag = {
xtype: 'toolbar',
height: 60,
items: [
{ xtype: 'label', ... }
'->',
{ xtype: 'label', ... }
]
},
lower_tag = {
xtype: 'toolbar',
height: 60,
items: [
{ xtype: 'label', ... }
{ xtype: 'button', ... }
'->',
{ xtype: 'button', ... }
{ xtype: 'button', ... }
]
};
Ext.applyIf(me, {
items: [
upper_tag,
{
xtype: 'gridpanel',
itemId: 'GRD_PW',
layout: 'fit',
height: 750,
store: 'PW_Store',
columns: { ... }
viewConfig: { ... }
},
lower_tag
]
});
me.callParent(arguments);
}
To be clear, this is the better explanation of my need:
1 row
2 row
3 row
4 row
-------------------------------------
| title bar |
|-----------------------------------|
| 5 row ^|
| 6 row ||
| 7 row pure grid, only rows || <-- this is browser screen
| 8 row ||
| 9 row ||
| 10 row v|
|-----------------------------------|
| bottom bar |
-------------------------------------
11 row
12 row
13 row
...
So that's no way to restrict number of rows on the screen and set pagination. It should use full hight of the browser screen. Sometimes 5 sometimee 20 rows.
Related
I have a grid and one of the columns prepresents a progress bar. I need to set a tooltip "Progress 4 of 10" over the progress bar. Initially it was like this:
columns: [
{
translatable: {
text: 'progress'
},
tdCls: 'highlight',
xtype: 'widgetcolumn',
dataIndex: 'progress',
widget: {
cls: 'percentage-bar',
text: ' ',
align: 'center',
xtype: 'progressbar',
defaultListenerScope: true,
listeners: {
afterrender: function (bar) {
var tip = Ext.create('Ext.tip.ToolTip', {
target: bar,
html: Dict.translateAndReplace(
'step',
[
bar.getWidgetRecord().get('current_step') === 0 ? 1 : bar.getWidgetRecord().get('current_step'),
bar.getWidgetRecord().get('total_steps')
],
'%d'
)
});
if (bar.getValue() === 1) {
bar.addCls('progress-complete')
}
},
},
},
width: 100
},
The issue is - it works only for a single page. When there are several pages or I apply filtering or sorting, event "afterrender" is not triggered. So it's triggred only then the grid is loaded, not the content. I need either to change to target element or use renderer. I tried to play arroung with renderer, but also stuck. How to get current cell container?
columns: [
{
translatable: {
text: 'progress'
},
tdCls: 'highlight',
xtype: 'widgetcolumn',
dataIndex: 'progress',
width: 100,
widget: {
cls: 'percentage-bar',
text: ' ',
align: 'center',
xtype: 'progressbar',
defaultListenerScope: true,
},
renderer: function (value, metaData, record) {
let HowToGetTheContainer = "?????";
var tip = Ext.create('Ext.tip.ToolTip', {
target: HowToGetTheContainer,
html: Dict.translateAndReplace(
'step',
[
record.get('current_step') === 0 ? 1 : record.get('current_step'),
record.get('total_steps')
],
'%d'
)
});
if (value === 1) {
Ext.down().addCls('progress-complete')
}
}
},
How to get that variable "HowToGetTheContainer"?
Within the renderer function, you can add a tooltip with this code (this works on other column types as well, not only on widgetcolumn):
metaData.tdAttr = Ext.String.format('data-qtip="{0}"', 'This is my tooltip here');
This was not a part of your question, but to customise the widget in the widgetcolumn, for example to add the progress-complete style, instead of using Ext.down(), you can use the onWidgetAttach function of the column:
columns: [{
xtype: 'widgetcolumn',
onWidgetAttach: function(col, widget, record) {
widget.setIconCls('xxx')
widget.addCls('xxx')
widget.setText('xxx');
// etc
},
}]
I'm trying to create an Ext.Window and i'm trying to organize it with pannels, I already have them created but I don't know how to give them a good extructure, I want a icon and two sentences, something like this:
-------------------------------
| | TEXT 1
| Icon | -----------------
| | TEXT 2
-------------------------------
I used the following code:
Panel1 = new Ext.Panel({
header: false,
frame: false,
border: false,
collapsible: false,
layout: 'column',
items [{
xtype: 'label',
text: "text 1",
style: 'font-size:12px; margin-left: 20px; margin-top: 30px'
}]
});
Panel2 = new Ext.Panel({
header: false,
frame: false,
border: false,
collapsible: false,
layout: 'column',
items [{
xtype: 'label',
text: "text 2",
style: 'font-size:12px; margin-left: 20px; margin-top: 30px'
}]
});
myNewWindow = nex Ext.Window({
width: 400,
height: 250,
items : [myIcon, Panel1, Panel2]
});
myNewWindow.show()
but it's being showed like this:
-------------
| A |
-------------
| B |
-------------
| C |
-------------
There is a need to dynamically change a view in ExtJS 4 grid panel.
By default grid is displayed as a table, but in my application I need a feature to switch grid from table view to tiles (or cards) view. Below I tried to represent how it should look like.
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|
====================================== ====================================
I have found almost perfect implementation of what I need, named Ext.ux.grid.ExplorerView. However, the extension was developed for ExtJS versions 2.x (3.x), and cannot be reused for ExtJS 4.
I use a grid which 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 have tried to update tpl property of the inner view component, but nothing seems to work.
Do you have any idea of how to make the dynamic switch between the views for a single grid panel?
The problem was easily solved with wonderful feature for grid panel named "Tileview" developed by Harald Hanek. The solution was specially developed for ExtJS 4.
The basic usage example is:
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("")
}
})]
});
To change the view we should just use setView() method, i.e.
grid.features[0].setView("tileIcons");
That's how the feature looks like in the real life.
Example of tile view:
Example of image view:
References:
https://github.com/harrydeluxe/extjs-ux/blob/master/ux/grid/feature/Tileview.js -- Tileview sources
https://github.com/harrydeluxe/extjs-ux -- All Harald's extensions with screenshots
http://www.sencha.com/forum/showthread.php?183023-Thumbnails-in-Grid-with-switching-between-views -- Feature discussion node on Sencha forum
http://harrydeluxe.github.com/extjs-ux/example/grid/tileview.html -- Demo
I wouldn't do it like that. Instead, have a grid and a view in a card layout, the view gives you the ability to have pretty much any markup per item, here's 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
}]
});
});
Is it possible to create a grid with several columns under one header?
+-----------------------+-----------------------+
| Column 1 | Column 2,3,4 |
+-----------------------+-----------------------+
| | | | |
+-----------------------+-----------------------+
| | | | |
+-----------------------+-----------------------+
| | | | |
+-----------------------------------------------+
tried column header grouping but there's no way to hide the sub columns. it'll look something like
+-----------------------+-----------------------+
| Column 1 | Column 2,3,4 |
+ +-----------------------+
| | | | |
+-----------------------+-----------------------+
| | | | |
+-----------------------+-----------------------+
| | | | |
+-----------------------------------------------+
This one requires an override. Here's what your column config should look like:
columns: [
{
text: "Column 1",
// width, other settings
},
{
text: "Columns 2, 3, 4",
// width is computed as sum of child columns
columns: [
{
text: "",
columnName: "Column 2", // custom config
width: // needed
},
{
text: "",
columnName: "Column 3",
width: // needed
},
{
text: "",
columnName: "Column 4",
width: // needed
}
]
}
]
Note the columnName configs that aren't part of the API. That's something I made up for this.
Setting text: "" hides the header for that column. Setting it for all three sub-columns hides the whole row, but leaves you with a thin, 2px tall line where the header would be. Not sure how to remove it. Might be able to CSS it away.
This will give you your desired layout. You can hide the sub-columns via the main column's menu. However, the menu won't look right because there's no text. That's where the columnName comes in.
Find the source for Ext.grid.header.Container#getColumnMenu. You need to create an override for just this function. Here's how it goes:
Ext.override(Ext.grid.header.Container, {
getColumnMenu: function(headerContainer) {
// stuff
for (; i < itemsLn; i++) {
item = items[i];
menuItem = Ext.create("Ext.menu.CheckItem", {
text: item.columnName || item.text // <--- IMPORTANT LINE
// rest of the function is the same
}
});
This will pick up your columnName config if it exists without affecting existing columns that don't use it. Now when you click on the header trigger for your multi-column, you'll get a nested option your sub-columns. If you want to get fancy, you should be able to flatten the hide options through some more overrides, but I'll leave that up to you.
Note: This was all tested on Ext JS 4.0.7. There were some big changes to the header container code in the 4.1 release candidates and I can't guarantee this will work the same way.
Just add style property on your sub-header columns config like this:
columns: [{
header: 'Header',
defaults: {
style: { display: 'none !important' } <--here is the magic
},
items: [{
header: '',
dataIndex: ''
},{
header: '',
dataIndex: ''
}]
}]
I want toolbar to take only nessasary \ auto size.. how can i do that?
MyViewportUi = Ext.extend(Ext.Viewport, {
layout: 'fit',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'My Panel',
layout: 'vbox',
tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'MyButton 1'
},
{
xtype: 'button',
text: 'MyButton 2'
}
]
}
}
];
MyViewportUi.superclass.initComponent.call(this);
}
});
Because a toolbar is just that, a bar, it will expand to fill all available space. Buttons placed inside a toolbar will occupy as much space as they need, but the toolbar will still expand to fill the maximum width possible.
The Ext.Toolbar has a property called autoWidth, but this will only cause the toolbar to use the css width: auto property. This is not perfect, but it's probably your best bet.