0

マスターとDetailViewを使用するナビゲーショングループがあります。MasterViewを使用してdetailViewを開くと、navigationGroupは自動的にトップバーにMasterViewに戻るためのボタンを提供します。

私が達成したいのは、detailViewにボタンを配置することです。detailViewのボタンをクリックすると、ジョブを処理してからMasterViewに戻ります。

detailViewのボタンにリスナーを追加して目的のジョブを実行することはできますが、detailViewを閉じてMasterViewに戻るにはどうすればよいですか？

以下に掲載されているのは3つのファイルのコードです

  • ApplicationWindow.js
  • MasterView.js
  • DetailView.js

ApplicationWindow.js

var MasterView = require('ui/common/MasterView'), DetailView = require('ui/common/DetailView');
    var masterView = new MasterView(), detailView = new DetailView();

    //create master view container
    var masterContainerWindow = Ti.UI.createWindow({
        title : 'Product',
    });
    masterContainerWindow.add(masterView);

    //create detail view container
    var detailContainerWindow = Ti.UI.createWindow({
        title : 'Product Details'
    });
    detailContainerWindow.add(detailView);

    //create iOS specific NavGroup UI
    var navGroup = Ti.UI.iPhone.createNavigationGroup({
        window : masterContainerWindow
    });
    self.add(navGroup);

    //add behavior for master view
    masterView.addEventListener('itemSelected', function(e) {
        detailView.fireEvent('itemSelected', e);
        navGroup.open(detailContainerWindow);
    });

masterContainerWindow.open();

MasterView.js

//Master View Component Constructor
function MasterView() {
    //create object instance, parasitic subclass of Observable
    var self = Ti.UI.createView({
        backgroundColor:'white'
    });

    //some dummy data for our table view
    var tableData = [
        {title:'Apples', price:'1.25', hasChild:true, color: '#000'},
        {title:'Grapes', price:'1.50', hasChild:true, color: '#000'},
        {title:'Oranges', price:'2.50', hasChild:true, color: '#000'},
        {title:'Bananas', price:'1.50', hasChild:true, color: '#000'},
        {title:'Pears', price:'1.40', hasChild:true, color: '#000'},
        {title:'Kiwis', price:'1.00', hasChild:true, color: '#000'}
    ];

    var table = Ti.UI.createTableView({
        data:tableData
    });
    self.add(table);

    //add behavior
    table.addEventListener('click', function(e) {
        self.fireEvent('itemSelected', {
            name:e.rowData.title,
            price:e.rowData.price
        });
    });

    return self;
};

module.exports = MasterView;

DetailView.js

function DetailView() {
    var self = Ti.UI.createView();

    var lbl = Ti.UI.createLabel({
        text : 'Please select an item',
        height : 'auto',
        width : 'auto',
        color : '#000'
    });
    self.add(lbl);

    self.addEventListener('itemSelected', function(e) {
        lbl.text = e.name + ': $' + e.price;
    });

    var btn = Ti.UI.createButton({
        text : 'Close Me'
    });

    btn.addEventListener('click',function(){
        //Do Opertation
        //Close Detail View
    });

    self.add(btn);
    return self;
};

module.exports = DetailView;

detailViewに、eventListenerも持つ「btn」という名前のボタンを追加しました。このボタンを使用して詳細ビューを閉じたいと思います。ご意見をお聞かせください。よろしくお願いします

Abishek R Srikaanth

4

2 に答える 2

1

ApplicationWindowでdetailViewのカスタムEventListenerを作成し、ボタンをクリックするとそのイベントを発生させました。detailContainerWindowを渡すnavGroupのcloseイベントを使用しました。

ApplicationWindow.js

detailView.addEventListener('closeItem', function(e) {
            Ti.API.info('event called');
            navGroup.close(detailContainerWindow);

        });

DetailView.js

btn.addEventListener('click', function(e) {
            self.fireEvent('closeItem', e);
});
于 2012-06-15T08:45:07.620 に答える
0

android:backイベントまたはclosedetailContainerWindowのイベントを使用します。

btn.addEventlistner('click',function(e){
    // your code
    // window close for `close` event or manually fire `android:back`

});

これにより、masterContainerWindowが開きます。

これで問題が解決することを願っています。

于 2012-06-15T06:23:12.300 に答える