PDA

View Full Version : Editable Row while add new row in Grid



smruti_patra
1 Jul 2008, 4:40 AM
Hi,
I am using the non-editable grid with two button save and add record.

I want when user click on the Add record button. a new record will enter with some column in editable cell.

Please let me know if anybody has any idea.

Thanks in advance.

I am attaching the code for reference.



var dropDownGridStore = new Ext.data.JsonStore({
root: 'dropDownNode',
fields: dropDownGridFields,
url: 'getDropDownData.action',
listeners:{
'loadexception': function(){
Ext.MessageBox.show({
title: 'Error',
msg: 'Error in loading data.',
buttons: Ext.Msg.OK,
closable:false,
animEl: 'elId',
icon: Ext.MessageBox.ERROR
});
}}
});

var newRec = new data({
dropDownValueId:'0',
enable:'',
inUse:'',
dropDownValues:'',
lastChange:''
});

var dropDownGridFields = [
{name: 'dropDownValueId',type:'string'},
{name: 'enable',type:'bool'},
{name: 'inUse'},
{name: 'dropDownValues',type:'string'},
{name: 'lastChange'}
];

//Column Model of Dropdown Grid
var cm = new Ext.grid.ColumnModel([
{header: "Drop Down Value Id", hidden: true,hideable: false, dataIndex: 'dropDownValueId'},
checkColumn,
{header: "In Use",sortable: false,dataIndex:'inUse',align: 'center',width: 50,renderer: renderInUse},
{header: "Dropdown Values",sortable: false,dataIndex:'dropDownValues',align: 'left',width: 200},
{header: "Last Change",sortable: false,width: 80, dataIndex: 'lastChange'
/*editor: new Ext.form.DateField({
fieldLabel: 'Select Date',
align: 'center',
name: 'date',
width:190,
format: 'd-M-Y',
minValue : new Date(),
allowBlank:true,
validateOnBlur: true

}) */
}
]);

cm.defaultSortable = true;

//"Enable" column in the Grid
var checkColumn = new Ext.grid.CheckColumn({
header: "Enable",
align: 'center',
dataIndex:'enable',
width:70
});


//Dropdown GridPanel.
var dropDownGrid = new Ext.grid.EditorGridPanel({
id: 'dropDownGrid',
width:420,
height:250,
cm: cm,
store: dropDownGridStore,
clicksToEdit:1,
stripeRows: true,
border: true,
plugins: checkColumn,
renderTo: 'dropDownListGridPanel',
tbar:[{
text: 'Show All',
tooltip: 'Show All record(s)',
id: 'showActive',
handler: function(){
if(this.getText() == 'Show Active'){
this.setText('Show All');
dropDownGridStore.clearFilter();
dropDownGridStore.filter('enable','true', true, false);
} else {
this.setText('Show Active');
dropDownGridStore.clearFilter();
}
}
},'->',{
text:'Add Record',
tooltip:'Add Record',
iconCls:'add',
handler: function(){
dropDownGrid.stopEditing();
dropDownGridStore.insert(0, newRec);
dropDownGrid.startEditing(0, 0);
dropDownGrid.topToolbar.items.get('save').disable();
}

//text:'Add',
//tooltip:'Save',
//iconCls:'add'
},
'-',{ text:'Save',
tooltip:'Save',
iconCls:'save',
id: 'save',
disabled :true,
handler: function(){
var jsonData = updateDB(records);
alert(jsonData)
Ext.Ajax.request({
url: 'saveDropDownData.action',
params: {jData:jsonData,codeType:dropDownName.getValue()},
waitMsg:'Saving...'
/*success: function(response, request){
var result = Ext.decode(response.responseText);
if(result.success=='true'){
sm.clearSelections();
//Cleraing the session after user saving the grid successfully
Ext.MessageBox.hide();
Ext.MessageBox.show({
title: 'Save',
msg: "The Modified Records have been Saved Successfully.",
buttons: Ext.Msg.OK,
closable:false,
animEl: 'elId',
icon: Ext.MessageBox.INFO
});
//Modified to store the node list to dropdown
dropDownGridStore.commitChanges();
dropDownGridStore.load();
} else {
Ext.MessageBox.show({
title: 'Error',
msg: "Error in saving the records." + result.msg,
buttons: Ext.Msg.OK,
closable:false,
animEl: 'elId',
icon: Ext.MessageBox.INFO
});
}*/
});
}
}
}
]
});
//Grid Code Ends--->

dropDownGridStore.on('update', function(thestore, record, operation){
dropDownGrid.topToolbar.items.get('save').enable();

});