Sencha Touch 2 Ext.List - 以編程方式添加詳細視圖

我試圖根據列表中的錄製項目添加不同的詳細視圖。Sencha Touch 2 Ext.List - 以編程方式添加詳細視圖

我有使用List組件的主屏幕，並且此視圖顯示['Real estate'，'Vehicles'，'Jobs'] ...作爲菜單項。
根據列表中的選定項目，我想顯示不同的視圖。
- 我想跟進MVC設計模式..

下面是一些代碼... 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 = 「主頁」）

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

}）;

我找到了一個例子，但它不是爲我提前工作（push方法不存在）

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

謝謝！

來源

2012-05-14 Aleksandar Borkovac

推動應該工作。你可以嘗試這樣的事情。

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

希望幫助

來源

2012-05-16 05:22:47 fuzzyLikeSheep

的方法你're looking for是

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

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

但你已經沒有道理，realestatehome是一個列表，你不能在它添加的成分。你需要了解layoutsFrom上述

來源

2012-05-16 05:33:38

是的......你說得對，它沒有任何意義（facepalm）。幾分鐘後，我發佈了這個，我注意到我用「Ext.List」對象，而不是使用「Ext.navigation.View」 –

鏈接我做出控制器this.getMain一個錯誤（）獲得主要是返回Ext.List，我需要Ext.navigation.View有「推」的方法。

所以...我加的xtype和身份證到我的視口（「容器」）和我的控制器的快速變化解決我的煩惱......

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

和而不是讓Ext.List對象

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

這工作就像一個魅力:)

來源

2012-05-31 11:46:58

Sencha Touch 2 Ext.List - 以編程方式添加詳細視圖

回答

相關問題