Develop Reference

How to load widget grid columns dynamically on extJS grid

I have a grid, In that grid when I expand the row, there is another set of data to be displayed. I want those grid column to be dynamic. Based on my json data I want to push data in to column. But here When I am giving method, the debugger is not going there. Can anybody explain how to load dynamic column in extJS widget column.
Here is my code
Ext.define('myApp.view.base.grid.Window', {
extend: 'Ext.window.Window',
alias: 'widget.win',
title: 'my window',
height: 500,
width: 800,
layout: 'fit',
items: [{
xtype: 'grid',
columns: [{
text: 'Col 1',
dataIndex: 'col1',
flex: 1,
},{
text: 'col2',
dataIndex: 'col2',
flex: 1
}],
}],
plugins: [{
ptype: 'rowwidget',
widget: {
xtype: 'grid',
columns:[]//this.createColumn() // This columns i want to load dynamically.
}
}]
});

To add columns dynamically to the plugin, You have to push the columns config in your plugins column array.
grid.getPlugin().config.widget.columns.push({
text : 'Item',
dataIndex : 'item',
flex : 1
}, {
text : 'Description',
dataIndex : 'desc',
flex : 2
});
Created a fiddle for you here

Permanently hide column of Ext JS grid

ExtJS 5
I am using ExtJs 5 Grid. I have a button, when i click on it, age column will be hidden by using below line.
Ext.getCmp('grdSample').columnManager.columns[2].setVisible(false);
I am using listener - beforecellclick just to get the index of clicked column. But when i click on last column (last column = next to hidden column) it still show original index of column. Hidden column still getting their position in grid.
In CSS - If we use visibility: hidden then it hides the component or tag but still take space in web page but if use display: none, it hides as well as it doesn't take space in web page.
I want hidden column should not take space while getting indexing of current clicked column. (Without using CSS).
Can anyone help me to sort this out.
Ext.onReady(function () {
var studentStore = new Ext.data.JsonStore({
autoLoad: true,
pageSize: 10,
fields: ['Name', 'Age', 'Fee'],
data: {
items: [
{ "Name": 'Puneet', "Age": '25', "Fee": '1000' },
{ "Name": 'Ankit', "Age": '23', "Fee": '2000' },
{ "Name": 'Rahul', "Age": '24', "Fee": '3000' }
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
var window = new Ext.Window({
id: 'grdWindow',
width: 400,
title: 'Grid Samples',
items: [
{
xtype: 'panel',
layout: 'fit',
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'hide age column',
handler: function () {
Ext.getCmp('grdSample').columnManager.columns[2].setVisible(false);
}
},
{
xtype: 'grid',
id: 'grdSample',
height: 300,
selModel: Ext.create('Ext.selection.CheckboxModel',
{
}),
store: studentStore,
columns: [
{
header: 'Name',
dataIndex: 'Name',
},
{
header: 'Age',
dataIndex: 'Age',
},
{
header: 'Fee',
dataIndex: 'Fee'
}
],
listeners:{
beforecellclick: function (el, td, cellIndex, record, tr, rowIndex, e, eOpts) {
debugger;
}
},
dockedItems:
[
{
xtype: 'pagingtoolbar',
store:studentStore,
dock:'bottom',
displayInfo:true
}
]
}
]
}
]
});

Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "Name", flex : 1, dataIndex: 'Name'},
{text: "Age", flex : 1, dataIndex: 'Age', id : 'colAge'},
{text: "Fee", flex : 1, dataIndex: 'Fee'}
],
listeners : {
'cellclick' : function (me, td, cellIndex, record, tr, rowIndex, e, eOpts ) {
me.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex)}} // here you get the correct value :)
});
Here is working Fiddle : http://jsfiddle.net/Xpe9V/1623/

Perhaps an overkill, but you could create an array of your columns
var columns= [{dataIndex: 'Name', header: 'Name'}, { dataIndex:'Age', header:
'Age' }, { dataIndex:'Fee', header: 'Fee'}]
2) then remove a column from array by index using javascript splice method
and reconfigure your grid
myGrid.reconfigure(myStore, columns);

Could not load the grid with ajax post request

