PDA

View Full Version : Learning Ext JS Book questions



BlackBerry
14 Nov 2009, 12:19 PM
For anyone who has read the book and can answer my question(s) that I post in here please do so.

Note: I do not have php nor do I know anything about php so I am trying to decipher the php into cfm. I have created a MS SQL Server DB to use in place of whatever db is specified by the book.

Q1. page 48
I have been trying to get the load from the database to display in the example code, however it is not displaying. I am sure its just a matter of how I am setting the data on the server prior to my call for SerializeJSON(dbData) in coldfusion. If somone could tell me or past a snip of code of how I am to format the data on the server prior to serializing it I am sure that would fix it.

BlackBerry
14 Nov 2009, 2:22 PM
Below is what I am trying in CF and after it is the response format.


<cfscript>
// Generate the JSON feed as a JavaScript function.
dbStat = StructNew();
dbResults = StructNew();
if(extjsData.recordCount == 0){
dbStat.success = 'false';
}
else{
dbStat.success = 'true';
dbResults.rows = arrayNew(1);

for (i=1;i LTE extjsData.Recordcount; i=i+1){
dBEntry=StructNew();
dBEntry.id = extjsData.id[i];
dBEntry.genre_name = extjsData.genre_name[i];
dBEntry.sort_order = extjsData.sort_order[i];
arrayAppend(dbResults.rows, dBEntry);
} // for
} // if
jsonResponse_dbStat = SerializeJSON(dbstat);
jsonResponse_dbResults = SerializeJSON(dbResults);
theJSON = jsonResponse_dbStat & jsonResponse_dbResults;
writeOutput(theJSON);
</cfscript>

--- taken from firebug output ---
{"SUCCESS":true}
{"ROWS":[{"ID":1,"SORT_ORDER":0,"GENRE_NAME":"Comedy"},{"ID":2,"SORT_ORDER":1,"GENRE_NAME":"Drama"},{"ID":3,"SORT_ORDER":2,"GENRE_NAME":"Action"},{"ID":4,"SORT_ORDER":3,"GENRE_NAME":"Mystery"}]}

It would appear to me that I have the correct format for the response based on what I can decipher from the book. However, I can not get the form to populate with values from the database. If I plug the coded values back into the file and not try to obtain them from the DB then the drop down field loads the values.

BlackBerry
14 Nov 2009, 3:10 PM
Breaking it down further. If I have this combobox

{
xtype: 'combo',
name: 'genre',
fieldLabel: 'Genre',
// local | remote
mode: 'local',
store: genres,
displayField: 'genre_name',
width: 130,
listeners: {
select: function (f,r,i){
if(i==0){
Ext.Msg.prompt('New Genre', 'Name', Ext.emptyFn);
}
}
}
}
And this Reader

var genres = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'genre_name'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url:'data/genres.cfm' (http://www.extjs.com/forum/'data/genres.cfm')
}),
autoLoad: true
});

:(( How do i get the darn data into the combo box?? ? ? ? IVE BEEN AT IT ALL DAY. The book is not telling me stuck on page 48

hendricd
15 Nov 2009, 6:17 AM
@Blackberry - Javascript is a case-sensitive language:


var genres = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'genre_name'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url:'data/genres.cfm' (http://www.extjs.com/forum/%27data/genres.cfm%27)
}),
autoLoad: true
});

'success' !== 'SUCCESS'

Fix that and try again. ;)

BlackBerry
15 Nov 2009, 7:53 AM
Here is the entire snippet i have reduced the code down to and still nothing populates in the drop box.

Ext.onReady(
function(){
var genres = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['ID', 'GENRE_NAME'],
root: 'ROWS'
}),
proxy: new Ext.data.HttpProxy({
url:'data/genres.cfm' (http://www.extjs.com/forum/'data/genres.cfm')
}),
autoLoad: true
});
var movie_form = new Ext.FormPanel(
{
url: 'movie-form-submit.cfm',
renderTo: document.body,
frame: true,
title: 'Movie Information Form',
width: 250,
items: [
{ // page 47 include
xtype: 'combo',
width: 130,
name: 'genre',
fieldLabel: 'Genre',
mode: 'local',
store: genres,
displayField: 'GENRE_NAME'
}
]
}
);
} // function
); // onReady
Firefox still shows that I have the following response.

{"SUCCESS":true}{"ROWS":[{"ID":1,"SORT_ORDER":0,"GENRE_NAME":"Comedy"},{"ID":2,"SORT_ORDER":1,"GENRE_NAME":"Drama"},{"ID":3,"SORT_ORDER":2,"GENRE_NAME":"Action"},{"ID":4,"SORT_ORDER":3,"GENRE_NAME":"Mystery"}]}

Thank you for your assistance.

hendricd
15 Nov 2009, 8:10 AM
@BlackBerry -- Keep going, you're not done yet. /:)



Ext.onReady(
function(){
var genres = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['ID', 'GENRE_NAME'],
root: 'ROWS'
}),


Where's your totalProperty ?

