how to move data from one page to another page in Senchatouch - extjs

Question

I am developing one application in sencha touch, I am new to this technology
first see my code
View-->Main.js
Ext.define('DealsList.view.Main', {
extend: 'Ext.Container',
xtype: 'mainlist',
requires: [
'Ext.TitleBar',
'Ext.Toolbar'
],
config: {
fullscreen:true,
scrollable:false,
layout: {
// type:'fit'
},
items: [
{
xtype: 'toolbar',
//ui : 'green',
docked: 'top',
title: 'SampleDeals'
},
{
xtype:'formpanel',
fullscreen:false,
scrollable:false,
centered:true,
style: 'background-color: gray',
width:'90%',
height:'70%',
items:[
{
xtype:'selectfield',
name:'Grade',
label:'Grade',
options:[
{
text:'All',
value:'Agrade'
},
{
text:'Drink',
value:'Bgrade'
},
{
text:'Entertainment',
value:'cgrade'
},
{
text:'Food',
value:'Dgrade'
}
]
},
{
xtype:'searchfield',
id:'usernametext',
name:'ZipCode',
placeHolder:'ZipCode',
top:'25%'
},
{
xtype:'button',
text:'Gps On/Off',
id:'btnList',
ui:'action',
height:33,
top:'40%',
left:'5%',
right:'5%'
},
{
xtype:'selectfield',
name:'Grade',
label:'Grade',
top:'55%',
options:[
{
text:'2 miles',
value:'Agrade'
},
{
text:'5 miles',
value:'Bgrade'
},
{
text:'10 miles',
value:'cgrade'
},
{
text:'15+ miles',
value:'Dgrade'
}
]
},
{
xtype:'button',
text:'My Favorites',
id:'favbutton',
ui:'action',
width:150,
height:33,
top:'75%',
left:'5%'
}
,{
xtype:'button',
text:'Go',
id:'gobutton',
ui:'action',
width:100,
height:33,
top:'75%',
right:'5%',
handler:this.regButton,
scope:this
}
]
}
]
}
});
view-->ListPage.js
Ext.define('DealsList.view.ListPage', {
extend: 'Ext.List',
xtype: 'listPage',
requires:['Ext.data.Store','Ext.dataview.List','Ext.data.proxy.JsonP'],
config: {
// itemTpl: '<table><tr><td><img src="{imageUrl}" width="70%" height="70%"/></td><td> </td><td><div class=\"list-item-firstname\">{firstName}</div><div class=\"list-item-lastname\">{lastName}</div></td></tr></table>',
itemTpl: ' <table><tr>' +
'<td><img src="{logopath}"/></td>' +
'<td> </td>' +
'<td><div><h3>{subcategoryname}</h3></div>' +
'<div><h1>{specialinfo}</h1></div>' +
'<div>Price:{originalprice}</div>' +
'<div><h1>{fromdate}</h1></div>' +
'</td></tr></table>',
store: 'DetailStore',
onItemDisclosure: true,
items:
[
{
xtype:'toolbar',
title:'SampleDeals',
docked:'top',
items:[
{
xtype:'button',
id:'backbutton',
ui:'back',
text:'back'
}
]
}
]
}
});
view-->DealsDescription.js
Ext.define('DealsList.view.DealsDescription', {
extend: 'Ext.Container',
xtype: 'dealsdescription',
requires:['Ext.Toolbar','Ext.field.Email','Ext.field.Password'],
config: {
fullscreen:true,
scrollable:false,
layout: {
// type:'fit'
},
items: [
{
xtype:'toolbar',
docked:'top',
title:'SampleDeals',
items:[
{
xtype:'button',
id:'backbutton',
ui:'back',
text:'back'
}
]
},
{
xtype:'label',
html: '<h1>{subcategoryname}</h1>'
//html: ["test test"].join("") '',
},
{
xtype:'label',
html: '<h1>{dealtimestampfrom}</h1>'
//html: ["test test"].join("") '',
},
{
xtype:'label',
html: '<h1>{specialinfo}</h1>'
//html: ["test test"].join("") '',
},
{
xtype:'label',
html: '<h1>{originalprice}</h1>'
//html: ["test test"].join("") '',
},
{
xtype:'button',
text:'Button',
id:'xxxbutton',
ui:'action',
top:'30%',
left:'35%',
right:'35%',
handler:this.saveButton
}
]
}
});
Store-->DetailStore.js
Ext.define('DealsList.store.DetailStore', {
extend: 'Ext.data.Store',
config: {
model: 'DealsList.model.DetailModel',
autoLoad: true,
remoteFilter: true,
//sorters: 'leadid',
grouper: {
groupFn: function(record) {
// return record.get('user_id')[0];
return record.get('dealtimestampfrom')[0];
}
},
proxy: {
type: 'ajax',
//url: 'http://113.193.181.53:8081/Test/chat/index.php/chat/onlineusers',
url:'http://www.nomdeal.com/services/getbusinessoffers?catid=All&subcatid=All&lat=17.4418224&lng=78.4752594&dist=1000&userid=100&zipcode=&pagesize=1',
//headers: {'Authorization': 'Basic GVU0IXZ6cFGzczE='},
reader: {
type: 'json',
model: 'DealsList.model.DetailModel',
// rootProperty: 'online-users'
record:'businessholder',
rootProperty: 'specialinfo'
// rootProperty:''
}
}
}
});
Model-->DetailModel.js
Ext.define('DealsList.model.DetailModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: "dealtimestampfrom", type: "string"},
{name: "dealtimestampto", type: "string"},
{name: "subcategoryname", type: "string"},
{name: "specialinfo", type: "string"},
{name: "originalprice", type: "string"},
{name: "logopath", type: "string"},
{name: "fromdate", type: "string"}
]
}
});
Controller-->dealscontroller.js
Ext.define('DealsList.controller.dealscontroller', {
extend: 'Ext.app.Controller',
config: {
refs: {
BtnList:'#btnList',
listPage:'listPage',
mainpage:'mainlist',
backHome:'#backbutton',
goButton:'#gobutton',
DealsDescriptionpage:'dealsdescription'
},
control: {
goButton:
{
tap:'mainCategories'
},
backHome:
{
tap:'backToHome'
},
listPage:
{
itemtap: 'ListItemSelect'
}
}
},
// Transitions
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
//called when the Application is launched, remove if not needed
launch: function(app) {
},
mainCategories:function()
{
//alert('sf');
Ext.Viewport.animateActiveItem(this.getListPage(), this.slideLeftTransition);
},
backToHome:function()
{
Ext.Viewport.animateActiveItem(this.getMainpage(), this.slideLeftTransition);
},
ListItemSelect : function (list, index, element, record)
{
Ext.Msg.alert('Alert',record.get('subcategoryname'));
Ext.Viewport.animateActiveItem(this.getDealsDescriptionpage(), this.slideLeftTransition);
}
});
app.js
//<debug>
Ext.Loader.setPath({
'Ext': 'touch/src',
'DealsList': 'app'
});
//</debug>
Ext.application({
controllers: ["dealscontroller"],
name: 'DealsList',
requires: [
'Ext.MessageBox'
],
views: ['Main','ListPage','DealsDescription'],
stores:['DetailStore'],
models:['DetailModel'],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function()
{
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
var mainPage = {
xtype:'mainlist'
};
var listpage = {
xtype:'listPage'
};
var dealsdescription = {
xtype:'dealsdescription'
};
// Initialize the main view
Ext.Viewport.add(([mainPage,listpage,dealsdescription]));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
In my app's first screen I have a go button. When I click on this button it displays a list(listpage.js) my problem is, when I click on a listitem data is not moving to the nextpage(DealsDescription.js). My requrement is that the data moves to next page and is appended to that xtype:label(DealsDescription.js screen)

Answer 1

Most of us set up a one page application. So you switch cards (or tabs or so...) in staid of refreshing the page. This way you can always get to the data though javascript. Navigating up or down the component tree.
Up:
mycomponent.up() //go up one level
mycomponent.up(selector) //go up till you reach the component meeting the criteria
Down:
mycomponent.query(someComponentQuery) //go down and find all components meeting the criteria
mycomponent.getComponent(componentId) //get the (direct) child with given Id
If you do want to load a new page you need a whole new app.. So you could use session or local storage to transfer data between pages. (use a sessionstorageProxy or localstorageProxy on your store/model).

Answer 2

Basically you have to declare a data holder variable in view's config and while creating this view you can initialize it with whatever data you want.
var myView = Ext.create('DealsList.view.DealsDescription', {
rec : someData //this would contain all data
});
Then in initialize you can access this rec like this:
var data = this.config.rec;
then you can create all internal components and add to this view's container.
var items = [{
xtype:'toolbar',
docked:'top',
title:'SampleDeals',
items:[
{
xtype:'button',
id:'backbutton',
ui:'back',
text:'back'
}
]
},
{
xtype:'label',
html: '<h1>'+data.subcategoryname+'</h1>'
}];
this.setItems(items);