1

最初のプログラムロジック：

メインパネルがあり、左側にリストがあり、右側に別のパネルがあります。

ユーザーがリストアイテムをタッチすると、右側のパネルにHTMLが表示されます。私がする必要があるのは、右パネルの代わりにカルーセルを使用することです。

私の見解

   Ext.define('MyApp.view.MyPanel', {   
extend: 'Ext.Panel',
xtype:'mypanel',

config: {
    ui: 'dark',
    layout: {
        type: 'card'
    },
    items: [
        {
            xtype: 'titlebar',
            docked: 'top',
            title: 'Lezzet Dunyasi',    
        },
        {
            xtype: 'list',
            docked: 'left',
            id: 'mylist',
            ui: 'round',                
            pinHeaders: false,
            grouped: true,
            //disableSelection: true,
            width: 331,
            itemTpl: [
                '<img src="{img_url}" width="60" heigh="60"></img><span>{label}</span>'
            ],
            store: 'Menius',
            items: [
                {
                    xtype: 'searchfield',
                    docked: 'top',
                    placeHolder: 'Search...',

                },
            ]
                },
                {
                xtype: 'panel',
                styleHtmlContent:true,
                style: {
                backgroundImage: 'url(resources/img/Landscape.png)',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center'
                },
                id:'mypanel'
                }
            ]
        }

        });

ご覧のとおり、xtype：panelがあり、そのコードを変更しようとしましたが、このようにしました

     xtype: 'carousel',

                defaults{
                styleHtmlContent:true,  
                id:'mypanel'},

                items: [
                {
                html : 'Item 1',
                style: 'background-color: #5E99CC'
                },
                {
                html : 'Item 2',
                style: 'background-color: #759E60'
                },
                {
                html : 'Item 3'
                }
            ]

また、私はコントローラーを使用しています

    Ext.define('MyApp.controller.MeniuController',{
extend:'Ext.app.Controller',
config:{
    refs:{
        leftMeniu:'mypanel list[id=mylist]',
        myPanel:'mypanel panel[id=mypanel]'
    },
    control:{
        leftMeniu:{
            itemtap:'onItemTap'
        }
    }
},

onItemTap:function(list, index, item, record, e , opts)
{
    var content = '<h2>' + record.get('label') +'</h2>' + record.get('html');
    this.getMyPanel().setHtml( content );
}

}）;

そして、私はこの部分をこのように変更しました

    refs:{
        leftMeniu:'mypanel list[id=mylist]',
        myPanel:'mypanel carousel[id=mypanel]'

これらの変更はコードを実行できませんが、どうすればよいですか？

4

1 に答える 1

0

私が見るいくつかの小さな問題。デフォルトにコロンがありません。その ID をカルーセル要素の 1 つに移動したいと思いますよね? あなたのコードでは、そのレベルで定義された id を持つページを 1 つだけ取得しています。下に移動すると、3 ページが表示されます。

デフォルト: {
   styleHtmlContent:true,  
   id:'mypanel' // 間違った場所に?
}、

[アップデート]

どのカルーセル パネルにも書き込むことができるようになりました。refs:{} セクションで各 ID への直接参照を作成しました。2 ページ目に描画しているので、ビューにドラッグして更新を確認します。

また、モデル、ストア、app.js を追加して、これを読んでいる人なら誰でも完全に機能する例を入手できるようにします。

Ext.define('MyApp.controller.MeniuController', {
    拡張:'Ext.app.Controller',
    構成:{
        参照:{
            leftMeniu:'mypanel リスト[id=mylist]',
// myPanel:'mypanel panel[id=mypanel]'
// myPanel:'mypanel carousel[id=mypanel]'
            myFirstPanel:'#mypanel1',
            mySecondPanel:'#mypanel2'
        }、
        コントロール：{
            左メニュー:{
                itemtap:'onItemTap'
            }
        }
    }、

    onItemTap:function(list, index, item, record, e, opts) {
        var content = '<h2>' + record.get('label') + '</h2>' + record.get('html');
        this.getMySecondPanel().setHtml(コンテンツ);
        this.getMyFirstPanel().setHtml(コンテンツ);
    }
});

完全な MyPanel ビュー:

Ext.define('MyApp.view.MyPanel', {
    拡張: 'Ext.Panel',
    xtype:'mypanel',

    構成: {
        ui: '暗い',
        レイアウト： {
            タイプ: 「カード」
        }、
        項目: [
            {
                xtype: 'タイトルバー',
                ドッキング: 'トップ',
                タイトル：「レゼット・ドゥニャーシ」
            }、
            {
                xtype: 'リスト',
                ドッキング: '左',
                id: 'マイリスト',
                ui: 'ラウンド',
                pinHeaders: false,
// グループ化: true,
                //disableSelection: true,
                幅: 331,
                itemTpl: [
                    '{ラベル}'
                ]、
                店: 'Menius',
                項目: [
                    {
                        xtype: '検索フィールド',
                        ドッキング: 'トップ',
                        placeHolder: 「検索...」

                    }
                ]
            }、
// {
// xtype: 'パネル',
// styleHtmlContent:true,
// スタイル： {
// backgroundImage: 'url(../images/risk2.png)',
// backgroundRepeat: 'no-repeat',
// backgroundPosition: 'center'
// }、
// id:'マイパネル'
// }
            {
                xtype: 'カルーセル',

                デフォルト: {
                    styleHtmlContent:true
                }、

                項目: [
                    {
                        html: '項目 1',
                        スタイル: '背景色: #5E99CC',
                        id:「マイパネル1」

                    }、
                    {
                        html: '項目 2',
                        スタイル: '背景色: #759E60',
                          id:'mypanel2'
                    }、
                    {
                        html: '項目 3'
                    }
                ]
            }
        ]
    }
});

app.js

Ext.application({
    名前: "マイアプリ",

    ビュー: ['MyPanel'],
    モデル: ['Meniu'],
    ストア: ['Menius'],
    コントローラ: ['MeniuController'],
    起動: 関数() {

        Ext.Viewport.add(Ext.create('MyApp.view.MyPanel'));
    }
});

モデル：

Ext.define('MyApp.model.Meniu', {
    拡張: 'Ext.data.Model',

    構成: {
        フィールド: ['img_url', 'label', 'html']
    }
});

店：

Ext.define('MyApp.store.Menius', {
    拡張: 'Ext.data.TreeStore',

    構成: {
        モデル: 'MyApp.model.Meniu',
        defaultRootProperty: 'アイテム',
        grouper: 関数(レコード) {
            return record.get('label')[0];
        }、
        根： {
            テキスト: 'foo',
            項目: [

                {img_url: 'foo.png', ラベル: 'one', html:'
良い
'、葉：真}、
                {img_url: 'foo.png', ラベル: 'two', html:'
カルーセル
'、葉: true}
            ]
        }
    }
});
于 2012-04-24T14:27:29.703 に答える