PDA

View Full Version : Firefox Display of Grid is Weird



shaoen01
19 Jun 2011, 5:43 AM
Hi All,

I am encountering this problem with viewing the grid on my firefox. I am current following this link to do my own grid with my own data: http://www.sencha.com/learn/w/index.php?title=Tutorial:Grid_PHP_SQL_Part8

So previously, i was able to view the date but now it is gone. When i use my Eclipse or other browsers to view the same URL that i was testing, i can see the date but not on firefox. I tried clearing the cache and all cookies, still the same.

I had Firebug installed to check for any errors, but there were none. So i am out of wits here and i have no idea what is going on. The display on other browsers are fine, only in Firefox. Anyone know of a good debugger i can use for Chrome? I use Firefox Firebug quite a bit to debug.

scottmartin
19 Jun 2011, 6:08 AM
Chrome has a built-in debugger, (Developer Tools).
Right click on the page (Inspect Element) or use F12

Regards,
Scott.

shaoen01
19 Jun 2011, 6:27 AM
Chrome has a built-in debugger, (Developer Tools).
Right click on the page (Inspect Element) or use F12

Regards,
Scott.

I was wondering how to use that.

My date is not displaying in Chrome as well, but it displays in IE and in my Eclipse? What is happening?

scottmartin
19 Jun 2011, 6:47 AM
At this point, you may have to post some code, and your JSON.
Please do not post all of your JSON, just the bookends.

When you say your date is gone, do you mean it is in the JSON, but not the grid?
Have you verified your store/model are correct and your columns are correct for the grid?

Is your JSOn valid? You can verify it at JSONlint.com

Your problem could be as simply as a typo.

Regards,
Scott.

shaoen01
19 Jun 2011, 7:20 AM
The output of my JSON is:


({"total":"1","results":[{"0":"1","UserID":"1","1":"Mr","Title":"Mr","2":"fdsfds432","FirstName":"fdsfds432","3":"","MiddleName":"","4":"Aubry111","LastName":"Aubry111","5":"Xavier Aubry","FullName":"Xavier Aubry","6":"[email protected]","Email":"[email protected]","7":"","CompanyName":"","8":"","Website":"","9":"","Description":"","10":"2011-06-19 22:41:28","LastLogin":"2011-06-19 22:41:28","11":"2011-06-02 00:00:00","DateRegistered":"06\/02 00:00:00\/2011","12":"0000-00-00 00:00:00","DateModified":"0000-00-00 00:00:00","13":"2010-11-20 00:58:16","DateLastOrder":"2010-11-20 00:58:16","14":"0","EmailSubscription":"0","15":"4","UserTypeID":"4","16":"4","17":"Unregistered Customer","UserType":"Unregistered Customer","18":"UNREG_CUST","UserTypeCode":"UNREG_CUST"}]})
I went to the link you provided and it says there is an error. I then proceed to use the JSON array generated from the tutorial that was working and it says there was an error with the JSON array even though the date was displayed.

As for the date column, i am sure because when i use my Eclipse or IE to edit the Date, it does update. But it does not happen for Chrome or Firefox, the date does not even appear.

scottmartin
19 Jun 2011, 8:32 AM
The JSON does not need the () around it:
What is with all the numeric fieldname entries that duplicate each field? (debug switch?)



{
total: "1",
"result": [
{
"id_user": "1",
"user_name": 'ADMIN',
"status_name": "New",
"assigned_user_name": "ADMIN"
}
]
}


Several questions:

-What version of ExtJS are you using? The example you are referring to used 2.0.2?
-The example includes it's own JSON.php, use php->json_encode, unless you are using an old PHP
-If you echo your JSON record in code, you can find the culprit. I suspect it may be the format datetime fields.



<?php
echo { total: "1", "results": [ { "fieldname": "value", ... } ] }
?>


Regards,
Scott.

scottmartin
19 Jun 2011, 8:46 AM
simply put:



$records="[{'field1_1':'11','field2_1':'21'},{'field1_2':'12','field2_2':'22'}]";
$data = json_encode($records);
echo '{"total":"' . $total . '","data":' . $data . ' }';


result:


{
"total":"2",
"data":"[{'field1_1':'11','field2_1':'21'},{'field1_2':'12','field2_2':'22'}]"
}


I use "data" where you used "results" per your example.

Regards,
Scott.

shaoen01
19 Jun 2011, 3:57 PM
Thanks for the response. I am using ExtJS based on the tutorial: http://www.sencha.com/learn/Tutorial:Grid_PHP_SQL_Part8

