0

コントローラを使用してリストアイテムのレコードを詳細ビューに渡そうとしている次のコードがあります。データは渡されず、詳細ビューには何も表示されません。

Main.js：

Ext.define('EventsTest.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'main',

requires: [
    'EventsTest.store.Venues',
    'Ext.dataview.List'
],

config: {
    items: [
        {
            xtype: 'list',
            id: 'venuesList',
            itemTpl: '{name}, {distance}',
            store: 'Venues',
            onItemDisclosure: true,
            styleHtmlContent: true
        }
    ]
}
});

MainView.js：

Ext.define('EventsTest.view.MainView', {
    extend: 'Ext.Container',
    xtype: 'mainView',

    config: {
        title: JSON.stringify(this.data),
        styleHtmlContent: true,

        scrollable: true,

        items: [
            {
                xtype: 'panel',
                tpl: '<tpl for="."><h3>{name}</h3><br /><p>{distance}</p></tpl>',
                flex: 1
            }
        ]
    }
});

Main.js（コントローラー：record.data（コード全体の多くの例で見られるように）とrecord.getData（）の両方を試しました

Ext.define('EventsTest.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            venuesList: '#venuesList',
        },

        control: {
            venuesList: {
                disclose: 'showItemDetail'
            }
        }

    },

    showItemDetail: function(item, record) {
        item.up('navigationview').push( {
            xtype: 'mainView',
            data: record.getData()
        });
    }
});

Venue.js（モデル）：

Ext.define('EventsTest.model.Venue', {
    extend: 'Ext.data.Model',

    config: {
        fields: ['name', 'distance']
    }
});

Venues.js（ストア）：

Ext.define('EventsTest.store.Venues', {
    extend: 'Ext.data.Store',

    reqiures: [
        'EventsTest.model.Venue'
    ],

    config: {
        model: 'EventsTest.model.Venue',

        data: [
            { name: 'Johnny', distance: '5 km' },
            { name: 'Billy', distance: '6 km' },
            { name: 'Sarah', distance: '7 km' },
            { name: 'William', distance: '8 km' },
        ]

    }
});
4

1 に答える 1

1

私はあなたがこのようtplにあなたの中にアイテムの外に置くべきだと思いますMainview.js：

Ext.define('EventsTest.view.MainView', {
    extend: 'Ext.Container',
    xtype: 'mainView',

    config: {
        title: JSON.stringify(this.data),

        styleHtmlContent: true,

        scrollable: true,

        tpl: '<tpl for="."><h3>{name}</h3><br /><p>{distance}</p></tpl>'

        items: [
            {
                // Define your items here
            }
        ]
    }
});

それがうまくいくことを願っています:)

編集

私は実際にsenchatouchの経験があまりないので、あなたが直接あなたの視点でそれを行うことができるかどうかはわかりませんが、あなたの要件に従う別の方法はあなたのコントローラーを通してそれを達成することです。

したがって、アイテムが次のようになっている場合：

items: [
    {
         xtype: 'panel',
         itemId: 'panel',
         flex: 1
    }
]

同じIDを持つ複数の要素がある場合、同じIDが互いに重複するため、遅かれ早かれアプリケーションが機能しなくなるため、itemId代わりに使用することをお勧めします。id

したがって、次のようにパネルのデータを取得する場合は、次のようになります。

tpl: '<tpl for="."><h3>{name}</h3><br /><p>{distance}</p></tpl>',

次に、コントローラーで次のようにパネルのデータを設定できます。

showItemDetail: function(item, record) {
    item.up('navigationview').push( {
        xtype: 'example42',
        data: record.data
    });

    Ext.ComponentQuery.query('#panel')[0].setHtml('<h3>'+record.get('name')+'</h3>'+ '<br /><p>'+record.get('distance')+'</p>');
}

ここでは、コンポーネントクエリを使用して、パネルのitemIdを参照し、データを設定しています。詳細については、 Ext.ComponentQueryを確認してください。

たぶん私はあなたの質問について間違って理解していますが、これが役立つことを願っています:)

于 2012-12-31T17:53:42.933 に答える