PDA

View Full Version : Navigating back through opened things?



johnwards
20 Oct 2010, 11:30 PM
Hello, I am taking my first steps with Sencha touch. The results are just what I am after, getting there however is a struggle to get how sencha is put together. I am slowly figuring it out but sometimes the way the code works is a bit WTF.

I am trying to build a very simple app that does the following.

1) Has three tabs, Search nearby (geo), Quick Keyword Search, Category Search.
2) Each of the tabs search returns a list of results
3) Each of the rows are click able to show a bit more information.

I have figured out the tabs okay I think.

Like so:


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {

var location = new Ext.Container({
iconCls: 'search',
title: 'Location Search',
items: [new Ext.Component({
html: '<img src="images/gfb.gif" />'
})]
});

var quick = new Ext.Container({
iconCls: 'search',
title: 'Quick Search',
scroll: 'vertical',
items: [new Ext.Component({
html: '<img src="images/gfb.gif" />'
})]
});

var category = new Ext.Component({
iconCls: 'search',
title: 'Category Search',
html: '<img src="images/gfb.gif" /><p>Category</p>'
});
var tabpanel = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
scroll: 'horizontal',
sortable: false,
layout: {
pack: 'center'
}
},
cls: 'card1',
items: [
location,
quick,
category
]
});
}
});

That works great. No difference between the tabs I know but I'm building up to that...

Right, the first thing I want to work on is the Keyword search tab as that is the simplest one to test for this app.

So I add a form.


var quickFormBase = {
url: "../quicksearch.php?output=json",
items: [{
xtype: 'fieldset',
instructions: 'The keyword search is great if you know the name of the company you are looking for, or the particular service you need to find.<p><br />To narrow it down to an area include the town or county name in your query</p>',
defaults: {
required: false,
labelAlign: 'left'
},
items: [{
xtype: 'textfield',
label: 'Search',
name : 'inpquery',
showClear: true,
autoCapitalize : false
}]
}],
listeners : {
submit : function(form, result){
console.log('results', result.SearchResults.MainResults.Advert);
},
exception : function(form, result){
console.log('failure', Ext.toArray(arguments));
}
}
};

var quickForm = new Ext.form.FormPanel(quickFormBase);


So my quick tab config now looks like this:



var quick = new Ext.Container({
iconCls: 'search',
title: 'Quick Search',
scroll: 'vertical',
items: [new Ext.Component({
html: '<img src="images/gfb.gif" />'
}),quickForm]
});

I now have a form looking exactly how I want and hooked into my json search and returning adverts to the console. Great!

Now I want to create a list view that has a top bar with a back button. This I am pretty sure is not the way to set this up, but I am really struggling to find examples on how to do this as the example with the source have a complicated setup, and the simple ones don't do what I am after.

I now add a model config at the top of my index.js file to define my Advert model


Ext.regModel('Advert',{
fields: [
{name: 'advertid', type:'int'},
{name: 'Clientname', type:'string'},
{name: 'telephone', type:'string'},
{name: 'mobile', type:'string'},
{name: 'fax', type:'string'},
{name: 'url', type:'string'},
{name: 'email', type:'string'},
{name: 'additionalinfo', type:'string'},
{name: 'address1', type:'string'},
{name: 'address2', type:'string'},
{name: 'address3', type:'string'},
{name: 'postcode', type:'string'},
{name: 'city', type:'string'},
{name: 'Countyname', type:'string'},
{name: 'longitude', type:'string'},
{name: 'latitude', type:'string'}
]
});

In my form success listener I do the following:


listeners : {
submit : function(form, result){

var quickstore = new Ext.data.JsonStore({
model : 'Advert',
data : result.SearchResults.MainResults.Advert
});

var listConfig = {
tpl: '<tpl for="."><div class="advert">{Clientname}</div></tpl>',
scope: this,
itemSelector: 'div.advert',
singleSelect: true,
store: quickstore,
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
text: 'Back',
ui: 'back',
handler: function(){
//Do some magic and make it go back, ta!
}
}
]
}
]
};
var list = new Ext.List(Ext.apply(listConfig, {
fullscreen: true
}));
},
exception : function(form, result){
console.log('failure', Ext.toArray(arguments));
}
}

This works however it doesn't slide in as I would like, as it does when clicking the icons in the bottom tab bar.

Now this is where I fall down, I can't figure out how I make the back button work to take me back to the keyword search.

I have found setCard and setActiveItem but I don't seem able to access those in the "this" context in the result listener function.

Could someone give a simple example of how to do this?