Sencha Touch 2 Ext.List - 以编程方式添加详细视图答案

【问题标题】：Sencha Touch 2 Ext.List - programmatically add detail viewSencha Touch 2 Ext.List - 以编程方式添加详细视图
【发布时间】：2012-05-14 21:33:37
【问题描述】：

我正在尝试根据列表中的录音项目添加不同的详细信息视图。

我的主屏幕正在使用列表组件，并且此视图显示 ['Real Estate'、'Vehicles'、'Jobs']... 作为菜单项。
根据列表中的选定项目，我想显示不同的视图。
- 我想遵循 MVC 设计模式..

这里有一些代码... 应用.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 = "主页")

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'
    });

提前致谢！

【问题讨论】：

标签： javascript sencha-touch extjs sencha-touch-2 ext.list

【解决方案1】：

你要找的方法是

http://docs.sencha.com/touch/2-0/#!/api/Ext.Container-method-add

this.getMain().add({xtype: 'realestatehome'});

但是你有什么没有意义，realestatehome 是一个列表，你不能在它下面添加一个组件。您需要从上面的链接中阅读有关布局的信息

【讨论】：

是的...你是对的，这没有意义（facepalm）。发布后几分钟，我注意到我使用“Ext.List”对象而不是“Ext.navigation.View”

【解决方案2】：

推送应该可以。你可以试试这样的。

  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'
    },

希望有帮助

【讨论】：

【解决方案3】：

我在控制器 this.getMain() 中犯了一个错误 get main 正在返回 Ext.List，我需要具有“push”方法的 Ext.navigation.View。

所以...我将 xtype 和 id 添加到我的视口（“容器”）控制器的快速更换解决了我的麻烦...

refs: {
    main: '#homepage',
    container: '#container'
}

而不是获取 Ext.List 对象

this.getContainer().push({
    xtype: 'realestatehome'
});

这个工作就像一个魅力:)

【讨论】：