PDA

View Full Version : How to create grid windows on the fly



amirak17
3 Mar 2014, 3:00 PM
I am new to ExtJS.


I was given this task to build a grid dynamically in an existing application in an ExtJS window based on data entered in a search form which I did mostly using JS knowledge.


Now the other task is that I also have to make the new ExtJS window showing the data dockable and if the user refills the form and searches again ExtJS has to build a new grid again in a new window generated by ExtJS.


Please let me know how to do that. As I am new to ExtJS kindly give a complete working example and I will try to put the pieces together in the application.


I can show the code which is divided in a number of files by the previous programmers and is quite messy.


Your help will be highly appreciated. Thanks in advance.

palakurthivishal
4 Mar 2014, 1:27 AM
Hello amirak17,
Here is a sample working snippet to start off with. I guess this gives you some idea what and how to achieve your task.

var customStore = Ext.create('Ext.data.Store', {
fields : ['fullName', 'id'],
data : []
})

Ext.create('Ext.form.Panel', {
bodyPadding: 10,
width: 300,
title: 'Pizza Order',
items: [
{
xtype : 'textfield',
fieldLabel : 'Full Name',
name : 'fullName'
},
{
xtype : 'numberfield',
fieldLabel : 'Id',
name : 'id'
},
{
xtype : 'button',
text : 'Submit',
handler: function(btn){
var form = btn.up('form');
customStore.add(form.getValues());
var win = Ext.create('Ext.window.Window',{

modal : true,
items : [{
xtype : 'grid',
title : 'Employee data',
height : 200,
width : 300,
columns : [{
text : 'FullName',
dataIndex : 'fullName',
flex : 3
}, {
text : 'Id',
dataIndex : 'id',
flex : 1
}],
store : customStore
}],
buttons : [{
text : 'close',
handler : function(btn){
btn.up('window').close();
}
}]
});
win.show();
}
}
],
renderTo: Ext.getBody()
});