1

最近、自分で ST2 を学習しようとしていますが、バグが発生しました。Ext.Component ビューを作成し、それを Ext.Container を拡張する親ビューに配置します。残念ながら、私のページには空気がレンダリングされているだけです。何人かの人が私を助けますか？どうもありがとう。これが私のコードです。

app.js

Ext.application({
    name: 'myAPP',

    requires: [
        'Ext.MessageBox'
    ],

    models: [
        'Goods'
    ],

    views: [
        'Viewport',
        'GoodsList',
        'GoodsListItem'
    ],

    controllers: [],

    stores: [
        'GoodsList'
    ],
    // some basic codes...
});

Viewport.js - ビュー

Ext.define('myAPP.view.Viewport', {
    extend: 'Ext.tab.Panel',

    xtype: 'viewport',

    config: {
        fullscreen: true,

        tabBarPosition: 'bottom',

        defaults: {
            styleHtmlContent: true
        },

        items: [
            {
                title: 'Series',
                iconCls: 'list',
                xtype: 'goodslist'
            }
        ]
    }
});

GoodsList.js - 見る

Ext.define('myAPP.view.GoodsList', {
    extend: 'Ext.Container',

    requires: [
        'Ext.TitleBar',
        'myAPP.view.GoodsListItem'
    ],

    xtype: 'goodslist',

    config: {
        layout: {
            type: 'fit'
        },

        items: [
            {
                xtype: 'titlebar',

                title: 'GoodsList',

                docked: 'top',

                items: [
                    {
                        iconCls: 'more',
                        align: 'right'
                    }
                ]
            },
            {
                xtype: 'goodslistitem'
            }
        ]
    }
});

GoodsListItem.js - 見る

Ext.define('myAPP.view.GoodsListItem', {
    extend: 'Ext.Component',

    xtype: 'goodslistitem',

    config: {
        store: 'goodsliststore',

        tpl: new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="s-row">',
                    '<div class="s-col {[xindex % 2 === 0 ? "s-c2" : "s-c1"]}">',
                        '<img src="{thumb}" />',
                        '<h1>{#}. {pname}</h1>',
                        '{price}',
                    '</div>',
                '</div>',
            '</tpl>'
        )
    }
});

GoodsList.js - ストア

Ext.define('myAPP.store.GoodsList', {
    extend: 'Ext.data.Store',

    config: {
        model: 'myAPP.model.Goods',

        storeId: 'goodsliststore',

        data: [
            {
                pname: 'Goods',
                price: '5RMB',
                thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
            },
            {
                pname: 'Goods',
                price: '15RMB',
                thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
            },
            {
                pname: 'Goods',
                price: '25RMB',
                thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
            },
            {
                pname: 'Goods',
                price: '35RMB',
                thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
            }
        ]
    }
});

Goods.js - モデル

Ext.define('myAPP.model.Goods', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            { name: 'pname', type: 'string' },
            { name: 'price', type: 'int' },
            { name: 'thumb', type: 'string' }
        ]
    }
});

ST バージョン - タッチ 2.1.1

4

1 に答える 1

2

Sencha Touch でリストを操作するための基本概念のいくつかが欠けているようです。

GoodsList ビューには実際にはExt.dataview.Listがないため、何も表示されません。要素を置き換えます。

{
    xtype: 'goodslistitem'
}

次のようなリストコンポーネントを使用します。

{
    xtype: 'list'
}

全画面表示にして、定義したXTemplateをリストのitemTplGoodsListItem.jsとして使用しましょう。

{
    xtype: 'list',
    fullscreen: true,
    itemTpl: new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="s-row">',
                '<div class="s-col {[xindex % 2 === 0 ? "s-c2" : "s-c1"]}">',
                    '<img src="{thumb}" />',
                    '<h1>{#}. {pname}</h1>',
                    '{price}',
                '</div>',
            '</div>',
        '</tpl>'
    )

}

GoodsListItem.js ビューを実際に削除できます。コンポーネント レイアウトを使用できる個別のリスト アイテムを本当に使用する場合は、defaultType構成を設定する必要がありますが、これはパフォーマンスが低下し、複雑さが増します。興味がある場合は、データビューの使用に関するガイドを確認してください。

注:Ext.XTemplate構文が正しいと仮定しています。

[編集] 私のコードはおそらくそのままでは機能しません: XTemplate を itemTpl として使用することに関するこの質問を確認してください

最後に、どのストアをリストにバインドするかを Sencha Touch と言わなければなりません。これは、ストアの設定を通じて行われます。

{
    xtype: 'list',
    fullscreen: true,
    itemTpl: new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="s-row">',
                '<div class="s-col {[xindex % 2 === 0 ? "s-c2" : "s-c1"]}">',
                    '<img src="{thumb}" />',
                    '<h1>{#}. {pname}</h1>',
                    '{price}',
                '</div>',
            '</div>',
        '</tpl>'
    ),
    store: 'GoodsList'
}

これにより、正しい軌道に乗ることができます。あなたが私に尋ねた場合、あなたは非常に複雑なことをゼロから達成しようとしています。基本的なリストの例から始めて、これに進むことをお勧めします。

Ext.create('Ext.List', {
    fullscreen: true,
    itemTpl: '{title}',
    data: [
        { title: 'Item 1' },
        { title: 'Item 2' },
        { title: 'Item 3' },
        { title: 'Item 4' }
    ]
});

次に、 へのバインド、を itemTpl としてExt.data.Store使用するなど、より複雑なものを段階的に追加します。Ext.TemplateExt.XTemplate

于 2013-07-30T07:53:57.513 に答える