This is the output of the Json array with the example tutorial used and have no problem displaying the date.

({"total":"1","results":[{"0":"4","IDpresident":"4","1":"3","IDparty":"3","2":"James22","firstname":"James22","3":"Madison","lastname":"Madison","4":"1809-03-04","tookoffice":"03\/04\/1809","5":"1817-03-04","leftoffice":"03\/04\/1817","6":"649273.00","income":"649273.00","7":"3","8":"Democratic-Republican","name":"Democratic-Republican"}]}) Below the method is used to check the version of the PHP to determine if JSON.php should be used.

// Encodes a SQL array into a JSON formated string
function JEncode($arr){
if (version_compare(PHP_VERSION,"5.2","<"))
{
require_once("./JSON.php"); //if php<5.2 need JSON class
$json = new Services_JSON();//instantiate new json object
$data=$json->encode($arr); //encode the data in json format
} else
{
$data = json_encode($arr); //encode the data in json format
}
return $data;
}

// Encodes a YYYY-MM-DD into a MM-DD-YYYY string
function codeDate ($date) {
$tab = explode ("-", $date);
$r = $tab[1]."/".$tab[2]."/".$tab[0];
return $r;
}




function getList()
{
$query = "SELECT * FROM presidents pr, parties pa WHERE pr.IDparty = pa.IDparty limit 0,1";
$result = mysql_query($query);
$nbrows = mysql_num_rows($result);
// Here we check if we have a query parameter :
/* if (isset($_POST['query'])){
$query .= " AND (pr.firstname LIKE '%".addslashes($_POST['query'])."%' OR pr.lastname LIKE '%".addslashes($_POST['query'])."%')";
}
$result = mysql_query($query);
$nbrows = mysql_num_rows($result);
$start = (integer) (isset($_POST['start']) ? $_POST['start'] : $_GET['start']);
$end = (integer) (isset($_POST['limit']) ? $_POST['limit'] : $_GET['limit']);
$limit = $query." LIMIT ".$start.",".$end;
$result = mysql_query($limit); */

if($nbrows>0){
while($rec = mysql_fetch_array($result)){
// render the right date format
$rec['tookoffice']=codeDate($rec['tookoffice']);
$rec['leftoffice']=codeDate($rec['leftoffice']);
$arr[] = $rec;
}
$jsonresult = JEncode($arr);
echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})';
} else {
echo '({"total":"0", "results":""})';
}
}


// << CONFIG >>
PresidentsDataStore = new Ext.data.Store({
id: 'PresidentsDataStore',
proxy: new Ext.data.HttpProxy({
url: 'database.php',
method: 'POST'
}),
baseParams:{task: "LISTING"}, // this parameter is passed for any HTTP request
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'IDpresident', type: 'int', mapping: 'IDpresident'},
{name: 'FirstName', type: 'string', mapping: 'firstname'},
{name: 'LastName', type: 'string', mapping: 'lastname'},
{name: 'IDparty', type: 'int', mapping: 'IDparty'},
{name: 'PartyName', type: 'string', mapping: 'name'},
{name: 'TookOffice', type: 'date', mapping: 'tookoffice'},
{name: 'LeftOffice', type: 'date', mapping: 'leftoffice'},
{name: 'Income', type: 'float', mapping: 'income'}
]),
sortInfo:{field: 'IDpresident', direction: "ASC"}
});

PresidentsColumnModel = new Ext.grid.ColumnModel(
[{
header: '#',
readOnly: true,
dataIndex: 'IDpresident',
width: 40,
renderer: function(value, cell){
cell.css = "readonlycell";
return value;
},
hidden: false
},{
header: 'First Name',
dataIndex: 'FirstName',
width: 60,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
}),
renderer: function(value, cell){
cell.css = "coolcell";
return value;
}
},{
header: 'Last Name',
dataIndex: 'LastName',
width: 80,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
}),
renderer: function(value, cell){
cell.css = "coolcell";
return value;
}
},{
header: 'ID party',
readOnly: true,
dataIndex: 'IDparty',
width: 50,
renderer: function(value, cell){
cell.css = "readonlycell";
return value;
},
hidden: true
},{
header: 'Party',
dataIndex: 'PartyName',
width: 150,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
store:new Ext.data.SimpleStore({
fields:['partyValue', 'partyName'],
data: [['1','No Party'],['2','Federalist'],['3','Democratic-Republican'],['4','Democratic'],['5','Whig'],['6','Republican']]
}),
mode: 'local',
displayField: 'partyName',
valueField: 'partyValue',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header: 'Took Office',
dataIndex: 'TookOffice',
width: 80,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
editor: new Ext.form.DateField({
format: 'm/d/Y'
}),
hidden: false
},{
header: 'Left Office',
dataIndex: 'LeftOffice',
width: 80,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
editor: new Ext.form.DateField({
format: 'm/d/Y'
}),
hidden: false
},{
header: "Income",
dataIndex: 'Income',
width: 100,
renderer: function(value, cell){
var str = '';
if(value > 1000000){
str = "<span style='color:#336600;'>$ " + value + "</span>";
} else if (value > 100000 && value < 1000000){
str = "<span style='color:#FF9900;'>$ " + value + "</span>";
} else {
str = "<span style='color:#CC0000;'>$ " + value + "</span>";
}
return str;
},
editor: new Ext.form.NumberField({
allowBlank: false,
allowDecimals: true,
allowNegative: false,
blankText: '0',
maxLength: 11
})
}]
);
PresidentsColumnModel.defaultSortable= true;