I need to get some data with making ajax request and load the grid (which is empty first) with this data but even i get the data i couldnt load it to the grid.
What i'm doing wrong?
Here is my grid :
var gridFlightForms = Ext.create('Ext.grid.Panel', {
id : 'gridFlightForms',
store : storeFlightFormList,
width : '100%',
height : 300,
collapsible : false,
multiSelect : false,
autoScroll : true,
disableSelection : false,
monitorWindowResize : true,
viewConfig : {
stripeRows : true,
enableTextSelection : true
},
title : 'Flight Forms ',
bbar : Ext.create('Ext.ux.statusbar.StatusBar', {
id : 'gridData-statusbar',
defaultText : '',
defaultIconCls : 'default-icon',
}),
verticalScroller : {
xtype : 'paginggridscroller',
},
columns : [ {
text : '<fmt:message key="common.number.text" />',
xtype : 'rownumberer',
width : 40,
sortable : false
}, {
text : 'Form Id',
menuDisabled : true,
dataIndex : 'formId',
width : 150,
}, {
text : 'Form no',
menuDisabled : true,
dataIndex : 'formNo',
width : 150,
}, {
text : 'Form Type',
menuDisabled : true,
dataIndex : 'formType',
width : 150,
}, {
text : 'Flight Id',
menuDisabled : true,
dataIndex : 'flightId',
width : 150,
}, {
text : 'Revision',
menuDisabled : true,
dataIndex : 'revision',
width : 150,
}, {
text : 'IsLiex',
menuDisabled : true,
dataIndex : 'isLiex',
width : 150,
}, {
text : 'IsPrimary',
menuDisabled : true,
dataIndex : 'isPrimary',
width : 150,
}, {
text : 'Step Number',
menuDisabled : true,
dataIndex : 'stepNumber',
width : 150,
} ]
});
and my store :
var storeFlightFormList = Ext.create('Ext.data.Store', {
model : flightListModelName,
autoLoad : false,
proxy : {
type : 'ajax',
actionMethods : {
read : 'POST'
},
reader : {
type : 'json',
root : 'data'
},
api : {
read : flightFormListUrl
}
},
listeners : {
load : function(store, records) {
}
}
});
and that part is making post and try to load data to grid. I think this part is wrong.
Actually i can see data in resp.data when i debug it, but i cant store it as i mentioned before.
postDataAsParamsINN(
{flightId : flightId},flightFormListUrl,function(resp) {
gridFlightForms.setLoading(true,true);
storeFlightFormList.loadRawData(resp.data,false);
});
Ext.getCmp('gridFlightForms').getStore().load();
I'm pretty new at extjs, thanks in advance.

