When I'm adding items to the grid's store and grid is not visible at that moment then grid is not populated with items. Is there any fix or workaround for this?
Here is the code (switch to "tab1", click button, switch back to "tab2" — grid is empty):
var tbar = {
items: [{
text: 'add some lines',
handler: function() {
Ext.getCmp('grid-panel').store.loadData([[1, 'aaaaa'], [2, 'bbbbb']]);
}
}]
};
Ext.onReady(function() {
var p = new Ext.TabPanel({
renderTo: 'panel-div',
width: 500,
height: 350,
title: '123123',
activeItem: 1,
items: [{
title: 'tab1',
tbar: tbar
},{
title: 'tab2',
layout: 'fit',
tbar: tbar,
items: {
xtype: 'grid',
hideHeaders: true,
id: 'grid-panel',
autoExpandColumn: 'text',
columns: [{id: 'text', header: 'Category', width: 1, dataIndex: 'text'}],
store: new Ext.data.ArrayStore({
fields: ['id', 'text']
})
}
}]
});
});
grid.getView().refresh() should reload the grid.
Related
I have a simple grid with two(add and remove) buttons as docked item in sencha cmd application. I want to delete the selected row.
I have grid defined in my view as
xtype:'app-main',
viewModel: {
type: 'main'
},
layout: 'absolute',
autoScroll : true,
resizable:true,
items: [
{
xtype: 'gridpanel',
x: 10,
y: 10,
autoScroll : true,
renderTo: document.body,
//height: 300,
width: 300,
title: 'Grid Panel',
store: 'peopleStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'Id'
},
{
xtype: 'gridcolumn',
dataIndex: 'title',
text: 'Title'
},
{
xtype: 'gridcolumn',
dataIndex: 'body',
text: 'Body'
}
],
dockedItems: [{
xtype: 'toolbar',
items:[
{
xtype: 'button',
x: 330,
y: 10,
scale: 'medium',
text: 'Add New Record',
handler: function() {
var UserStore = Ext.getStore('peopleStore');
UserStore.add({title: 'asd', body:'asdasd'});
UserStore.sync();
UserStore.load();
}
},
{
xtype: 'button',
scale: 'medium',
text: 'Reset Records',
handler: function() {
//delete code will go here
}
}]
}]}]
With this stackoverflow question extjs how to get a grid
I know code will be some thing like
grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
UserStore.remove(selection);
}
But can someone tell me how to get reference to "grid" ?
Grabs the first parent (relative to the button) that is a grid:
xtype: 'button',
...
handler: function(button) {
var grid = button.up('gridpanel');
console.log("my grid", grid);
}
Grabs the first parent (relative to the button) that is a grid and has itemId "myGrid" (to prevent ambiguity):
xtype: 'gridpanel',
itemId: 'myGrid',
...
xtype: 'button',
...
handler: function(button) {
var grid = button.up('gridpanel #myGrid');
console.log("myGrid", grid);
}
I would heavily suggest looking up selectors in ExtJS (for ExtJS <= 5) and references in ViewControllers (for ExtJS 5). There are pros/cons to both so I would recommend reading about both of them (though both do very similar things). My solution uses selectors.
Here are some resources:
http://docs.sencha.com/extjs/5.0/application_architecture/view_controllers.html
http://training.figleaf.com/tutorials/senchacomplete/chapter2/lesson5/2.cfm
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Query (complete selector syntax list)
so I have a view where I display a combobox and a grid that share a 'Roles' store. If you pick an option on the combobox, the grid will be filtered accordingly.
I am looking for a way to add an "All" option to the combobox that is selectable (so placeholder or value attributes don't work for me). I want to do this because I cannot add that option to the store without affecting the grid as well.
This is my code:
Ext.define("MODIFE.view.administration.Roles",{
extend: "Ext.panel.Panel",
xtype: "app-administration-roles",
controller: "administration-roles",
viewModel: {
type: "administration-users"
},
title: "Roles",
items:[
{
title: 'Búsqueda de Roles',
frame: true,
resizable: true,
xtype: 'form',
layout: 'column',
defaults: {
layout: 'form',
xtype: 'container',
defaultType: 'textfield',
style: 'width: 50%'
},
items: [{
items: [{
fieldLabel: 'Rol',
xtype: 'combobox',
store: 'Roles',
displayField: 'Description',
valueField: 'RoleId',
}]
}, {
items: [
{ fieldLabel: 'Estatus', xtype: 'combobox' },
]
}],
buttons: [
{ text: 'Nuevo' },
{ text: 'Buscar' }
]
},
{
layout: 'fit',
items: [{
xtype: 'grid',
id: 'rolesGrid',
title: 'Listado de Roles',
store: 'Roles',
columns: [
{ text: 'Rol', dataIndex: 'Description', flex: 2},
{ text: 'Estatus', dataIndex: 'Status', flex: 2},
]
}]
}]
});
Thanks in advance!
You could clone the store, then any alterations wont be reflected in the original store. (but it's messy, and may have problems with syncing if you have this enabled)
//clone store
var records = [],
me = this;
me.store.each(function(r){
records.push(r.copy());
});
var store2 = new Ext.data.Store({
recordType: me.store.recordType,
model: me.store.model
});
store2.add(records);
//add record
store2.add({ID:"-1", NAME: "-Please select-"});
In the following grid when you first popup the window, you can select items with the checkboxes.
But if you click OK to close the popup, and then click to launch it again, the checkboxes do not seem to work.
If you close the popup and launch it again, the checkboxes you just clicked on are now selected/deselected.
If I set closeAction to 'hide' on the window this issue goes away, but then don't I lose the value of the default closeAction of destroy?
In fact, not destroying the window and re-creating it every time messes up other stuff, so setting closeAction to hide does not work in my real app.
When closeAction is set to destroy, when a grid row checkbox is clicked, at least these three events are dispatched: itemclick, cellclick, select. But when closeAction is set to hide, the select event is not dispatched.
Ext.define('MyPopup', {
extend: 'Ext.window.Window',
alias: 'widget.myPopup',
width: 200,
height: 200,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'grid',
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: false,
mode: "MULTI"
}),
store: Ext.create('Ext.data.Store', {
fields: ['name'],
data: [
{name: 'one'},
{name: 'two'},
{name: 'three'}
]
}),
columns: [{
text: 'Name',
dataIndex: 'name'
}]
}],
dockedItems: [{
dock: 'bottom',
xtype: 'button',
width: '50',
text: 'OK',
handler: function(comp){
comp.up('window').close();
}
}]
});
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'center'
},
items: [{
xtype: 'button',
width: 50,
text: 'Click',
handler: function(){
Ext.create('MyPopup').show();
}
}]
}]
});
});
I was able to recreate your issue in a fiddle and found that if instead of creating the checkboxmodel object you define it. It fixes the issue.
Here is code demonstrating defining the selType and selModel configs:
Ext.define('MyPopup', {
extend: 'Ext.window.Window',
alias: 'widget.myPopup',
width: 200,
height: 200,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'grid',
selType:'checkboxmodel',
selModel: {
checkOnly: false,
mode: "MULTI"
},
store: Ext.create('Ext.data.Store', {
fields: ['name'],
data: [{
name: 'one'
}, {
name: 'two'
}, {
name: 'three'
}]
}),
columns: [{
text: 'Name',
dataIndex: 'name'
}]
}],
dockedItems: [{
dock: 'bottom',
xtype: 'button',
width: '50',
text: 'OK',
handler: function(comp) {
comp.up('window').close();
}
}]
});
And a working fiddle for demonstration.
I have a tabpanel. In the tab, i have a panel which includes a toolbar and 3 items: [ fieldset, a gridpanel, and another fieldset (or some buttons)]. I cannot get the gridpanel to show scroll bar. It only works if i set the maxheight/minheight of the gridpanel.
I also tried wrapping gridpanel inside a container. No luck.
In the example, i use fit layout. I tried "anchor" layout, and assigned anchor:'100% 50%' to gridpanel, hoping that it would resize when i resize browser. No luck.
Alternatively, if gridpanel is the ONLY item in the tab, autoscroll would work. So it appears when it's inside another panel, autoscroll/ resizing does not work.
Did I miss something here ?
Ext.application({
name: 'MyApp',
launch: function () {
// create the data store
var d = ['company', 100];
var myData = [];
for (var i = 0; i < 50; i++) {
myData[i] = d;
}
var store = Ext.create('Ext.data.ArrayStore', {
fields: [{
name: 'company'
}, {
name: 'price',
type: 'float'
}],
data: myData
});
Ext.create("Ext.container.Viewport", {
layout: {
type: 'border'
},
items: [{
xtype: 'toolbar',
id: 'headerbar',
region: 'north',
height: 30
}, {
xtype: 'toolbar',
id: 'menubar',
region: 'north',
height: 30
}, {
xtype: 'tabpanel',
itemId: 'maintabpanel',
activeTab: 0,
region: 'center',
plain: true,
margins: '5 5 5 5',
layout: 'fit',
items: [{
closable: false,
title: 'Tab',
margins: '0 0 0 0',
items: [{
xtype: 'panel',
title: 'Panel',
layout: 'fit',
tools: [{
type: 'help',
tooltip: 'Help'
}, {
type: 'close',
tooltip: 'Close'
}],
items: [{
xtype: 'fieldset',
title: 'Field Set',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Input'
}]
}, {
xtype: 'gridpanel',
autoScroll: true,
store: store,
columns: [{
text: 'Company',
flex: 1,
sortable: true,
dataIndex: 'company'
}, {
text: 'Price',
flex: 1,
sortable: true,
dataIndex: 'price'
}],
viewConfig: {
autoFit: true
}
}, {
xtype: 'fieldset',
title: 'Field Set 2',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Output'
}]
}]
}]
}]
}, {
xtype: 'box',
id: 'footer',
region: 'south',
html: '<h1> Copyright 2012</h1>',
height: 30
}]
});
}
});
Note that the parent panel of the gridpanel has fit layout, yet it has more than 1 item (the fieldset, the gridpanel, and another fieldset). A fit layout can only have 1 child.
Also, the parent of that fit panel (the one with closable : false - the tab) has no layout definition.
Here's a JsFiddle modified version of your code that works.
I have a GRID which works properly. Now I need to add this GRID to the first Tab Panel. How can I do that?
my code:
GRID.JS
Ext.create('Ext.grid.Panel', {
xtype:'grid',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
TAB.JS
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
xtype:'grid'
},
{
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody()
});
I have added the xtype:grid in GRID.JS and I am trying to access that Grid from TAB.JS in the 1st tab, but it is not getting displayed.
xtype: 'grid' - means create standard Ext.grid.Panel and add it here.
You have two options:
Create your grid and save it into variable.
var _grid = Ext.create('...', {...});
Ext.create('Ext.tab.Panel', {
...
items: [
_grid
]
});
Or, define your own class with new xtype
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygrid',
...
});
Ext.create('Ext.tab.Panel', {
...
items: [{
xtype: 'mygrid'
}]
});