Building a Custom Grid Class using the JSONDataModel

[Wolfgang]

Hello,

find attached a sample code for building a custom grid class that uses the JSONDataModel.

The class does the following:
-uses the standard grid with the json data model (gets data via an external php file using xhr)
-defines custom scheme and header definition
-defines custom renderer (including images inside the grid)
-defines custom column order (the json data are orderd different than the columns in the grid)
-defines custom pagenum variable for the xhr request to the external script

The code

// ***************** DM *****************************************
// create new DM class. Will be extended later
YAHOO.ext.grid.CallerListDM = function(schema, source, pageSize){
YAHOO.ext.grid.CallerListDM.superclass.constructor.call(this, []);

this.schema = {
root: 'data',
totalProperty: 'totalCount',
id: 'nothing',
fields: ['received','dialed', 'entity', 'calldate', 'duration']
};

this.initPaging(source, pageSize);
this.remoteSort = true;
// Make all paging/sorting requests pass "pageNum" instead of "page"
this.paramMap['page'] = 'pageNum';
this.loadPage(1);
};




// extend new DM class to be used with the JSON DM and add/redefine functions.
YAHOO.extendX(YAHOO.ext.grid.CallerListDM, YAHOO.ext.grid.JSONDataModel, {
setSource : function(o){
this.source = o;
},

getRowId: function(rowIndex){
return this.data[rowIndex].key;
},

getSource : function(){
return this.source;
}
});



// ***************** CM *****************************************
YAHOO.ext.grid.CallerListCM = function(){
// sortTypes provide support for custom sorting comparison functions
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

YAHOO.ext.grid.CallerListCM.superclass.constructor.call(this, [
{header: "Calldate", width: 120, sortable: true, sortType: sort.asUCString, renderer: this.renDate},
{header: "From", width: 150, sortable: true, sortType: sort.asUCString},
{header: "To", width: 100, sortable: true, sortType: sort.asUCString},
{header: "Entity", width: 50, sortable: true, renderer: this.renDirection},
{header: "Duration", width: 75, sortable: true, sortType: sort.asUCString, renderer: this.renDuration}
]);
// the JSON data are not in the order we need, so we reorder the columns
//setDataIndex(Number col, Number dataIndex) : void
// move Calldate to the 1. position
this.setDataIndex(0, 3);
this.setDataIndex(1, 0);
this.setDataIndex(2, 1);
this.setDataIndex(3, 2);
this.setDataIndex(4, 4);

};


// extend new CM model with the default CM model and add/redefine functions
YAHOO.extendX(YAHOO.ext.grid.CallerListCM, YAHOO.ext.grid.DefaultColumnModel, {}
);




// render italic
YAHOO.ext.grid.CallerListCM.prototype.renItalic = function (value){
return '' + value + '';
};

// render direction using images depending on in/out
YAHOO.ext.grid.CallerListCM.prototype.renDirection = function (bIncoming) {
var img;
if (bIncoming) { return 'admin/public/img/incoming.gif';}
else { return 'admin/public/img/outgoing.gif';}
};

// render duration xx:yy:zz
YAHOO.ext.grid.CallerListCM.prototype.renDuration= function (dur) {
var seconds = parseInt(dur)%60;
var minutes = Math.floor((parseInt(dur)/60)%60);
var hours = Math.floor(parseInt(dur)/3600);
var ret;
// padding
if (seconds < 10 ) {seconds = '0' + seconds;}
if (minutes < 10 ) {minutes = '0' + minutes;}
ret = minutes + ":" + seconds;
if (hours>0) {ret = hours + ":" + ret;}
return ret;
};

// render date with bold dd:mm:yy
YAHOO.ext.grid.CallerListCM.prototype.renDate = function (date) {
// sep. date and time
var dd = date.split(" ");
var ar = dd[0].split("-");
return "" + ar[2] + "-" + ar[1] + "-" + ar[0] + " [" + dd[1] + "]";
};




// create the new grid class
YAHOO.ext.grid.CallerListGrid = function(container, schema, source, pageSize){
var dm = new YAHOO.ext.grid.CallerListDM(schema, source, pageSize);
var cm =new YAHOO.ext.grid.CallerListCM();
dm.sort(cm, 0, 'DESC');
YAHOO.ext.grid.CallerListGrid.superclass.constructor.call(this, container, dm, cm);
};


