我正在开发一个sencha touch应用程序，我是这项技术的新手 首先看我的代码
视图 - ＆GT; 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
}
]
}
]
}
});
视图 - ＆GT; 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'
}
]
}
]
}
});
视图 - ＆GT; 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
}
]
}
});
商店 - ＆GT; 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:''
}
}
}
});
模型 - ＆GT; 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"}
]
}
});
控制器 - ＆GT; 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();
}
}
);
}
});
在我的应用程序的第一个屏幕中，我有一个go按钮。当我点击这个按钮时，它显示一个列表（listpage.js）我的问题是，当我点击一个listitem数据时没有移动到nextpage（DealsDescription.js）。我的要求是数据移到下一页并附加到xtype:label（DealsDescription.js屏幕）
答案 0 :(得分：0)
我们大多数人都设置了一个单页应用程序。因此，您需要在刷新页面时切换cards（或标签符号......）。这样你就可以通过javascript获取数据。向上或向下导航组件树。
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
如果您确实要加载新页面，则需要一个全新的应用程序..因此，您可以使用会话或本地存储在页面之间传输数据。 （在商店/模型上使用sessionstorageProxy或localstorageProxy）。
答案 1 :(得分：0)
基本上你必须在视图的配置中声明一个数据持有者变量，在创建这个视图时你可以用你想要的任何数据来初始化它。
var myView = Ext.create('DealsList.view.DealsDescription', {
rec : someData //this would contain all data
});
然后在初始化中，您可以像这样访问rec：
var data = this.config.rec;
然后您可以创建所有内部组件并添加到此视图的容器中。
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);