If you have rendered an image or button in column of the grid panel and you want to open a pop up in the form of extjs window onclick of it.
The window contains an input text area which will allow the user to fill the data.
This text needs to be saved for the field associated with that column.
The following is the code which demonstrates the above mentioned description.
{header: "header", width:110, dataIndex: 'dataField',
xtype:'actioncolumn',
items: [{
icon:'<image path>',
style: {
marginLeft: '5px'
},
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var descText = rec.get('dataField');
openPopup(descText,rowIndex,rec);
}
}]
},
/*
** Open Window with text area
*/
function openPopup(description,rowInd,record){
var win = new Ext.Window({
modal : true,
height : 250,
width : 260,
plain : true,
border : false,
resizable : false,
maximizable : false,
draggable : true,
closable : true,
closeAction : 'destroy',
title : 'Title',
autoScroll : true,
buttonAlign : 'center',
items: [{
xtype: 'textarea',
id : 'textAreaId',
value: description,
name: 'testing',
height: 184,
width: 248
}],
buttons: [{
text : 'Submit',
onClick : function () {
// SAVE ACTION
try{
record.set('<reqd field from store>',Ext.getCmp('textAreaId').getValue());
win.destroy();
}catch(e){
win.destroy();
}
}
}]
}).show();
}
The window contains an input text area which will allow the user to fill the data.
This text needs to be saved for the field associated with that column.
The following is the code which demonstrates the above mentioned description.
{header: "header", width:110, dataIndex: 'dataField',
xtype:'actioncolumn',
items: [{
icon:'<image path>',
style: {
marginLeft: '5px'
},
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var descText = rec.get('dataField');
openPopup(descText,rowIndex,rec);
}
}]
},
/*
** Open Window with text area
*/
function openPopup(description,rowInd,record){
var win = new Ext.Window({
modal : true,
height : 250,
width : 260,
plain : true,
border : false,
resizable : false,
maximizable : false,
draggable : true,
closable : true,
closeAction : 'destroy',
title : 'Title',
autoScroll : true,
buttonAlign : 'center',
items: [{
xtype: 'textarea',
id : 'textAreaId',
value: description,
name: 'testing',
height: 184,
width: 248
}],
buttons: [{
text : 'Submit',
onClick : function () {
// SAVE ACTION
try{
record.set('<reqd field from store>',Ext.getCmp('textAreaId').getValue());
win.destroy();
}catch(e){
win.destroy();
}
}
}]
}).show();
}
Hi Sandeesh, You post was very helpful to me as I need to do something similar. However, I need a form to pop up when I click on the 'Edit' icon of the actioncolumn. The form that pops up should load the data from the record, allow the user to edit it and when th 'Save' button is clicked show save the data. The grid should then automatically be updated with the edited record. Any tips on how to go about this?
ReplyDeleteHi anita,
ReplyDeleteFirstly, you can render a page in the ext window (for the form that u mentioned).This can be achieved by using the html property of window.U can open the form in an iframe here.
Secondly, how to pass the existing grid data for the edited record on this page? If the parameters are less pass it through url as parameters.
On save btn click(which is on this editable form) save the grid record using record.set('dataIndex')
You might have to use many Javascript variables here.
Hope this helps :)
Thanks Sandeesh. But how do I render a page in the ext window? I am rather new to Ext JS.
ReplyDeletehtml: ''
ReplyDeletePlease use proper tags. This editor isnt allowing me to enter them
It doesnt allow html text here..
DeleteWhat is ur mail id?
anita dot jena at gmail dot com
ReplyDelete