![](/img/trans.png)
[英]Sencha Touch: List detail .setActiveItem undefined
[英]Sencha Touch 2 Ext.List - programmatically add detail view
我试图基于列表中的录音项目添加不同的详细信息视图。
这是一些代码... App.js
Ext.application({
name: 'App',
controllers: ['Main'],
views: ['Viewport', 'HomePage'],
stores: ['HomePageItems'],
models: ['HomePageItem'],
launch: function () {
Ext.Viewport.add(Ext.create('App.view.Viewport'));
}
});
Viewport.js
Ext.define("App.view.Viewport", {
extend: 'Ext.navigation.View',
requires: [ 'App.view.realestate.Realestate',
'App.view.HomePage',
'App.view.jobs.Jobs',
'App.view.other.Other',
'App.view.vehicles.Vehicles'
],
config: {
items: [
{
xtype: 'homepage'
}
]
}
});
HomePage.js(xtype =“ homepage”)
Ext.define('App.view.HomePage', {
extend: 'Ext.List',
xtype: 'homepage',
id: 'homepage',
config: {
title: 'Oglasi',
itemTpl: '<strong>{name}</strong><p style="color:gray; font-size:8pt">{description}</p>',
store: 'HomePageItems',
onItemDisclosure: true
}
});
Main.js
Ext.define('App.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
main: '#homepage'
},
control: {
'homepage': {
disclose: 'HookUpDetailView'
}
}
},
HookUpDetailView: function (element, record, target, index, ev) {
// TO DO: I have 4 differente views to load programmaticaly based on selected item in List
//'App.view.realestate.Realestate'
//'App.view.jobs.Jobs'
//'App.view.other.Other'
//'App.view.vehicles.Vehicles'
}
});
我找到一个示例,但对我不起作用(不存在推方法)
this.getMain().push({
xtype: 'realestatehome'
});
预先感谢!
您正在寻找的方法是
http://docs.sencha.com/touch/2-0/#!/api/Ext.Container-method-add
this.getMain().add({xtype: 'realestatehome'});
但是,您所拥有的没有意义,realestatehome是一个列表,您无法在其下添加组件。 您需要从上面的链接中了解布局
推应该起作用。 您可以尝试这样的事情。
HookUpDetailView: function (list, record) {
if(record.data.description==='real estate'){
this.getRealEstate().push({
xtype: 'realestatehome',
title: record.data.description,
data. record.data
});
if(record.data.description==='Vehicles'){
this.getVehicles().push({
xtype: 'vehicles',
title: record.data.description,
data. record.data
});
}
}
特定的视图可能看起来像
Ext.define('App.view.RealEstateHome', {
extend: 'Ext.Panel',
xtype: 'realestatehome',
config: {
styleHtmlContent: true,
scrollable: 'vertical',
tpl: [
'{description}, {example}, {example}, {example}'
]
}
});
访问您的特定视图的引用应类似于
refs: {
realEstate: 'realestatehome',
vehicles: 'vehicleshome'
},
希望能有所帮助
我在控制器this.getMain()中弄错了,get main返回了Ext.List,我需要具有'push'方法的Ext.navigation.View。
所以...我在视口中添加了xtype和id(“容器”),控制器中的快速更改解决了我的麻烦...
refs: {
main: '#homepage',
container: '#container'
}
而不是获取Ext.List对象
this.getContainer().push({
xtype: 'realestatehome'
});
而这项工作就像一个魅力:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.