PDA

View Full Version : Getting Exception while adding grid



newusername
12 Feb 2014, 1:35 AM
Hi , I am writing a code to add a grid on fly when clicked on button but I am getting error over there , Please let me know what I am missing.

You can execute following code in fiddle. I am using Ext 4.2




Ext.onReady( function() {

var fundFields = [ 'nameF', 'emailF', 'phoneF' ];
var categoryFields = [ 'nameC', 'emailC', 'phoneC' ];

var fundData = {
'items' : [ {
'nameF' : 'Lisa',
"emailF" : "lisa@simpsons.com",
"phoneF" : "555-111-1224"
}, {
'nameF' : 'Bart',
"emailF" : "bart@simpsons.com",
"phoneF" : "555-222-1234"
}, {
'nameF' : 'Homer',
"emailF" : "home@simpsons.com",
"phoneF" : "555-222-1244"
}, {
'nameF' : 'Marge',
"emailF" : "marge@simpsons.com",
"phoneF" : "555-222-1254"
} ]
};
var categoryData = {
'items' : [ {
'nameC' : 'Lisa',
"emailC" : "lisa@simpsons.com",
"phoneC" : "555-111-1224"
}, {
'nameC' : 'Bart',
"emailC" : "bart@simpsons.com",
"phoneC" : "555-222-1234"
}, {
'nameC' : 'Homer',
"emailC" : "home@simpsons.com",
"phoneC" : "555-222-1244"
}, {
'nameC' : 'Marge',
"emailC" : "marge@simpsons.com",
"phoneC" : "555-222-1254"
} ]
};

var tempStore = {
//storeId : 'simpsonsStore',
fields : fundFields,
data : fundData,
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
};

var gridPanel = {
title : 'Simpsons',
store : tempStore,
columns : [ {
text : 'Name',
dataIndex : 'name'
}, {
text : 'Email',
dataIndex : 'email',
flex : 1
}, {
text : 'Phone',
dataIndex : 'phone'
} ],
height : 200,
width : 400,
xtype : 'grid'
};

Ext.create('Ext.Container', {

items : [ {
xtype : 'form',
id : 'myform',
width : 300,
height : 200,
items : [ {
xtype : 'fieldset',
items : [ {
fieldLabel : 'Start Date',
xtype : 'textfield'
}, {
fieldLabel : 'End Date',
xtype : 'textfield'
} ]

}
],
tbar : [ {
text : 'Refresh',
formBind : true,
handler : function(){
console.log('clicked');
Ext.getCmp('myform').add(gridPanel);
}
} ],
renderTo : Ext.getBody()
}

]

});

});

evant
12 Feb 2014, 2:01 AM
You need to use renderTo on the outermost container.

newusername
12 Feb 2014, 5:05 AM
Thanks for reply ,

I am running in another problem now,
I have two buttons , By clicking on these button I renders a grid , but columns and data may be different . I am doing it in following way . But it is not working properly.

Following is the code . You can simply copy and past it into EXT-JS fiddle to see output.



Ext.onReady( function() {

var fundFields = [ 'nameF', 'emailF', 'phoneF' ];
var categoryFields = [ 'nameC', 'emailC', 'phoneC' ];

var fundData = {
'items' : [ {
'nameF' : 'Lisa',
"emailF" : "lisa@simpsons.com",
"phoneF" : "555-111-1224"
}, {
'nameF' : 'Bart',
"emailF" : "bart@simpsons.com",
"phoneF" : "555-222-1234"
}, {
'nameF' : 'Homer',
"emailF" : "home@simpsons.com",
"phoneF" : "555-222-1244"
}]
};
var categoryData = {
'items' : [ {
'nameC' : 'Lisa',
"emailC" : "lisa@simpsons.com",
"phoneC" : "555-111-1224"
}, {
'nameC' : 'Bart',
"emailC" : "bart@simpsons.com",
"phoneC" : "555-222-1234"
}, {
'nameC' : 'Homer',
"emailC" : "home@simpsons.com",
"phoneC" : "555-222-1244"
}, {
'nameC' : 'Marge',
"emailC" : "marge@simpsons.com",
"phoneC" : "555-222-1254"
} ]
};

var tempStore = {
//storeId : 'simpsonsStore',
data : {},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
};

var fundColumns = [ { text: 'NameF', dataIndex: 'nameF' },
{ text: 'EmailF', dataIndex: 'emailF', flex: 1 },
{ text: 'PhoneF', dataIndex: 'phoneF' }];

var categoryColumns = [ { text: 'NameC', dataIndex: 'nameC' },
{ text: 'EmailC', dataIndex: 'emailC', flex: 1 },
{ text: 'PhoneC', dataIndex: 'phoneC' }];

var gridPanel = {
id : 'gridPanel',
title : 'Simpsons',
height : 200,
width : 400,
xtype : 'grid',
store : tempStore,
columns : fundColumns

};

Ext.create('Ext.form.Panel', {
id : 'myform',
width : 300,
height : 500,
margin: 20,
items : [ {

fieldLabel : 'Start Date',
xtype : 'textfield'
}, {
fieldLabel : 'End Date',
xtype : 'textfield'
}]
,
tbar : [ {
text : 'Refresh for Fund',
formBind : true,
handler : function() {
console.log('clicked');
var form = Ext.getCmp('myform');
if(Ext.getCmp('gridPanel'))
form.remove(Ext.getCmp('gridPanel'));
tempStore.fields = fundFields;
tempStore.data = fundData;
//tempStore.loadData(categoryData);
gridPanel.columns = fundColumns;
form.add(gridPanel);
//gridPanel.store.loadData(fundData);
/*
* gridPanel.reconfigure(tempStore,undefined);
* gridPanel.reconfigure(undefined,fundColumns);
*/
form.doLayout();
}
},
{
text : 'Refresh for Category',
formBind : true,
handler : function() {
console.log('clicked');
var form = Ext.getCmp('myform');
if(Ext.getCmp('gridPanel'))
form.remove(Ext.getCmp('gridPanel'));
tempStore.fields = categoryFields;
tempStore.data = categoryData;
gridPanel.columns = categoryColumns;
form.add(gridPanel);
//gridPanel.store.loadData(categoryData);
/*
* gridPanel.reconfigure(tempStore,undefined);
* gridPanel.reconfigure(undefined,fundColumns);
*/
form.doLayout();
}
}

],
renderTo : Ext.getBody()
});

});

