PDA

View Full Version : Newbie problem with Store / Combo



dalehans
2 May 2009, 2:07 PM
Hi everyone,
I have just downloaded Ext this week and bought the Learning Ext JS book. I am working through it and got to the Forms section. I tried to convert the local store to a remote store and hit a problem.

I seem to be getting the store to load FireBug Console message says it loads and cfdump says the query is returning the expected records. (ColdFusion CFC), yet the form displays and the combo box is an empty list. I'm sure I am missing something basic and obvious, but I can't see it after looking at it for a couple hours. Can anyone point out my oversight?

CODE:
CFC


<cfcomponent displayName="Genres" hint="Handles all data access for movie Genres.">

<cffunction name="getGenreList" access="public" returnType="query" output="false" hint="Returns all the Genres.">
<cfset var qGetGenres = "">

<cfquery name="qGetGenres" datasource="WebsiteContent">
SELECT ID, GNames, GSubnames, GNumber
FROM Genres g
ORDER BY GNames
</cfquery>

<cfreturn qGetGenres>
</cffunction>

<cffunction name="getGenreListForGrid" access="remote" output="false" hint="Returns all the Genres in the format for the JSON GenreList grid.">
<cfset var qGetGenresForGrid = "">
<cfset var qGenreList = getGenreList()>

<cfquery name="qGetGenresForGrid" dbtype="query">
SELECT ID, GNames, GSubnames, GNumber,
GNames + '-' + GSubnames AS GFullName
FROM qGenreList
</cfquery>

<cfreturn QueryConvertForGrid(qGetGenresForGrid, 1, qGetGenresForGrid.recordcount)>
</cffunction>
</cfcomponent>


Ext JS


var genre_colModel = new Ext.grid.ColumnModel([
{id:'ID', header: "ID", width: 20, sortable: true, dataIndex: 'ID'},
{id:'GNames', header: "GNames", width: 200, sortable: true, dataIndex: 'GNAMES'}
]);

var myDataModel = [
{name: 'ID', mapping: 'ID'},
{name: 'GNAMES', mapping: 'GNAMES'}
];

var myCFReader = new Ext.data.CFQueryReader({id:'ID'},myDataModel);

var genres = new Ext.data.Store({
url: 'FirstTable.cfc?method=getGenreListForGrid',
reader: myCFReader,
listeners: {
loadexception: function(proxy, store, response, e) {
console.log("Response Text?"+response.responseText);
console.log("dgStore Message \n"+"Proxy: "+proxy+"\n"+"Store: "+store+"\n"+"Response: "+response+"\n"+"Message: "+e.message);
},
load: function(){
console.log('load Worked!');
}
}
});
genres.load();

var movie_form = new Ext.FormPanel({
url: 'movie-form-submit.php',
renderTo: document.body,
frame: true,
title: 'Movie Information Form',
width: 250,
items: [{
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title',
allowBlank: false
},{
xtype: 'textfield',
fieldLabel: 'Director',
name: 'director',
vtype: 'name'
},{
xtype: 'datefield',
fieldLabel: 'Released',
name: 'released',
disabledDays: [1,2,3]
},{
xtype: 'radio',
fieldLabel: 'Filmed In',
name: 'filmed_in',
boxLabel: 'Color'
},{
xtype: 'radio',
hideLabel: false,
labelSeparator: '',
name: 'filmed_in',
boxLabel: 'Black & White'
},{
xtype: 'checkbox',
fieldLabel: 'Bad Movie',
name: 'bad_movie'
},{
xtype: 'combo',
name: 'genre',
mode: 'remote',
emptyText: 'Select a genre...',
fieldLabel: 'Movie Genre',
store: genres,
displayField:'GNAMES',
width: 120
}]
});
});



Thanks for your help.

dalehans
2 May 2009, 7:17 PM
Never mind.
At long last I found it.

{
xtype: 'combo',
store: genres,
name: 'genre',
mode: 'local', <-----------
emptyText: 'Select a genre...',
fieldLabel: 'Movie Genre',
valueField: 'ID',
displayField:'GNAMES',
width: 120
}

OH Also, if any other Newbie reads this and is getting errors trying to return their store. Check if you have Debug enabled on your development box. If so Add:

<cfsetting showdebugoutput="false">

In your returning CFC function to disable the debug output. It was messing with the JSON translate.