PDA

View Full Version : retrieving a recordset into a DataStore



SSTFigleaf
23 Feb 2011, 2:01 PM
I'm building a demo app using ExtJS 3.31 and ColdFusion. It's a typical search form and results display. This is the main build (scaffold?) script

Ext.onReady(function() {

/*Data stores live in dataStore.js*/

var mPanel = new Ext.Panel({
renderTo:'content',
title:'Check out the CRRRAZY Selection of Movies',
layout:'border',
height:400,
html: 'stuff goes here',
items:[{
region:'west',
layout:'fit',
width:200,
frame:true,
border:false,
items:{
xtype:'searchForm'
}
},{
region:'center',
layout:'fit',
frame:true,
border:false,
items:{
xtype:'searchResults'
}
},{
region:'east',
layout:'fit',
frame:true,
border:false,
width:200,
html:'Something'
}]
});
});


The west region contains the search form:


/*form component, extends Ext.form.FormPanel*/
searchForm = new Ext.extend(Ext.form.FormPanel,{
/*
initialize component and dump item values into a config variable,
otherwise Ext throws a cryptic message "this.items.add is not a function"
*/
initComponent:function(){
var config = {
name:'searchForm',
id:'searchForm',
title:'Search Movies',
frame:true,
url:'model/getSearchResults.cfm',
defaultType:'textfield',
labelWidth:75,
items:[
{
fieldLabel:'Movie Name',
name:'mName',
allowBlank:true

},{
fieldLabel:'Director First Name',
name:'directorFname',
allowBlank:true
},
{
fieldLabel:'Director Last Name',
name:'directorLname',
allowBlank:true
},{
xtype:'datefield',
fieldLabel:'Release Date',
name:'date',
value:'01/01/1901'
},
{/*combo box*/
xtype:'combo',
hiddenName:'genre',
hiddenValue:0,
fieldLabel:'Genre',
mode:'local',
emptyText:'Select a Genre',
forceSelection:true,
store: genres,
displayField:'genre',
valueField:'id',
width:100
/*end combo box*/
}
],
buttons: [{
text: 'Search',
handler:this.getMovies,
scope:this
}
]
}

Ext.apply(this, Ext.apply(this.initialConfig, config));
searchForm.superclass.initComponent.apply(this, arguments);
},
onRender: function(){
searchForm.superclass.onRender.apply(this, arguments);


},

getMovies: function(){
var basicForm = this.getForm();
basicForm.submit()
}


});

Ext.reg('searchForm', searchForm);


The center region will house the search results:

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="padding: 10px;">',
' <div style="float: left; padding-right: 15px;">',
' <img width="125" src="{[ (typeof urlPrefix == "undefined" ? "http://localhost/exttraining/labs/moviestore" : urlPrefix) + "/images/" + values.thumbnail ]}" />',
' </div>',
' <div style="float: left;">',
' <table>',
' <tr bgcolor="lightgray">',
' <td width="125">Title:</td>',
' <td width="125" valign="top">Director:</td>',
' <td width="125">Release Date:</td>',
' <td width="125">Genre:</td>',

' </tr>',
' <tr>',
' <td>{title}</td>',
' <td>{directorFname}&nbsp;{directorLname}</td>',
' <td>{releaseDate}</td>',
' <td>{genre}</td>',

' </tr>',
' </table>',
' </div>',
' <div class="x-clear">&nbsp;</div>',
'</div>',
'</tpl>'
);

searchResults = new Ext.extend(Ext.Panel,{
title: 'Movie Search Results',
autoScroll: true,
initComponent:function(){
items: new Ext.DataView({
store: searchResultsStore,
tpl: tpl,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display'
})
searchResults.superclass.initComponent.call(this);
}
});
Ext.reg('searchResults', searchResults);


and the data store(s) live in their own .js file


/*creates dropdown store*/
var genres = new Ext.data.Store({
url:'cfc/baseADO.cfc',
baseParams:{
method:'getGenreDrop',
returnFormat:'JSON',
dsn: 'cpMovieStore'
},
reader:new Ext.data.CFQueryReader({
id:'PK_GenreID', // matches the 'name' attribute of your id field
totalProperty:'totalrowcount' // Case Specific
},[
{name: 'id', mapping: 'PK_GenreID'},
{name: 'genre', mapping: 'genre'}
]),
autoLoad:true
});

/*Creates Store for Movies Selection*/

var searchResultsStore = new Ext.data.Store({
/*empty 'cause I'm not sure what to do here*/
})



I've got the combo box working and the form will talk to my back end CF Code (I get can get a CF Query Recordset back and serialize it into JSON). I'm stuck at populating and/or updating the store for the results page (and displaying the results) based on what's returned from the search form.

Any suggestions?

Condor
24 Feb 2011, 7:40 AM
Add an 'actioncomplete' listener to your form and apply the template to the result page using the action.result.

SSTFigleaf
24 Feb 2011, 9:47 AM
thank you sir, I'll give that a shot when I get a spare second to work on it :)