I'm not quite sure what postDataAsParamsINN is supposed to be doing, you should not need to be loading the data in yourself.
This fiddle demonstrates a working grid that uses a JSON store.
Here is the code:
Ext.application({
name: 'Fiddle',
launch: function() {
var store = Ext.create('Ext.data.JsonStore', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'characters'
}
},
listeners: {
load: function() {
console.log(this);
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
}
});
Once you've bound your store to the grid it automatically fills the grid with whatever information is loaded into the store and refreshes when the store is updated.

extjs4 how to display field multiple times

I have an extjs form panel. Based on the value selected in the combo box, I need to display a fieldset multiple times. That is,display the field set once if value chosen is 1, twice if value chosen is 2.
The problem that I am facing is that, the field set is being displayed only once. Since, I am changing the title of the fieldset, I can tell more clearly that the fieldset being displayed is the one in the last iteration of the for loop.
However,I can see the log messages in the js console for all the iterations of the for loop which means that the loop is being executed properly.
Here is my code:
Ext.define('ELM.view.cl.Edit', {
extend : 'Ext.form.Panel',
alias : 'widget.cform',
addMode : false,
layout : 'fit',
autoShow : true,
initComponent : function() {
this.items = this.buildItems();
this.callParent(arguments);
},
buildItems : function() {
return [ {
xtype : 'form',
id : 'details',
items : [
{
xtype : 'fieldset',
columnWidth : 0.5,
title : 'Details',
items : [
{
fieldLabel : 'Number Of Scripts Required',
xtype : 'combo',
name : 'noOfScriptsRequired',
id : 'noOfScriptsRequired',
store : new Ext.data.SimpleStore({
fields : [ 'no', 'val' ],
data : [['1','1'],['2','2'],['3','3']]
}),
displayField : 'no',
valueField : 'val',
listeners : {
select : function(combo, value) {
var formpanel = Ext.widget('cform');
var sd = this.up('form').getComponent(
'scriptdetails');
for ( var i=1; i<=combo.getValue();i++){
console.log(i);
var title="Script details "+i;
sd.setTitle(title);
sd.show();
sd.hidden = false;
console.log(sd);
}
}
}
}, ]
}, {
xtype : 'fieldset',
id : 'scriptdetails',
columnWidth : '0.5',
hidden : true,
title : 'Script Details',
items : [ {
xtype : 'textfield',
fieldLabel : 'Script Name',
name : 'scriptName'
} ]
}
]
} ];
}
});
UPDATE: Here is the working code:
{
fieldLabel : 'Name :',
xtype : 'textfield',
name : 'name'
},{
fieldLabel : 'Number Of Scripts Required',
xtype : 'combo',
name : 'noOfScriptsRequired',
id : 'noOfScriptsRequired',
store : new Ext.data.SimpleStore({
fields : [ 'no', 'val' ],
data : [ [ '1', '1' ], [ '2', '2' ],[ '3', '3' ] ]
}),
displayField : 'no',
valueField : 'val',
listeners : {
select : function(combo, value) {
var dynamicPanel = Ext.getCmp("dynamicPanel");
var scriptField = {
xtype : 'fieldset',
items : [
{
xtype : 'textfield',
fieldLabel : 'Script Name',
name : 'scriptName'
},
{
xtype : 'textfield',
fieldLabel : 'Script Parameters',
name : 'scriptParameters'
} ]
};
dynamicPanel.removeAll(true);
for ( var i = 0; i < combo.getValue(); i++) {
var index = dynamicPanel.items.length;
var j = i + 1;
scriptField.title = "Script Details "+ j;
dynamicPanel.insert(index,scriptField);
dynamicPanel.doLayout();
}
}
}
Thanks in advance

You are using id:'scriptdetails' in fieldset. In web pages each component or element should have an unique id. If there are elements with same id then there will be problems in rendering the elements like single element is rendered with errors or element may not be rendered.
In your case as you have to repeat the field set, don't not use fixed id. Use a random generated id from server or use 'itemId' which ExtJS provides.
Refer: here and here
Update:
Working fiddle is here
Ext.onReady(function() {
var store = new Ext.data.ArrayStore({
id: 0,
fields: [
'myId',
'displayText'
],
data: [
[1, '1'],
[2, '2'],
[3, '3'],
]
});
var scriptField = {
xtype: 'fieldset',
columnWidth: '0.5',
title: 'Script Details',
items: [{
xtype: 'textfield',
fieldLabel: 'Script Name',
hiddenName: 'scriptName'
}]
};
var container = new Ext.Panel({
layout: 'hbox',
height: '700px',
items: [{
xtype: 'panel',
id: 'parentContainer',
height: '700px',
layout: 'form',
items: [{
xtype: 'combo',
editable: false,
triggerAction: 'all',
mode: 'local',
store: store,
valueField: 'myId',
displayField: 'displayText',
fieldLabel: 'Show Number of Items',
listeners: {
select: function(combo, value) {
var dynamicPanel = Ext.getCmp("dynamicPanel");
dynamicPanel.removeAll(true);
for (var i = 0; i < combo.getValue(); i++) {
scriptField.title = "Script Details " + i;
dynamicPanel.add(scriptField);
dynamicPanel.doLayout();
dynamicPanel.ownerCt.doLayout();
dynamicPanel.ownerCt.ownerCt.doLayout();
}
}
}
}, {
xtype: 'panel',
id: 'dynamicPanel',
items: []
}]
}]
});
container.render(Ext.getBody());
});

Your buildItems code is executed once, at the beginning. Afterwards, you never really add any more items. Which you would want to do using this function: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.container.AbstractContainer-method-add
If you want to add an item, you have to create a new one. You can't add the same item into a container twice. So you would have to create them on the fly: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext-method-create
And for this, you should use some defined "blueprint", where you define that it is a fieldset, contains a textfield, and so on: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext-method-define
A blueprint of an item should never contain an id. I would refer to all the items by using form.items[i], and omit the id entirely.
You still have one problem, though: Your items all contain a textfield by the same name. This won't work well with submit(). But that's another story entirely.

Sencha Store showing empty line on grid

This is probably an easy one to do with formatting, when I add a row to the grid it comes up blank
code to add the row:
var innerArray = Array(
{'ID':'aaa','Text':'aaa'}
);
searchCriteria.add(innerArray);
Code that makes the table
var searchCriteria = Ext.create('Ext.data.Store', {
// store configs
autoDestroy: true,
storeId: 'myStore',
// reader configs
idIndex: 0,
fields: [
'ID',
'Text'
]
});
Panel
var resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'Search Criteria',
layout: 'fit',
height: 400,
renderTo: Ext.getBody(),
layout: {
type: 'vbox', // Arrange child items vertically
align: 'stretch', // Each takes up full width
padding: 5
},
items: [{ // Results grid specified as a config object with an xtype of 'grid'
xtype: 'grid',
columns: [
{
header: 'ID'
},
{
header: 'Text'
}
], // One header just for show. There's no data,
store: searchCriteria,
flex: 1 // Use 1/3 of Container's height (hint to Box layout)
}]
});
Rows get added, but blank what am I doing wrong?

In your grid columns, add a dataIndex property:
columns: [{
header: 'ID',
dataIndex: 'ID'
},{
header: 'Text',
dataIndex: 'Text'
}
The dataIndex property is what tells the grid where to pull the information from in the stores model