PDA

View Full Version : Help me How to add "Edit" and "Delete" function with this set of codes.



martinrey
12 Oct 2010, 5:48 PM
G'day Experts,

Please Help me on my problem.. I have a hard time of putting handler on this set of codes generated by the Ext Designer.. the Ext designer made the EditorGridPanel as xtype and that makes me confuse because majority of the examples available online uses variable for editor grid which they use like this:


InhabitantListingEditorGrid = new Ext.grid.EditorGridPanel({
id: 'InhabitantListingEditorGrid',
title: 'tramyer',
store: InhabitantDataStore,
cm: InhabitantColumnModel,
enableColLock:false,
clicksToEdit:2,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
bbar: new Ext.PagingToolbar({
pageSize: 11,
store: InhabitantDataStore,
displayInfo: true
}),
tbar: [
{
text: 'Add a Inhabitant',
tooltip: 'Great tooltips...',
iconCls:'add', // reference to our css
handler: displayFormWindow
}, '-', {
text: 'Delete selection',
handler: confirmDeleteInhabitant, // Confirm before deleting
iconCls:'remove'
}, '-', new Ext.app.SearchField({
store: InhabitantDataStore,
params: {start: 0, limit: 11},
width: 120,

})
]
});


the variable used in other part of the code for editting ang deleting records like this line

InhabitantListingEditorGrid.on('afteredit', saveTheInhabitant);

InhabitantListingEditorGrid.selModel.getSelections();


Here's the part of the code generated by Ext JS:


{

xtype: 'editorgrid',
id: 'editorGrid',
title: 'Records of Registered Barangay Inhabitants',
store: 'InhabitantsStore',
style: 'margin:0 auto;',
height: 211,
sm: cbGrid,
region: 'center',
loadMask: true,
border: true,
stripeRows: true,
trackMouseOver: true,
columnLines: true,
frame: true,

columns: [
cbGrid,
{
xtype: 'gridcolumn',
header: 'Last Name',
sortable: true,
width: 100,
dataIndex: 'lastname',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
header: 'First Name',
sortable: true,
width: 100,
dataIndex: 'firstname',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
header: 'Mobile No.',
sortable: true,
width: 100,
dataIndex: 'mobile_no',
editor: {
xtype: 'textfield'
}
}
],
tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Add',
icon: BASE_ICONS + 'user_add.png',
handler: addinhab

}
]
}
}

jarrednicholls
12 Oct 2010, 6:02 PM
Hi martinrey,

You can add a ref (http://dev.sencha.com/deploy/dev/docs/?class=Ext.Component&member=ref) to the grid by using the "autoRef" configuration option. This puts a reference to the grid on the top-level component that is exported with your project. For example, if you put an autoRef of "mygrid" on the grid, you can do something like:



MyViewport = Ext.extend(MyViewportUi, {
initComponent: function() {
MyViewport.superclass.initComponent.call(this);

this.mygrid.on('afteredit', saveTheRecord, this);
},

saveTheRecord: function() {
// save the record!
}
});

martinrey
12 Oct 2010, 6:24 PM
oh, thanks for your reply sir..

where exaclty i'm going to put the autoRef?
is it possible to edit the code or I need to use the Ext. Designer again?

you mean that the variable name is being replaced by this "this.mygrid?"

martinrey
12 Oct 2010, 7:45 PM
Hi,

I have a problem, everytime I include
ref: along with the xtype:editorgrid.

no output displayed in the monitor, I think there's an error occur..

may I ask what could be the proper declaration or syntax for that..

tnx..

cheers