shaoen01
20 Jun 2011, 4:02 AM
The output of my JSON is:


({"total":"1","results":[{"0":"1","UserID":"1","1":"Mr","Title":"Mr","2":"fdsfds432","FirstName":"fdsfds432","3":"","MiddleName":"","4":"Aubry111","LastName":"Aubry111","5":"Xavier Aubry","FullName":"Xavier Aubry","6":"[email protected]","Email":"[email protected]","7":"","CompanyName":"","8":"","Website":"","9":"","Description":"","10":"2011-06-19 22:41:28","LastLogin":"2011-06-19 22:41:28","11":"2011-06-02 00:00:00","DateRegistered":"06\/02 00:00:00\/2011","12":"0000-00-00 00:00:00","DateModified":"0000-00-00 00:00:00","13":"2010-11-20 00:58:16","DateLastOrder":"2010-11-20 00:58:16","14":"0","EmailSubscription":"0","15":"4","UserTypeID":"4","16":"4","17":"Unregistered Customer","UserType":"Unregistered Customer","18":"UNREG_CUST","UserTypeCode":"UNREG_CUST"}]})
I went to the link you provided and it says there is an error. I then proceed to use the JSON array generated from the tutorial that was working and it says there was an error with the JSON array even though the date was displayed.

As for the date column, i am sure because when i use my Eclipse or IE to edit the Date, it does update. But it does not happen for Chrome or Firefox, the date does not even appear.

I just found out why the duplicate numbers you mentioned, it is due to
mysql_fetch_array($result). Once i switched to
mysql_fetch_object($result) those duplicates go away. But it still does not solve the problem though. Is there any debugger for IE perhaps?

scottmartin
20 Jun 2011, 5:34 AM
IE has a developer tools (F12) depending on the version your have, but IE is not the best.

I would change your getList() function to echo your actual JSON record instead of building it from data

ie:

change:


echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})';


to



echo '{ total: "1", "results": [ { "fieldname": "value", ... } ] }'


Change the date/times to just dates and see if that helps. Forget about the real data for now and change up the static data in the JSON record and see what is tripping it up.

Regards,
Scott.

scottmartin
20 Jun 2011, 5:45 AM
Here is what I have setup for my dates:

store:


{ name: 'date_requested', type: 'date', dateFormat: 'Y-m-d' },


grid column:


function render_date(val) {
val = Ext.util.Format.date(val, 'm/d/Y');
return val;
}

..

{
header: 'Requested',
dataIndex: 'date_requested',
renderer: render_date
}




{
total: "1",
"data": [
{
"id_request": "246",
"ticket_number": "R51639-5BB783EA",
"request_subject": "RIDEOVER TOTAL not recalculating on change",
"type_name": "Feature Request",
"project_name": "bmsHR",
"category_name": "CREW PAYROLL",
"priority_name": "Normal",
"status_name": "Completed",
"request_name": "BGUNN",
"assigned_name": "SMARTIN",
"response_name": "SMARTIN",
"complete_name": null,
"date_requested": "2011-04-01",
"date_assigned": "2011-04-01",
"date_response": "2011-04-01",
"date_complete": null,
"date_workaround": null,
"date_updated": "2011-04-06",
"request_note": "",
"response_note": ""
}
]
}



Regards,
Scott.

shaoen01
20 Jun 2011, 6:58 AM
I tried as you suggested and i think it is the datetime datatype of my column in mysql that is causing the problem.