// extend the new grid class with the standard grid
YAHOO.extendX(YAHOO.ext.grid.CallerListGrid, YAHOO.ext.grid.Grid, {}
);


To use the class:

// build and show the grid
var callerList = new YAHOO.ext.grid.CallerListGrid(
'callerList',
{
root: 'data',
totalProperty: 'totalCount',
id: 'nothing',
fields: ['received','dialed', 'entity', 'calldate', 'duration']
},
'calls/resp_calls.php',
20
);
callerList.render();
callerList.getSelectionModel().selectFirstRow();


Pls note that your external php script must provide the required data in JSON format matching the definition in schema.

I hope that helps any yui-ext beginner (like me) :wink:

Wolfgang

[nothercount]

Wolfgang, thanks a lot for the example. It really helps getting into yui-ext.

I have a quick question: why do you pass the schema to the data model? It's already declared there and that seems right. In what situations would it better serve to pass the schema as a parameter to the data model constructor? Thanks.

I've also tried the code and haven't gotten the grid populated. (I see the header and footer and it's the correct height.) I am using this canned data:

<?php

$fields = array();

$fields['received'] = "Bob";
$fields['dialed'] = "Albert";
$fields['entity'] ="incoming";
$fields['calldate'] ="1000-01-01 00:00:00";
$fields['duration']= 3606;

$jfields = json_encode($fields);

$dataArr = array();

$dataArr['totalCount']=1;
$dataArr['nothing']=0;
$dataArr['data']=$jfields;

$jdataArr = json_encode($dataArr);
//print_r ($jdataArr);

echo $jdataArr;
?>

debugging gives:

{"totalCount":1,"nothing":0,"data":"{\"received\":\"Bob\",\"dialed\":\"Albert\",\"entity\":\"incoming\",\"calldate\":\"1000-01-01 00:00:00\",\"duration\":3606}"}

Am I having schema problems? I call it with the schema you provide and set records per page to one.

Thanks In Advance All!

[Animal]

data is an Array of rows, not an Array of cells.

[Wolfgang]

Wolfgang, thanks a lot for the example. It really helps getting into yui-ext.

I have a quick question: why do you pass the schema to the data model? It's already declared there and that seems right. In what situations would it better serve to pass the schema as a parameter to the data model constructor? Thanks.


You are right. I thought of passing the schema via the constructor but haven't still found a nice way to pass also the headerinformation to the Columnmanager. So in short, you can safely remove the schema from the constructor.


...
I've also tried the code and haven't gotten the grid populated. (I see the header and footer and it's the correct height.) I am using this canned data:

<?php

$fields = array();

$fields['received'] = "Bob";
$fields['dialed'] = "Albert";
$fields['entity'] ="incoming";
$fields['calldate'] ="1000-01-01 00:00:00";
$fields['duration']= 3606;

$jfields = json_encode($fields);

$dataArr = array();

$dataArr['totalCount']=1;
$dataArr['nothing']=0;
$dataArr['data']=$jfields;

$jdataArr = json_encode($dataArr);
//print_r ($jdataArr);

echo $jdataArr;
?>

debugging gives:

{"totalCount":1,"nothing":0,"data":"{\"received\":\"Bob\",\"dialed\":\"Albert\",\"entity\":\"incoming\",\"calldate\":\"1000-01-01 00:00:00\",\"duration\":3606}"}

Am I having schema problems? I call it with the schema you provide and set records per page to one.

Thanks In Advance All!

Here my one:
$entries contains an array of hash with key->value pairs matching the scheme structure (without totalcount etc.) like your example.

$json = new Services_JSON();
$myret['totalCount'] = $tcount;
$myret['data']=$entries;
$cdr = $json->encode($myret);
print $cdr;

The difference to your example is just, that i use JSON encode only once, where you do it twice.

Regards

Wolfgang

[nothercount]

Wolfgang & Animal,

Thanks. I put both of your recommendations together and it works.

I appreciate it.

[orhant]

Nice work. thanks. I tried and it works. I wanto learn "how can i add SingleSelectionModel "

I try to make Master/Detail grid. When master grid row changed Detail grid reloaded.

I searched forum and example. I get that code.

sm = new YAHOO.ext.grid.SingleSelectionModel();
sm.addListener('selectionchange', onSelection);
.
.
grid = new YAHOO.ext.grid.Grid('topics-grid', dm, cm, sm);

Thanks again.

[orhant]

May be It is stupid but i have solve problem.

sm=callerList.getSelectionModel();
dm=callerList.getDataModel();
dm.addListener('load', sm.selectFirstRow, sm, true);
sm.addListener('selectionchange',
function() {
var topicId = callerList.getSelectedRowIndex();
if(topicId>-1) {

loadTask.delay(350, loader.update, loader, ['posts.php', {'topicId': topicId}]);
}
}
);
If you have clear code please post it.
Thanks.

},

[Miguel Antonio Hernandez]

I want to run this example. Can you get me the all example with the html file ?.

Im very sory, Im new in this.

[Wolfgang]

@orhant
I have not a better solution, yet. Once i run into this and have a better way of doing it, i'll update/extend the example. Nevertheless thank you for posting your solution.

@Miguel
i placed already posted what you need to add your html in the example. See "To use the class".
(of cause you have to load yui-ext and yui's utilities.js)

Wolfgang

[Wolfgang]

I tried adding buttons to the toolbar. From the docs i would have expected that the current would have worked:


var tb = callerList.getView().getPageToolbar();
tb.addSeparator();

tb.addButton({
text: 'Add',
tooltip: 'Add a new row',
click: addRow,
scope: test,
className: 'ytb-text-only'
});


But it does not.
The problem is:

callerList.getView() has no properties
(no name)()yui-ext-debug.js (line 2124)
namespace()utilities.js (line 2)
namespace()utilities.js (line 2)
[Break on this error] }


From my understanding, getView() should return a GridView Object, or if it is paged Grid (like in the example above), return a PagedGridView Object, that in turn would provide the getPageToolbar() method.

So there is something wrong, either in the way i try to get access to the toolbar or the way i extended the class for the CallerListGrid. I still wonder why getView() returns an "invalid" objects though.

Any comments are welcome

Wolfgang

[Animal]

Break at that line and step in, and see what getView is doing :!:

[Wolfgang]

Well getView() is called as expected. However the returned object "this.view" is null, so getView() returns null.
From the docs, that should not be.

I assume that there is something wrong in the definition of CallerListGrid, but i have no idea where since everting works fine, except getView(). Maybe there is an issue when calling the superclass.constructor ...

[Animal]

What is the variable callerlist at the time getView() is called on it? It can't be the Grid Object that you think it is because a functioning Grid Object will have a defined, non-null View.

[Wolfgang]

After getting some sleep furher debugging i found the issue :D
Because i thought of adding my stuff to the the toolbar before putting on screen, i called render() after i tried getting the toolbar / adding my buttons.

But, getView() returns only a valid view object, if render() has been called before.
So this fails:

var callerList = new YAHOO.ext.grid.CallerListGrid(
'callerList', 'calls/resp_calls.php', 10
);
var tb = callerList.getView().getPageToolbar();
callerList.render();


and this works

var callerList = new YAHOO.ext.grid.CallerListGrid(
'callerList', 'calls/resp_calls.php', 10
);
callerList.render();
var tb = callerList.getView().getPageToolbar();



If this is the expected behaviour and not a bug, i would suggest to add a comment to render() and getView(), making clear that the view object is only available after render() is called, because render() creates the view object.

From the docs:

public function render()
Called once after all setup has been completed and the grid is ready to be rendered.
Returns:
* YAHOO.ext.grid.Grid
this
This method is defined by Grid.


and


public function getPageToolbar()
Returns the toolbar used for paging so you can add new buttons.
Returns:
* YAHOO.ext.Toolbar
This method is defined by PagedGridView.


Wolfgang

[Animal]

That's expected. render() renders the Grid (the conceptual Object which ties the DataModel and ColumnModel together) to the document. That's the operation that creates the View.

Perhaps is could be made more explicit in the docs. Perhaps getView could throw an Exception if the Grid has not been rendered?

[Wolfgang]

It would be great if the information could be added to the docs. It is certainly clear for any advanced yui-ext programmer, but can be hard for any newbie :wink:

[jack.slocum]

The grid must be rendered before UI elements are available to be manipulated. I don't think it can (or should) be any other way. If it's not rendered, there's no UI to manipulate. :)

I will clarify this in the docs.

[dward8126]

ok I have figured this out to this point and got it running. But I cannot figure out how to add a single selection model to it. I got it added but when you load the grid it fires the event for each row added. After they are all added it works as it is suppose to. The application is at http://wctp.aquasol.net/Wireless/index1.php Thanks in advance for the help.

[dward8126]

ok I finally figured it out. I just modified the class to have an on click handler based off Jack's custom grid in the examples section. I am not sure if this is the correct way or not but it works.

[Wolfgang]

ok I finally figured it out. I just modified the class to have an on click handler based off Jack's custom grid in the examples section. I am not sure if this is the correct way or not but it works.
Just saw your example page - nice work.

May i ask you (suppose you use ext v.033):
- What have you changed for implementing the single selection model?
- How did you mange to have the header/toolbar fixed in your gridpanel in west (so vertical scroller do not touch these elements)?

Wolfgang

[xbartv]

Hi, i was trying to make the example yoy provide, but i receive this error:



Fatal error: Call to undefined function json_encode() in C:\Inetpub\wamp\www\YUI-EXT\resp_calls.php on line 11

[dward8126]

If you dont have php 5.2 you will get tat error because the JSON class is not included below php 5.2. If you cant upgrade php u need to find an external class to Encode you data ito JSON.

[dward8126]

Hey wolfgang I will post the code first thing Monday morning it is at work. I basically just took jacks example of the props grid and added some events to your current example. Itws actually very easy based on the props grid example. Like I said I will get the code up for you tommorow :)

