Sencha Touch 2 Ext.List - 프로그래밍 방식으로 상세 뷰 추가

Question

목록의 녹화 된 항목을 기반으로 다른 세부 정보보기를 추가하려고합니다.

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

});

나는 하나의 예를 발견하지만, 사전에 (푸시 방법은 존재하지 않음) 나를 위해

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

감사를 작동하지 않습니다!

Answer 1

푸시가 작동해야합니다. 이런 식으로해볼 수 있습니다.

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

처럼 보일 수 그리고 특정보기에 액세스 할 수있는 심판이

Answer 2

방법 당신을 도와줍니다

refs: { 
     realEstate: 'realestatehome', 
     vehicles: 'vehicleshome' 
    }, 

희망처럼 보일 것이다 찾고있는 것은

입니다.

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

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

는하지만 메이크업 감각을 나던 것을, realestatehome이 목록입니다, 당신은 그 아래에 구성 요소를 추가 할 수 없습니다. 레이아웃에 대해 읽어보십시오. 위의 링크에서

Answer 3

컨트롤러에서 this.getMain()을 실수로했습니다. get main이 Ext.List를 반환하고 Ext.navigation.View에 'push'메소드가 필요합니다.

그래서 ...내 뷰포트 ("컨테이너") 내 컨트롤러의 빠른 변화를 위해 xtype 및 ID를 추가 해결 내 문제 ...

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

대신 Ext.List 객체

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

을 얻기의 그리고이 매력처럼 작동 :)