PDA

View Full Version : [Resolved] Grid : adding a row with a button



etha
24 Jan 2008, 3:54 PM
Hi everybody,
I tried to modificate an example code : http://extjs.com/deploy/dev/examples/grid/totals.html (http://extjs.com/forum/../deploy/dev/examples/grid/totals.html)

I added a tbar with a button in order to add a row dynamicaly.
I found some code with an Handler function but I didn't success to add a row with them.
Could someone help me, or redirect me ?
Thanks a lot in advance :)

catacaustic
24 Jan 2008, 5:48 PM
I've got that working fine. It's not to hard to do it in a basic way. Here's a bit of a starting point.
var btn = new Ext.Button ({
text: "Add a new row",
handler: function () {
var rec = Ext.data.Record.Create ([
{name: "fieldname", mapping: "field_name"},
{name: "secondfield", mapping: "second_field"}
]);

this.add (new rec ({
fieldname: "Field value",
secondfield: "Second field value"
}));
},
scope: dataStoreName
});Just got to match the records config with the records that your store currently uses, add in any data you want (can also be no values there and the fields will default to 'undefined' values).

etha
25 Jan 2008, 12:38 AM
Thanks for your answer,
I'm surely not in the good way, but i didnt make it work.
i've modificate the bar with your code :


handler: function () {
var rec = Ext.data.Record.Create ([
{name: 'projectId', type: 'int'},
{name: 'project', type: 'string'},
{name: 'taskId', type: 'int'},
{name: 'description', type: 'string'},
{name: 'estimate', type: 'float'},
{name: 'id_dedit', type: 'int'},
{name: 'id_credit', type: 'int'},
{name: 'id_importance'},
{name: 'id_dossier'},
{name: 'id_couleur'},
{name: 'due', type: 'date', dateFormat:'d/m/Y'}
]);
this.add (new rec ({
}));
}
}
But that not work. Maybe it is because when i create the grid i've this following line :
var reader = new Ext.data.JsonReader({
because with the line
var rec = Ext.data.Record.Create ([
the debugger say that Ext.data.Record.Create is not a function
Thanks again for all

Condor
25 Jan 2008, 12:45 AM
Ext.data.Record.create (small c) creates a record class. You should create this class only once and use it in the JsonReader config (instead of fields) and in your add button code.

Secondly, you should specify values for EVERY field when adding a record (Ext doesn't work property if a field value is undefined).

etha
25 Jan 2008, 6:03 AM
Thanks for your answer!
So i understand what you say, and Ive modificate the code :

In the main code:


var rec = Ext.data.Record.create ([
{name: 'projectId', type: 'int'},
{name: 'project', type: 'string'},
{name: 'taskId', type: 'int'},
{name: 'description', type: 'string'},
{name: 'estimate', type: 'float'},
{name: 'id_dedit', type: 'int'},
{name: 'id_credit', type: 'int'},
{name: 'id_importance'},
{name: 'id_dossier'},
{name: 'id_couleur'},
{name: 'due', type: 'date', dateFormat:'d/m/Y'}
]);

var reader = new Ext.data.JsonReader({
idProperty:'taskId',
fields: rec
});
It display the grid, but when i want to add a row , i've the following error :
this.add is not a function
[php]
handler: function () {
this.add (new rec (
{projectId: 1, project: 'Compte Ch

Condor
25 Jan 2008, 6:05 AM
It doesn't know what 'this' is. You forgot to specify scope:dataStoreName.

etha
25 Jan 2008, 6:15 AM
hum okay, but where can i found DataStoreName ?

etha
25 Jan 2008, 6:24 AM
Hum okay but where can i found datastorename.
Because i don't understand what it is ?

Condor
25 Jan 2008, 6:28 AM
datastorename is the store of the grid.

etha
25 Jan 2008, 6:35 AM
So in my case, it would be : Ext.grid.dummyData, but it doesn't work:-|

Condor
25 Jan 2008, 6:38 AM
No, if you are still following the example it would be grid.getStore()

etha
25 Jan 2008, 6:46 AM
Im apologize to be so long to understand.
But now ive a error with scope:grid.getStore()
grid has no properties..

Condor
25 Jan 2008, 6:49 AM
grid is the gridpanel.

It's a little hard to guess what you are doing wrong.

Could you post some more of your code?

etha
25 Jan 2008, 6:53 AM
That's my entire code :
[PHP]

var total_credit=0;
var total_debit=0;

// autocompletion, onglets organisaation
Ext.onReady(function(){

Ext.QuickTips.init();

var xg = Ext.grid;
var rec = Ext.data.Record.create ([
{name: 'projectId', type: 'int'},
{name: 'project', type: 'string'},
{name: 'taskId', type: 'int'},
{name: 'description', type: 'string'},
{name: 'estimate', type: 'float'},
{name: 'id_dedit', type: 'int'},
{name: 'id_credit', type: 'int'},
{name: 'id_importance'},
{name: 'id_dossier'},
{name: 'id_couleur'},
{name: 'due', type: 'date', dateFormat:'d/m/Y'}
]);

var reader = new Ext.data.JsonReader({
idProperty:'taskId',
fields: rec
});

// define a custom summary function

var summary = new Ext.grid.GroupSummary();

var grid = new xg.EditorGridPanel({
ds: new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: 'due', direction: "ASC"},
groupField:'project'
}) ,

tbar: ['-',{

text: 'Ajouter une ligne',
tooltip:'Ajouter une ligne vierge',
iconCls:'add',

handler: function () {
this.add (new rec (
{projectId: 1, project: 'Compte Ch

Condor
25 Jan 2008, 6:58 AM
Yes, grid hasn't been defined yet when you try to use it.

Try:

[CODE]
var store = new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: 'due', direction: "ASC"},
groupField:'project'
});
var grid = new xg.EditorGridPanel({
ds: store,
tbar: ['-',{
text: 'Ajouter une ligne',
tooltip:'Ajouter une ligne vierge',
iconCls:'add',
handler: function () {
store.add(new rec(
{projectId: 1, project: 'Compte Ch

etha
25 Jan 2008, 7:00 AM
It's works fine, You're amazing, thanks very much for your patience :D