[Wolfgang]

Hi, i was trying to make the example yoy provide, but i receive this error:



Fatal error: Call to undefined function json_encode() in C:\Inetpub\wamp\www\YUI-EXT\resp_calls.php on line 11


You can get one of the php json implementation here:
http://pear.php.net/pepr/pepr-proposal-show.php?id=198
It works well with php 4.x.

Regards

Wolfgang

[Wolfgang]

Hey wolfgang I will post the code first thing Monday morning it is at work. I basically just took jacks example of the props grid and added some events to your current example. Itws actually very easy based on the props grid example. Like I said I will get the code up for you tommorow :)

Thank you. I am keen on to understand how you managed to get the header/footer fixed in the grid and the vertical scrollbar affecting only the rows using a panelgrid. In my environment, the panel scrolls including header and toolbar when i use a panelgrid, but work if i put the grid in a contentpanel.
I think it is a css issue, but so far i was not able to manage it.

[xbartv]

Well, i installed php 5.2 so i think now is correct the response but i 'm gettin error too.

Firebug:
{"totalCount":1,"nothing":0,"data":"{\"received\":\"Bob\",\"dialed\":\"Albert\",\"entity\":\"incoming
\",\"calldate\":\"1000-01-01 00:00:00\",\"duration\":3606}"}

