PDA

View Full Version : Row editable grid view



new2extjs
5 Sep 2011, 2:04 PM
How to create editable Row as well as add or delete a row in a grid view?

mitchellsimoens
6 Sep 2011, 5:47 AM
Check out the examples. There is a plugin for the row editing and also examples of how to use the ActionColumn.

new2extjs
6 Sep 2011, 8:43 AM
Thanks Mitchell for the reply.

I had checked out this example :
http://docs.sencha.com/ext-js/4-0/#!/example/grid/row-editing.html
and want to create something like this but it seems to be in Ext JS 4.0. Is similar plugin also available in ver 3.1 too?

I tried in version 3.1 using the following code. It adds a new record but fails to edit. The error message that it gives is " grid.startEditing is not a function" . Could plz help me in resolving this?


var sm= new Ext.grid.RowSelectionModel({singleSelect:false});
var grid = new Ext.grid.GridPanel({
renderTo:Ext.getBody(),
store: store,
autoHeight: true,
title:'Editable grid',
frame:true,
height:300,
width:500,
clicksToEdit: 1,
columnLines: true,
sm: sm,

cm: new Ext.grid.ColumnModel({
columns:[

{ header: "Rec", dataIndex: "record_id" },
{ header: "col_1", dataIndex: "col_1"},
{ header: "col_2", dataIndex: "col_2"}
]
}),
viewConfig: {
forceFit:true
},

// inline buttons
buttons: [{text:'Save'},{text:'Cancel'}],
buttonAlign:'center',
// inline toolbars
tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add',
handler: function() {
var Record= grid.getStore().recordType;
var p = new Record({
record_id:0,
col_1:"1 ",
col_2:" 2"
});
grid.stopEditing();
var newRow = store.getCount();
p.data.isNew = true;
store.insert(newRow, p);
grid.startEditing(newRow, 0);

}
}]

});

mitchellsimoens
6 Sep 2011, 10:39 AM
Sorry... wrong framework version :">

http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/row-editor.html

new2extjs
7 Sep 2011, 9:21 AM
Hi,
Thanks for the link. I tried to implement it in simple form. However, no data was rendered with error message "this.config[a] is undefined "

script type="text/javascript" src="roweditor.js"></script>
<script type="text/javascript">
Ext.onReady(function(){

var data= [
[2297,2589,274],
[4922,7143,543642],
[5470,10063,59]
];

var store = new Ext.data.ArrayStore({
fields: [
{ name: "record_id", type: "int" },
{ name: "col_1", type: "int" },
{ name: "col_2", type: "string" }

],
data:data
});


var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});
var grid = new Ext.grid.GridPanel({
store: store,
width: 600,
region:'center',
margins: '0 5 5 5',
autoExpandColumn: 'name',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
iconCls: 'icon-user-add',
text: 'Add Employee',
handler: function(){
var Record= grid.getStore().recordType;
var e = new Record({
record_id:0,
col_1:"1 ",
col_2:" 2"
});
editor.stopEditing();
store.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}


}],
columns: [
new Ext.grid.RowNumberer(),
{
id: 'rec',
header: 'Record',
dataIndex: 'record_id',
width: 220,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}},
{
id: 'col1',
header: 'Clolumn 1',
dataIndex: 'col_1',
width: 220,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}

},
{
id: 'col2',
header: 'Clolumn 2',
dataIndex: 'col_2',
width: 220,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}

}



]
});

var layout = new Ext.Panel({
title: 'Record',
layout: 'border',
layoutConfig: {
columns: 1
},
width:600,
height: 600,
items: [ grid]
});
layout.render(Ext.getBody());

});

</script>

Can plz help me in finding out where did I go wrong?

Thanks in advance.

mitchellsimoens
7 Sep 2011, 9:54 AM
Tried using Ext.grid.EditorGridPanel?

new2extjs
8 Sep 2011, 11:07 PM
Hi Mitchell,
I tried but it didn't work :(
Is there any other changes that I have to make in my code?

Thanks in advance.