2

私は sencha touch 2 を使用していますが、sencha フォーラム内でヘルプが得られません。

カスタム アイテムを含むリストを作成したい。このカスタム項目では、項目としてボタンを含む水平スクロール可能なリストビューが必要です。component.DataItem を実行しようとしましたが、うまくいきません。リスト内のアイテムとしてカスタム xtype を追加しようとしましたが、これは機能しません。

これは簡単な作業だと思いますが、sencha touch は私にとって挑戦です。

どうすればこの写真のようなビューを得ることができるか教えてください。

sencha touch 2 での私の目標

4

1 に答える 1

1

標準リストの代わりに、Component DataView を使用したいと思うでしょう。基本的に、最初に Ext.dataview.component.DataItem を定義する必要があり、それが DataView に実装されます。以下は、DataView ガイドから参照されている DataView のボタンの簡単な例です: http://docs.sencha.com/touch/2-0/#!/guide/dataview

最初に DataItem を作成します。

Ext.define('MyApp.view.DataItemButton', {
    extend: 'Ext.dataview.component.DataItem',
    requires: ['Ext.Button'],
    xtype: 'dataitembutton',    
    config: {
        nameButton: true,    
        dataMap: {
            getNameButton: {
                setText: 'name'
            }
        }
    },    
    applyNameButton: function(config) {
        return Ext.factory(config, Ext.Button, this.getNameButton());
    },    
    updateNameButton: function(newNameButton, oldNameButton) {
        if (oldNameButton) {
            this.remove(oldNameButton);
        }

        if (newNameButton) {
            this.add(newNameButton);
        }
    }
});
  • 各項目に対して Ext.dataview.component.DataItem を拡張する必要があります。これは、各アイテムのレコード処理を処理する抽象クラスです。
  • 拡張の下には、Ext.Button が必要です。これは単純に、アイテム コンポーネント内にボタンを挿入するためです。
  • 次に、この item コンポーネントの xtype を指定します。
  • config ブロック内で nameButton を定義します。これは、このコンポーネントに追加するカスタム構成であり、クラス システムによってボタンに変換されます。デフォルトで true に設定しますが、これは構成ブロックである可能性もあります。この構成により、nameButton のゲッターとセッターが自動的に生成されます。
  • 次に、dataMap を定義します。dataMap は、レコードのデータとこのビューの間のマップです。getNameButton は、更新するインスタンスのゲッターです。したがって、この場合、このコンポーネントの nameButton 構成を取得する必要があります。次に、そのブロック内で、そのインスタンスのセッターを指定します。この場合は setText であり、渡すレコードのフィールドを指定します。したがって、この item コンポーネントがレコードを取得すると、nameButton が取得され、レコードの name 値で setText が呼び出されます。
  • 次に、nameButton の apply メソッドを定義します。apply メソッドは Ext.factory を使用して、渡された構成を Ext.Button のインスタンスに変換します。そのインスタンスが返され、updateNameButton が呼び出されます。updateNameButton メソッドは、古い nameButton インスタンスが存在する場合は単純に削除し、新しい nameButton インスタンスが存在する場合はそれを追加します。

次に、DataView を作成します。

Ext.create('Ext.DataView', {
    fullscreen: true,

    store: {
        fields: ['name', 'age'],
        data: [
            {name: 'Jamie Avins',  age: 100},
            {name: 'Rob Dougan',   age: 21},
            {name: 'Tommy Maintz', age: 24},
            {name: 'Jacky Nguyen', age: 24},
            {name: 'Ed Spencer',   age: 26}
        ]
    },

    useComponents: true,
    defaultType: 'dataitembutton'
});

あなたの場合、DataItem のボタンを使用するのではなく、水平スクロール リストを使用する必要があります。この回答から見つけた例を次に示します:水平スクロール リスト

var list = Ext.create('Ext.DataView',{
   store: store,
   itemTpl: new Ext.XTemplate('<img src="{icon}" />'),
   inline: { wrap: false },
   scrollable: {
     direction: 'horizontal',
     directionLock: true
   }
});

画像付きのボタンを実現するには、おそらく2番目のデータビューでもコンポーネントを使用する必要があることに注意してください

于 2012-10-19T15:57:35.057 に答える