0

ここで入手できる ExtJS の DataView サンプルに関していくつか質問があります。

http://dev.sencha.com/deploy/ext-4.0.0/examples/view/data-view.html

私が持っている質問は次のとおりです。

  1. パネルを拡張し、アプリケーションに合わせていくつかのレイアウトや処理を行うカスタム コンポーネントがあります。この例のように、データ ビューを使用して、このコンポーネントの多くのインスタンスを垂直リスト ビューにレンダリングしたいと考えています。私は MVC を使用しており、モデルとストアを持っています。

  2. この例では、ビューで selectionchange イベントをリッスンします。私は ExtJS MVC パターンに従っているので、コントローラーにこのイベントのリスナーが必要です。しかし、私はそれを行うことができません。私はこのようなことを試しました（アクションを想定：例のExt.view.Viewの「picturesListView」）：

    this.control({
    'picturesListView': {
         selectionchange: function() { console.log('selectionchange'); }
     }
});

ただし、これは機能しません。

リクエストに応じてクラスコードを投稿する:

Ext.create('Ext.Panel', {
    id: 'images-view',
    frame: true,
    collapsible: true,
    width: 535,
    renderTo: 'dataview-example',
    title: 'Simple DataView (0 items selected)',
    items: Ext.create('Ext.view.View', {
        store: store,
        tpl: [
            '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
                '<div class="thumb"><img src="{url}" title="{name}"></div>',
                '<span class="x-editable">{shortName}</span></div>',
            '</tpl>',
            '<div class="x-clear"></div>'
        ],
        multiSelect: true,
        height: 310,
        trackOver: true,
        overItemCls: 'x-item-over',
        itemSelector: 'div.thumb-wrap',
        emptyText: 'No images to display',
        alias: 'view.picturesListView',
        plugins: [
            Ext.create('Ext.ux.DataView.DragSelector', {}),
            Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
        ],
        prepareData: function(data) {
            Ext.apply(data, {
                shortName: Ext.util.Format.ellipsis(data.name, 15),
                sizeString: Ext.util.Format.fileSize(data.size),
                dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
            });
            return data;
        },
        }
    })
});
4

1 に答える 1

5

あなたは財産を悪用していaliasます。このプロパティは、インスタンスを定義するときではなく、クラス自体を定義するときに使用する必要があります。このプロパティのドキュメントをここで確認してください: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Class-cfg-alias

あなたが探しているのは ですitemId。コンポーネントのインスタンスのを設定すると、セレクターでitemId使用してコントローラーで参照できます。#

例えば

Ext.create('Ext.view.View', {
    //...other stuff here...
    itemId: 'picturesListView',
    //...other stuff here
})

それで：

this.control({
    '#picturesListView': {
        selectionchange: function() { console.log('selectionchange'); }
    }
});

もう 1 つのオプションは、コントローラの参照を で取得することxtypeです。ただし、これはその xtype のすべてのコンポーネントを制御することに注意してください。

this.control({
    'dataview': {
        selectionchange: function() { console.log('selectionchange'); }
    }
});
于 2013-07-03T13:04:58.883 に答える