this.container has no properties
Grid("callerList", Object onCellUpdated=Window onTableDataChanged=Window, Object onWidthChange=Window onHeaderChange=Window, undefined)yui-ext.js (line 428)
CallerListGrid("callerList", Object root=data totalProperty=totalCount id=nothing, "resp_calls.php", 20)

Any suggest ??

[dward8126]

Post your code for your php file o I can see it. It looks like you are double encoding the data with JSON.

[xbartv]

<?php

$fields = array();

$fields['received'] = "Bob";
$fields['dialed'] = "Albert";
$fields['entity'] ="incoming";
$fields['calldate'] ="1000-01-01 00:00:00";
$fields['duration']= 3606;

$jfields = json_encode($fields);

$dataArr = array();

$dataArr['totalCount']=1;
$dataArr['nothing']=0;
$dataArr['data']=$jfields;

$jdataArr = json_encode($dataArr);
//print_r ($jdataArr);

echo $jdataArr;
?>

[dward8126]

It should be like this:


<?php

$fields = array();

// Start Loop here if you want more than one row

$fields['received'] = "Bob";
$fields['dialed'] = "Albert";
$fields['entity'] ="incoming";
$fields['calldate'] ="1000-01-01 00:00:00";
$fields['duration']= 3606;
$jfields[] = $fields;

//End Loop Here

