Develop Reference

ExtJS 4 and grid size

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.

How to resize a pop up based on a loaded text in sencha?

This is my container where I want to load text, this code is inside a modal (pop up) I need that my pop up take the text height that was loaded.
Ext.define('Base.view.Notes', {
extend: 'Ext.Container',
xtype: 'notes',
config: {
modal: true,
scrollable: null,
itemId: 'generalNotesContainer',
width: '90%',
height: '90%',
margin: '2em 5% 5% 5%',
maxHeight: "90%",
minHeight: "90%",
floating: true,
centered: true,
layout: 'vbox',
items: [
//other item
{
xtype: 'container',
itemId: 'generalNotesContent',
padding: "10",
scrollable: true,
flex: true,
html: ''
}
]
}
});

Use Ext.window.MessageBox and dont give any configs like height,width.It will handle dimensions as per its content.Currently you have used Container as parent,replace it by messagebox.

I got to resize the pop up doing this:
Ext.define('Base.controller.WorkOrders', {
config: {
refs: {
woView: 'woview',
generalNotesContent: 'container#generalNotesContent',
},
control:{
woView:{
activate: 'woViewActivate'
}
}
},
woViewActivate: function(){
this.loadNotes();
},
loadNotes: function(){
var gNotesView = Ext.widget('notes');
Ext.Viewport.add(gNotesView);
var html = "<div>My html</div>"
this.getGeneralNotesContent().setHtml(html);
var NotesHtml = this.getGeneralNotesContent();
this.getGeneralNotesContent().setHeight(NotesHtml.innerHtmlElement.dom.scrollHeight);
//if it is needed extra height we can do this
//var extraHeight= 70;
//this.getGeneralNotesContent().setHeight(NotesHtml.innerHtmlElement.dom.scrollHeight+ extraHeight);
gNotesView.show();
}
this is how how looks my screen

how we can change the title alignment in a form

I m creating a form in layout.I want to align the title in centre. example: Registration.
Here is a simple code.
{
// xtype: 'panel' implied by default
title: 'Settings',
region:'east',
xtype: 'panel',
margins: '0 0 0 0',
width: 200,
collapsible: true,
split: true, // make collapsible
id: 'egion-container',
layout: 'fit'
}
i want that title "Settings" in center

you can simply wrap title inside a div tag and do whatever you want :
{
// xtype: 'panel' implied by default
title: '<div style="text-align:center;">Settings</div>',
region:'east',
xtype: 'panel',
margins: '0 0 0 0',
width: 200,
collapsible: true,
split: true, // make collapsible
id: 'egion-container',
layout: 'fit'
}

This is covered in the docs, there's a config called titleAlign.

Rows hidden in a grid JS EXT

I need to simply add a function in my grid that hide the rows when the user makes the first access. After that, by the icon of minimize/expand that already appears in my grid, the user can expand the group and see the rows. My code is that:
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
hideHeaders: true,
features: [groupingFeature],
columns: [
{text: "Questions",groupable: false, flex: 1, dataIndex: 'species', sortable: true}
],
width: 250,
height:260,
split: true,
region: 'west'
});
// define a template to use for the detail view
var bookTplMarkup = [
'{resposta}<br/>'
];
var bookTp1 = Ext.create('Ext.Template', bookTplMarkup);
Ext.create('Ext.Panel', {
renderTo: 'binding-example',
frame: true,
width: 720,
height: 570,
layout: 'border',
items: [
grid, {
id: 'detailPanel',
autoScroll: true,
region: 'center',
bodyPadding: 7,
bodyStyle: "background: #ffffff;",
html: 'Select one option'
}]
});
Where I add the nedded functions?

I guess the startCollapsed property of grouping feature is what your looking for:
{ ftype:'grouping', startCollapsed: true }

Dynamically switch views in ExtJS 4 grid panel

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