So i used this row of static data:
echo '{"total":"1","results":[{"UserID":"2","Title":"miss","FirstName":"aaa","MiddleName":"","LastName":"aaa","FullName":"aaa aaa","Email":"[email protected]","CompanyName":"","Website":"","Description":"","LastLogin":"2011-06-19","DateRegistered":"2010-08-04","DateModified":"0000-00-00","DateLastOrder":"2010-08-04","EmailSubscription":"0","UserTypeID":"1","UserType":"Registered Customer","UserTypeCode":"REG_CUST"}]}';


I was able to display on Firefox. But if the code for the DateRegistered had the time inside, it would not work:

echo '{"total":"1","results":[{"UserID":"2","Title":"miss","FirstName":"aaa","MiddleName":"","LastName":"aaa","FullName":"aaa aaa","Email":"[email protected]","CompanyName":"","Website":"","Description":"","LastLogin":"2011-06-19","DateRegistered":"2010-08-04","DateModified":"0000-00-00","DateLastOrder":"2010-08-04 08:00:00","EmailSubscription":"0","UserTypeID":"1","UserType":"Registered Customer","UserTypeCode":"REG_CUST"}]}';


How do i handle the formatting and parsing of datetime field in mysql and display datetime in the grid or editorgrid?

scottmartin
20 Jun 2011, 7:15 AM
You could try something like: (untested)



dateFormat: 'm-d-Y H:i:s'




SELECT DATE_FORMAT(datetimefield, '%m-%d-%Y %H:%i:%s') AS datetimefield


There are several posted regarding this issue in forum as well.

Regards,
Scott.

shaoen01
20 Jun 2011, 4:05 PM
One problem solved. I changed my column model:

{
header: 'Date Registered',
dataIndex: 'DateRegistered',
width: 80,
format: 'd/m/Y',
renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
editor: new Ext.form.DateField({
format: 'Y-m-d H:i:s'

}),
hidden: false
}And then i added one more to the definition in the store:

{name: 'DateRegistered', type: 'date', dateFormat: 'Y-m-d H:i:s',mapping: 'DateRegistered'},Now the display of the grid seems a bit weird and off. Anyway, to make it such that it displays nicely?

26658

scottmartin
21 Jun 2011, 5:58 AM
Trying increasing the width from 80 for a datetime, or just remove the width.

Regards,
Scott.

shaoen01
22 Jun 2011, 6:19 AM
Hi Scott,

I tried removing the width for all the fields, but the display isn't really good. Any other suggestions?

26700

scottmartin
22 Jun 2011, 6:54 AM
To be honest, I have never seen this before.

Do you have a link to your app? Feel free to PM me the link if you do not feel comfortable posting it in the forum.

Perhaps someone who has been using ExtJS a bit longer has seen this and can chime in.

Regards,
Scott.

skirtle
23 Jun 2011, 5:20 PM
I've seen similar column width problems before. Most likely causes are custom CSS rules or using a browser that isn't supported by your ExtJS version. Which browser & Ext versions are you seeing this in?

shaoen01
23 Jun 2011, 10:49 PM
Scott:
This is a localhost testing at the moment, as i am just playing around with extjs so no online version of it.

skirtle:
I am following this tutorial here (http://www.sencha.com/learn/w/index.php?title=Tutorial:Grid_PHP_SQL_Part11)

I think it is version 2.2. The thing is if i use the latest version, it doesn't have some of the methods like i don't find ColumnModel, etc. I am really new to extjs and would like to have some tutorials i can follow. And it seems only the lower versions have it and this is what i need to do. Which is to help create a editor grid.

My Firefox is the latest: 5.0

I have tried with Firefox 4.0.1 but also the same problem.

skirtle
24 Jun 2011, 5:45 AM
I'm pretty sure Ext 2.2 doesn't support Firefox 4 or 5.

I sympathise with your desire to follow the tutorials but all you're doing is learning how things used to be done with a deprecated version of the library. It's not worth it.

The ExtJS 4 examples page has lots of examples to follow. The API docs have a number of tutorials and videos you can watch to try to get up to speed.

shaoen01
24 Jun 2011, 5:16 PM
I'm pretty sure Ext 2.2 doesn't support Firefox 4 or 5.

I sympathise with your desire to follow the tutorials but all you're doing is learning how things used to be done with a deprecated version of the library. It's not worth it.

The ExtJS 4 examples page has lots of examples to follow. The API docs have a number of tutorials and videos you can watch to try to get up to speed.

Thanks for the advise. Learning curve for newbies like me is quite high. But i will do my best. I have been trying on some of the examples with limited success. I will post my problem in another thread, thanks again.