You might need to define a successProperty too (since you're using UPPERCASE for everything).

Review the Reader requirements (http://www.extjs.com/deploy/dev/docs/?class=Ext.data.JsonReader) again (then the book).

BlackBerry
15 Nov 2009, 8:23 AM
I purchased the book in anticipation that it will say what you need to do. I did not realize that I was to try and decipher when and where the book lacks in instructions. Instructions are very easy to spell out. If I sound a bit harsh sorry but I am getting rather frusterated over spending $40.00 for the book and having more questions than answers just on the first 50 pages I have been going through.

Can someone please PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE
Just post the code for a combobox element that functions along witht the datastore section so I may see what I am missing. API just like in any language is a refernce I see it as for things that you already know and I do not find them all to helpfull when trying to learn and build things.

Another thought. Maybe its not the code at all. Maybe its my JSON formated data. Is it correct? The book does not state what the format should look like.

hendricd
15 Nov 2009, 8:32 AM
@BlackBerry -- You are taking an UPPERCASE approach with your JSON response.

That is the bulk of your problem. The Reader CAN accomodate it, but you would need to be willing to examine the actual source code of the reader to figure out why 'what you are sending back' is not compatible by default.

The online documentation link I referred you to, has an actual sample JSON response that will work.

You are correct. In no public document source does it say 'Uppercase data member-names are, will, or should be a problem'. Then again, few have ever taken the path you have either. :-?

You might want to direct specific book feedback directly to the author.

Good luck.

BlackBerry
15 Nov 2009, 8:39 AM
Hendricd,

I really appreciate you giving me some time on this. Regarding the UPPERCASE in the JSON that is all being done by the server (why? I do not know). However during my last post I ran across another post on the forum with a slightly different json format and so I modified how the data was being assembled on the server. The Drop box now populates with the data from the server. Here is the format that is to be used for the demo. from the book on page 49.

{"SUCCESS":true,"ROWS":[{"ID":1,"SORT_ORDER":0,"GENRE_NAME":"Comedy"},{"ID":2,"SORT_ORDER":1,"GENRE_NAME":"Drama"},{"ID":3,"SORT_ORDER":2,"GENRE_NAME":"Action"},{"ID":4,"SORT_ORDER":3,"GENRE_NAME":"Mystery"}]}

and here is the CF code I had used to assemble it for anyone out there that is using CF and not PHP

<cfsetting showdebugoutput=false >
<cfprocessingdirective suppresswhitespace="yes">
<cfcontent type="application/x-javascript">
<cfquery name=extjsData dbtype=query datasource=ExtJS>
SELECT id, genre_name, sort_order
FROM genres
</cfquery>
<cfscript>
// Generate the JSON feed as a JavaScript function.
dbStat = StructNew();
if(extjsData.recordCount == 0){
dbStat.success = 'false';
}
else{
dbStat.success = 'true';
dbStat.rows = arrayNew(1);

for (i=1;i LTE extjsData.Recordcount; i=i+1){
dBEntry=StructNew();
dBEntry.id = extjsData.id[i];
dBEntry.genre_name = extjsData.genre_name[i];
dBEntry.sort_order = extjsData.sort_order[i];
arrayAppend(dbStat.rows, dBEntry);
} // for
} // if

jsonResponse_dbStat = SerializeJSON(dbstat);
theJSON = jsonResponse_dbStat;
writeOutput(theJSON);
</cfscript>
</cfprocessingdirective>

BlackBerry
15 Nov 2009, 10:14 AM
Final note on this question.
I was trying to figure out why things were not working between the example downloaded code, my code and the book. After re-reading the section in the book (pg 48) I noticed the json output it was showing and realized that it was not showing the SUCCESS value....
Why and where did I end up having SUCCESS in my code?
I found out where and why. The code that goes with the book that you can download from packt's site contains the success: in its php server side code whereas the book does not. That was how this whole mess started /:).
So, Attention to detail can prevent people from wasting enormous amounts of time. I hope these posts of mine help others who are getting started.

nickweavers
15 Nov 2009, 11:39 AM
Final note on this question.
I was trying to figure out why things were not working between the example downloaded code, my code and the book. After re-reading the section in the book (pg 48) I noticed the json output it was showing and realized that it was not showing the SUCCESS value....
Why and where did I end up having SUCCESS in my code?
I found out where and why. The code that goes with the book that you can download from packt's site contains the success: in its php server side code whereas the book does not. That was how this whole mess started /:).
So, Attention to detail can prevent people from wasting enormous amounts of time. I hope these posts of mine help others who are getting started.

From page 6 of same book:


Although we have taken every care to ensure the accuracy of our contents, mistakes do happen. If you find a mistake in one of our books - may be a mistake in text or code - we would be grateful if you would report this to us. By doing this you can save other readers from frustration and help to improve subsequent versions of this book.

The section goes on to describe how to report the errata, and how to view currently reported errata.

There is also an error on page 113 that I stumbled on; In the listener example, e.commit and e.reject should be e.record.commit and e.record.reject respectively. You will be pleased to find that one of the larger examples towards the back of the book (page 239) was written just for you ;)