PDA

View Full Version : EditorGridPanel: What did i miss?



trasherdk
5 Oct 2009, 6:44 AM
Hi all

I'm still struggling with this tab panel, containing 2 read-only forms
and a edit grid. (screenshot attached).

I've been starring at this code for a couple of days, and can't figure
out what it is i'm missing.

So the question, what did i miss? Clues, anybody :((

I don't get any errors in firebug, the load() fires, and return valid data.



{success: true, total: 2, results: [
{ "id":"1"
, "ws":"1"
, "prod":"3"
, "ptext":"15\" Alu. f\u00e6lge"
, "unit":"4"
, "price":"1250.00"
, "check":"0"
}
,
{"id":"2"
, "ws":"1"
, "prod":"2"
, "ptext":"Udskiftning af f\u00e6lge"
, "unit":"1"
, "price":"250.00"
, "check":"0"
}
]
, errors: { reason: 'Data Retrieved OK'}
}


After the load() i try console.log(store.getTotalCount()); which
return 0 (zero) ???

This is the tab panel:



Ext.ux.WorkSheetTab = Ext.extend( Ext.Panel, {

constructor: function(config){

Ext.ux.WorkSheetTab.superclass.constructor.call(this, Ext.apply({
closable:true
,border: false
,frame: false
,layout:'absolute'
,items: [
new Ext.ux.wsCustForm(
{
id: config.id + '-custform'
,rowid: config.rowid
,x:10
,y:10
,defaults: {width: '95%', readOnly: true}
})

,new Ext.ux.wsCarForm(
{
id: config.id + '-carform'
,rowid: config.rowid
,x:320
,y:10
,defaults:{width: '95%', readOnly: true}
})

,new Ext.ux.wsItemGrid(
{
id: config.id + '-detail'
,rowid: config.rowid
,datatype: config.datatype
,x: 10
,y:170
,width: 610
,height: 250
})
/**/
]
}
, config));
}
});


And the grid definition:



Ext.namespace('Ext.ux');

Ext.ux.wsItemStore = Ext.extend( Ext.data.JsonStore, {

constructor: function(config){

Ext.ux.wsItemStore.superclass.constructor.call(this, Ext.apply({
url: 'php/worksheet.php'
,autoLoad: false
,baseParams: {
rowid: config.rowid
,datatype: 'worksheet'
,task: 'detail-list'
}
,root: 'results'
,totalProperty: 'total'
,successProperty: 'success'
,idProperty: 'id'
,fields: [
{name: 'id', type:'int', mapping: 'id'}
,{name: 'ws', type:'int', mapping: 'ws'}
,{name: 'prod', type:'int', mapping: 'product'}
,{name: 'ptext', type:'string', mapping: 'detail'}
,{name: 'unit', type:'int', mapping: 'unit'}
,{name: 'price', type:'float', mapping: 'price'}
,{name: 'check', type:'checkbox', mapping: 'check'}
]
,callback: function(){
Ext.Msg.show({
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
modal: false,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
}
}, config ));
}
});

Ext.ux.wsCheckBoxModel = Ext.extend(Ext.grid.CheckboxSelectionModel, {

constructor: function(config){

Ext.ux.wsCheckBoxModel.superclass.constructor.call(this, Ext.apply({
header: 'Check',
width: 55,
dataIndex: 'check'
}, config ));
}
});

Ext.ux.wsItemGridModel = Ext.extend(Ext.grid.ColumnModel, {

constructor: function(config){

Ext.ux.wsItemGridModel.superclass.constructor.call(this, Ext.apply({
columns: [
new Ext.grid.RowNumberer(),
{header: 'id', width: 20, hidden: true, dataIndex: 'id'},
{header: 'ws', width: 20, hidden: true, dataIndex: 'ws'},
{header: 'Product', width: 80, dataIndex: 'product'},
{header: 'Detail', width: 250, dataIndex: 'detail'},
{header: 'Units', width: 50, dataIndex: 'unit'},
{header: 'Price', width: 70, dataIndex: 'price'},
{header: 'Total', width: 70},
new Ext.ux.wsCheckBoxModel()
]
,defaults: {
sortable: false
,menuDisabled: true
}
}, config ));
}
});

Ext.ux.wsItemGrid = Ext.extend(Ext.grid.EditorGridPanel, {

constructor: function(config){

Ext.ux.wsItemGrid.superclass.constructor.call(this, Ext.apply({
id: 'worksheet-detail'
,title: 'Detail'
,width: 610
,height: 350
,frame: true
,border: true
,iconCls: 'icon-grid'
,emptyText:'No rows to display'
,clicksToEdit: 1
,colModel: new Ext.ux.wsItemGridModel({
id: config.id + '-model'
,rowid: config.rowid
,datatype: config.datatype
})
,store: new Ext.ux.wsItemStore({
id: config.id + '-store'
,rowid: config.rowid
,datatype: config.datatype
})
}, config ));
}
});

Animal
5 Oct 2009, 6:48 AM
Looks like you're never loading your Store

trasherdk
5 Oct 2009, 6:55 AM
Animal, thanks.

I did not include that part. It's loaded from dblclick on a treenode, like this:



Ext.getCmp(tabid + '-detail').getStore().load({
url:'php/worksheet.php'
,params: {
rowid: rowid
,task: 'detail-list'
,datatype: 'worksheet'
}
});


I have also tried the "autoLoad: true" on the store, which also
fires the load, but still nothing in the grid.

Condor
5 Oct 2009, 6:59 AM
type:'checkbox'? Don't you mean 'boolean'?

trasherdk
5 Oct 2009, 7:18 AM
Thanks Condor, you are right. That did help some.

This rises an error on the "Total" column, that was ment to be
the result of ( unit x price ) commenting out "Total" reveal the rows.




columns: [
new Ext.grid.RowNumberer(),
{header: 'id', width: 20, hidden: true, dataIndex: 'id'},
{header: 'ws', width: 20, hidden: true, dataIndex: 'ws'},
{header: 'Product', width: 80, dataIndex: 'product'},
{header: 'Detail', width: 250, dataIndex: 'detail'},
{header: 'Units', width: 50, dataIndex: 'unit'},
{header: 'Price', width: 70, dataIndex: 'price'},
// {header: 'Total', width: 70},
new Ext.ux.wsCheckBoxModel()
]


But as the screenshot show, the product and detail columns are empty,
and the checkbox just look weird.

Condor
5 Oct 2009, 7:22 AM
That is because you named the fields 'prod' and 'ptext', but you are referring to them as dataIndex 'product' and 'detail'.

Animal
5 Oct 2009, 7:24 AM
Obviously Total needs to be got from somewhere.

"an error" is not helpful.

They mean something. And if you are developing properly with Firebug, you can see exactly what.

Condor
5 Oct 2009, 7:26 AM
For the 'total' field you could use my calculated fields extension (http://www.extjs.com/forum/showthread.php?t=28826).

trasherdk
5 Oct 2009, 7:36 AM
Condor. Right, again :D

Ok, so i got the store thing wrong. I have been searching for info
on this. I thought left side was from the response, and right
side was the grid. Swapping those 2 around brought the result.



,fields: [
{name: 'id', type:'int', mapping: 'id'}
,{name: 'ws', type:'int', mapping: 'ws'}
,{name: 'product', type:'int', mapping: 'prod'}
,{name: 'detail', type:'string', mapping: 'ptext'}
,{name: 'unit', type:'int', mapping: 'unit'}
,{name: 'price', type:'float', mapping: 'price'}
,{name: 'check', type:'boolean', mapping: 'check'}
]


What about that checkbox, any idea why it look like that?

trasherdk
5 Oct 2009, 7:54 AM
Animal. "an error" is not really a clue :">

The error on "Total" come, i think, from no matching column in the store,
and i still have to define the calculated column.

The firebug error was:


this.ds.fields.get(i) is undefined

This was not the focus currently, but it will be as soon as i get the checkbox
to behave.

Condor
5 Oct 2009, 7:56 AM
You don't want a Ext.grid.CheckboxSelectionModel, you want an Ext.ux.grid.CheckColumn (in examples/ux/CheckColumn.js).

trasherdk
5 Oct 2009, 8:26 AM
Condor, once again, spot on :)

How ever, it does make me wonder. What is the CheckboxSelectionModel for then ??

I managed to get my calculated column by adding the following to the store:


,{name: 'total', type: 'float', mapping: 'unit * obj.price'}


It's a readonly column, and none of the columns will be sortable.

Next exercise is to get my combobox in the product column, and
make the grid "editable".

Thanks a lot for your help.

Regards
Mogens

Condor
5 Oct 2009, 10:12 AM
CheckboxSelectionModel was created to simplify multiple row selection and it should be used as both the selection model and as the first column.

If the checkbox column isn't be editable then you should only use the renderer of the CheckColumn.

Note: If you use a mapping to calculate the total then it won't automatically update if unit or price changes.

trasherdk
5 Oct 2009, 11:39 AM
Condor, thanks.

I'll probably implement your "Calculated fields" extension later, when i
get the other issues under control.

So far the checkbox seem to work as editable, but i haven't implemented
the writer, or add functions yet.

I'm not used to program front-end, so this learning curve seem rather steep :-?

Anyway, this extjs thing is soo cool that it's worth the time :D

Regards
Mogens

mschwartz
5 Oct 2009, 11:42 AM
{ header: 'Total', dataIndex: 'id', renderer: function(value, p, r) { return +r.data.units * +r.data.price; } }

trasherdk
5 Oct 2009, 12:54 PM
mschwartz, cool.

That's working, and is updating when unit or price change.



{ header: 'Total', dataIndex: 'id'
, renderer: function(value, p, r) { return +r.data.units * +r.data.price; }
}


I got a "NaN" in the total column, until i spotted the extra s in unit ;)

Thanks

Mogens

Condor
6 Oct 2009, 12:02 AM
Also a good solution, the only advantage that a calculated field has over this is that it is sortable.