evant
12 Feb 2014, 5:15 AM
There's an example here: http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#reconfigure-grid

newusername
12 Feb 2014, 5:25 AM
I will follow that example. But could you point out what is wrong in my code.

palakurthivishal
12 Feb 2014, 5:57 AM
Hello newusername,
I have modified your snippet to make it work, look at its execution.

Ext.onReady( function() {

var fundFields = [ 'nameF', 'emailF', 'phoneF' ];
var categoryFields = [ 'nameC', 'emailC', 'phoneC' ];


var fundData = {
'items' : [ {
'nameF' : 'Lisa',
"emailF" : "lisa@simpsons.com",
"phoneF" : "555-111-1224"
}, {
'nameF' : 'Bart',
"emailF" : "bart@simpsons.com",
"phoneF" : "555-222-1234"
}, {
'nameF' : 'Homer',
"emailF" : "home@simpsons.com",
"phoneF" : "555-222-1244"
}]
};
var categoryData = {
'items' : [ {
'nameC' : 'Lisa',
"emailC" : "lisa@simpsons.com",
"phoneC" : "555-111-1224"
}, {
'nameC' : 'Bart',
"emailC" : "bart@simpsons.com",
"phoneC" : "555-222-1234"
}, {
'nameC' : 'Homer',
"emailC" : "home@simpsons.com",
"phoneC" : "555-222-1244"
}, {
'nameC' : 'Marge',
"emailC" : "marge@simpsons.com",
"phoneC" : "555-222-1254"
} ]
};


var tempStore = Ext.create('Ext.data.Store',{
//storeId : 'simpsonsStore',
data : [],
fields : [],
proxy : {
type : 'memory',
reader : {
type : 'json'
}
}
});

var fundColumns = [ { text: 'NameF', dataIndex: 'nameF' },
{ text: 'EmailF', dataIndex: 'emailF', flex: 1 },
{ text: 'PhoneF', dataIndex: 'phoneF' }];

var categoryColumns = [ { text: 'NameC', dataIndex: 'nameC' },
{ text: 'EmailC', dataIndex: 'emailC', flex: 1 },
{ text: 'PhoneC', dataIndex: 'phoneC' }];


var gridPanel = {
id : 'gridPanel',
title : 'Simpsons',
height : 200,
width : 400,
xtype : 'grid',
store : tempStore,
columns : fundColumns

};


Ext.create('Ext.form.Panel', {
id : 'myform',
width : 300,
height : 500,
margin: 20,
items : [ {


fieldLabel : 'Start Date',
xtype : 'textfield'
}, {
fieldLabel : 'End Date',
xtype : 'textfield'
}]
,
tbar : [ {
text : 'Refresh for Fund',
formBind : true,
handler : function() {
console.log('clicked');
var form = Ext.getCmp('myform');
if(Ext.getCmp('gridPanel'))
form.remove(Ext.getCmp('gridPanel'));

tempStore.getProxy().model.setFields(fundFields);
tempStore.loadData(fundData.items);
//tempStore.loadData(categoryData);
gridPanel.columns = fundColumns;
form.add(gridPanel);
//gridPanel.store.loadData(fundData);
/*
* gridPanel.reconfigure(tempStore,undefined);
* gridPanel.reconfigure(undefined,fundColumns);
*/
form.doLayout();
}
},
{
text : 'Refresh for Category',
formBind : true,
handler : function() {
console.log('clicked');
var form = Ext.getCmp('myform');
if(Ext.getCmp('gridPanel'))
form.remove(Ext.getCmp('gridPanel'));
tempStore.getProxy().model.setFields(categoryFields);
tempStore.loadData(categoryData.items);
gridPanel.columns = categoryColumns;
form.add(gridPanel);
//gridPanel.store.loadData(categoryData);
/*
* gridPanel.reconfigure(tempStore,undefined);
* gridPanel.reconfigure(undefined,fundColumns);
*/
form.doLayout();
}
}

],
renderTo : Ext.getBody()
});


});

newusername
12 Feb 2014, 11:02 PM
Thank you so much . It is working fine now the way I expected.