$dataArr = array();
$dataArr['totalCount']=1;
$dataArr['nothing']=0;
$dataArr['data']=$jfields;

$jdataArr = json_encode($dataArr);

echo $jdataArr;
?>

[xbartv]

I still receive the same errors.

FireBug:

POST http://localhost/YUI-EXT/resp_calls.php (782ms)utilities.js (line 27)
ParamsHeadersPostResponse
Response Headers
Request Headers

{"totalCount":1,"nothing":0,"data":[{"received":"Bob","dialed":"Albert","entity":"incoming","calldate"

:"1000-01-01 00:00:00","duration":3606}]}

POST http://localhost/YUI-EXT/resp_calls.php (860ms)utilities.js (line 27)
ParamsHeadersPostResponse
Response Headers
Request Headers

{"totalCount":1,"nothing":0,"data":[{"received":"Bob","dialed":"Albert","entity":"incoming","calldate"

:"1000-01-01 00:00:00","duration":3606}]}

this.container has no properties
Grid("callerList", Object onCellUpdated=Window onTableDataChanged=Window, Object onWidthChange=Window onHeaderChange=Window, undefined)yui-ext.js (line 428)
CallerListGrid("callerList", Object root=data totalProperty=totalCount id=nothing, "resp_calls.php", 20)datagrid01.js (line 113)
YAHOO.ext.grid.Grid=function(container,config,colModel,selectionModel){this.cont...

dg01.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/utilities.js"></script>
<script type="text/javascript" src="js/yui-ext.js"></script>
<script type="text/javascript" src="js/datagrid01.js"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">

// build and show the grid
var callerList = new YAHOO.ext.grid.CallerListGrid(
'callerList',
{
root: 'data',
totalProperty: 'totalCount',
id: 'nothing',
fields: ['received','dialed', 'entity', 'calldate', 'duration']
},
'resp_calls.php',
20
);
callerList.render();
callerList.getSelectionModel().selectFirstRow();
</script>
</body>
</html>


datagrid01.js

// ***************** DM *****************************************
// create new DM class. Will be extended later
YAHOO.ext.grid.CallerListDM = function(schema, source, pageSize){
YAHOO.ext.grid.CallerListDM.superclass.constructor.call(this, []);

this.schema = {
root: 'data',
totalProperty: 'totalCount',
id: 'nothing',
fields: ['received','dialed', 'entity', 'calldate', 'duration']
};

this.initPaging(source, pageSize);
this.remoteSort = true;
// Make all paging/sorting requests pass "pageNum" instead of "page"
this.paramMap['page'] = 'pageNum';
this.loadPage(1);
};




// extend new DM class to be used with the JSON DM and add/redefine functions.
YAHOO.extendX(YAHOO.ext.grid.CallerListDM, YAHOO.ext.grid.JSONDataModel, {
setSource : function(o){
this.source = o;
},

getRowId: function(rowIndex){
return this.data[rowIndex].key;
},

getSource : function(){
return this.source;
}
});



// ***************** CM *****************************************
YAHOO.ext.grid.CallerListCM = function(){
// sortTypes provide support for custom sorting comparison functions
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

YAHOO.ext.grid.CallerListCM.superclass.constructor.call(this, [
{header: "Calldate", width: 120, sortable: true, sortType: sort.asUCString, renderer: this.renDate},
{header: "From", width: 150, sortable: true, sortType: sort.asUCString},
{header: "To", width: 100, sortable: true, sortType: sort.asUCString},
{header: "Entity", width: 50, sortable: true, renderer: this.renDirection},
{header: "Duration", width: 75, sortable: true, sortType: sort.asUCString, renderer: this.renDuration}
]);
// the JSON data are not in the order we need, so we reorder the columns
//setDataIndex(Number col, Number dataIndex) : void
// move Calldate to the 1. position
this.setDataIndex(0, 3);
this.setDataIndex(1, 0);
this.setDataIndex(2, 1);
this.setDataIndex(3, 2);
this.setDataIndex(4, 4);

};


// extend new CM model with the default CM model and add/redefine functions
YAHOO.extendX(YAHOO.ext.grid.CallerListCM, YAHOO.ext.grid.DefaultColumnModel, {}
);




// render italic
YAHOO.ext.grid.CallerListCM.prototype.renItalic = function (value){
return '' + value + '';
};

// render direction using images depending on in/out
YAHOO.ext.grid.CallerListCM.prototype.renDirection = function (bIncoming) {
var img;
if (bIncoming) { return 'admin/public/img/incoming.gif';}
else { return 'admin/public/img/outgoing.gif';}
};

// render duration xx:yy:zz
YAHOO.ext.grid.CallerListCM.prototype.renDuration= function (dur) {
var seconds = parseInt(dur)%60;
var minutes = Math.floor((parseInt(dur)/60)%60);
var hours = Math.floor(parseInt(dur)/3600);
var ret;
// padding
if (seconds < 10 ) {seconds = '0' + seconds;}
if (minutes < 10 ) {minutes = '0' + minutes;}
ret = minutes + ":" + seconds;
if (hours>0) {ret = hours + ":" + ret;}
return ret;
};

// render date with bold dd:mm:yy
YAHOO.ext.grid.CallerListCM.prototype.renDate = function (date) {
// sep. date and time
var dd = date.split(" ");
var ar = dd[0].split("-");
return "[b]" + ar[2] + "-" + ar[1] + "-" + ar[0] + " [" + dd[1] + "]";
};




// create the new grid class
YAHOO.ext.grid.CallerListGrid = function(container, schema, source, pageSize){
var dm = new YAHOO.ext.grid.CallerListDM(schema, source, pageSize);
var cm =new YAHOO.ext.grid.CallerListCM();
dm.sort(cm, 0, 'DESC');
YAHOO.ext.grid.CallerListGrid.superclass.constructor.call(this, container, dm, cm);
};


// extend the new grid class with the standard grid
YAHOO.extendX(YAHOO.ext.grid.CallerListGrid, YAHOO.ext.grid.Grid, {}
);


resp_calls.php

<?php

$fields = array();

// Start Loop here if you want more than one row

$fields['received'] = "Bob";
$fields['dialed'] = "Albert";
$fields['entity'] ="incoming";
$fields['calldate'] ="1000-01-01 00:00:00";
$fields['duration']= 3606;
$jfields[] = $fields;

//End Loop Here

$dataArr = array();
$dataArr['totalCount']=1;
$dataArr['nothing']=0;
$dataArr['data']=$jfields;

$jdataArr = json_encode($dataArr);

echo $jdataArr;
?>

[dward8126]

You need to put a <div> in the page that you call the grid. The <div needs to have the id 'callerlist' which is defined in your initialization of the object.

[xbartv]

Still the same

[Wolfgang]

Make sure the div exists _before_ you create an instance of the grid.

[xbartv]

Thanks, now is ok. Only some css problems, but i will see them later.

[dward8126]

Here is the modified class with an event listene for a celldoubleclick Yo could change to any event. Right now the function only shows a message box, once again you culd change this to any function. Also the way around the scroll bar was I just loaded the grid into a grid panel instead of a content panel.


// ***************** DM *****************************************
// create new DM class. Will be extended later
YAHOO.ext.grid.CallerListDM = function(source, pageSize, co){
YAHOO.ext.grid.CallerListDM.superclass.constructor.call(this, []);

this.schema = {
root: 'data',
totalProperty: 'totalCount',
id: 'nothing',
fields: ['received']
};

this.initPaging(source, pageSize);
this.remoteSort = true;
// Make all paging/sorting requests pass "pageNum" instead of "page"
this.paramMap['page'] = 'pageNum';
this.baseParams['company'] = co;
this.loadPage(1);
};




// extend new DM class to be used with the JSON DM and add/redefine functions.
YAHOO.extendX(YAHOO.ext.grid.CallerListDM, YAHOO.ext.grid.JSONDataModel, {
setSource : function(o){
this.source = o;
var data = [];
for(var key in o){

var vals = [key, o[key]];
vals.key = key;
data.push(vals);

}
},

getRowId: function(rowIndex){
return this.data[rowIndex].key;
},

getSource : function(){
return this.source;
},

test : function(rowIndex,colIndex){
return this.getValueAt(rowIndex, colIndex);

}
});



// ***************** CM *****************************************
YAHOO.ext.grid.CallerListCM = function(dataModel){
// sortTypes provide support for custom sorting comparison functions
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

YAHOO.ext.grid.CallerListCM.superclass.constructor.call(this, [
{header: "Customer", width: 230, sortable: true, sortType: sort.asUCString}
]);
// the JSON data are not in the order we need, so we reorder the columns
//setDataIndex(Number col, Number dataIndex) : void
// move Calldate to the 1. position
this.dataModel = dataModel;
};


// extend new CM model with the default CM model and add/redefine functions
YAHOO.extendX(YAHOO.ext.grid.CallerListCM, YAHOO.ext.grid.DefaultColumnModel, {}
);




// render italic
YAHOO.ext.grid.CallerListCM.prototype.renItalic = function (value){
return '' + value + '';
};

// render direction using images depending on in/out
YAHOO.ext.grid.CallerListCM.prototype.renDirection = function (bIncoming) {
var img;
if (bIncoming) { return 'admin/public/img/incoming.gif';}
else { return 'admin/public/img/outgoing.gif';}
};

// render duration xx:yy:zz
YAHOO.ext.grid.CallerListCM.prototype.renDuration= function (dur) {
var seconds = parseInt(dur)%60;
var minutes = Math.floor((parseInt(dur)/60)%60);
var hours = Math.floor(parseInt(dur)/3600);
var ret;
// padding
if (seconds < 10 ) {seconds = '0' + seconds;}
if (minutes < 10 ) {minutes = '0' + minutes;}
ret = minutes + ":" + seconds;
if (hours>0) {ret = hours + ":" + ret;}
return ret;
};

// render date with bold dd:mm:yy
YAHOO.ext.grid.CallerListCM.prototype.renDate = function (date) {
// sep. date and time
var dd = date.split(" ");
var ar = dd[0].split("-");
return "" + ar[2] + "-" + ar[1] + "-" + ar[0] + " [" + dd[1] + "]";
};




// create the new grid class
YAHOO.ext.grid.CallerListGrid = function(container, source, pageSize, co){
var dm = new YAHOO.ext.grid.CallerListDM(source, pageSize, co);
var cm =new YAHOO.ext.grid.CallerListCM(dm);
dm.sort(cm, 0, 'DESC');
YAHOO.ext.grid.CallerListGrid.superclass.constructor.call(this, container, dm, cm);
this.on('celldblclick', this.onCellClick, this, true);
};


// extend the new grid class with the standard grid
YAHOO.extendX(YAHOO.ext.grid.CallerListGrid, YAHOO.ext.grid.Grid, {
onCellClick : function(grid, rowIndex, colIndex, e){alert(this.dataModel.test(rowIndex,colIndex));}
}
);

[Wolfgang]

...
Also the way around the scroll bar was I just loaded the grid into a grid panel instead of a content panel.
...


I tried this already, but it does not work for me. Very strange. I am sure it is a css issue, but unfortunately i am not a CSS specialist. Firebug revels a lot, but still no luck.

[_jaza]

Hi,
I wonder how can I set 100% width to one of the rows?
Like the code below.

YAHOO.ext.grid.CallerListCM.superclass.constructor.call(this, [
{header: "Calldate", width: 120, sortable: true, sortType: sort.asUCString, renderer: this.renDate},
{header: "From", width: 100%, sortable: true, sortType: sort.asUCString},
{header: "To", width: 100, sortable: true, sortType: sort.asUCString},
{header: "Entity", width: 50, sortable: true, renderer: this.renDirection},
{header: "Duration", width: 75, sortable: true, sortType: sort.asUCString, renderer: this.renDuration}
]);


Nice work @Wolfgang but I have one issue whit this grid. When the page is loaded at first time make two calls to array.php. I sow it with firebug. Do you have any idea how to prevent these two calls?

[Wolfgang]

...
Nice work @Wolfgang but I have one issue whit this grid. When the page is loaded at first time make two calls to array.php. I sow it with firebug. Do you have any idea how to prevent these two calls?

I have also seen this behaviour, but not worked on that so far.
Once Jack has released the new grid code, i'll update this example and also try fixing this.

Regards

Wolfgang

[_jaza]

I have also seen this behaviour, but not worked on that so far.
Once Jack has released the new grid code, i'll update this example and also try fixing this.

Regards

Wolfgang

Ok thanks. I`ll waiting to see new version.

Regards
Ivo