0

1）表示したいjsonファイルがあります。

{           
    "contents": [
                {
                    "title":'JWorld',
                    "image":'image/e-learning/elearning.png',

                    "subtitle":[
                    {
                        "categories":'Aus',
                    },
                    {
                        "categories":'England',
                    }                
                    ]
                },
                {
                    "title":'JIndia',
                    "image":'image/Content/History_of_India.jpg',
                    "subtitle":[
                    {
                        "categories":'History',
                    },
                    {
                        "categories":'India palace',
                    }                
                    ]
                },
                {
                    "title":'JMaharastra',
                    "image":'image/Content/Geography.jpg',
                    "subtitle":[
                    {
                        "categories":'History Maharastra',
                    },
                    {
                        "categories":'Maharastra Heros',
                    }                
                    ]
                }
              ]
}

2）私のビューファイル：-

Ext.define('Balaee.view.kp.dnycontentcategories.ContentcategoriesView',
{
    extend:'Ext.view.View',
    id:'contentcategoriesViewId',
    alias:'widget.ContentcategoriesView',
    store:'kp.DnycontentcategoriesStore',
    config:
    {
        tpl:'<tpl for="0">'+
                '<div class="main">'+
                '</br>'+
                '<b>{title}</b></br>'+
                '<img src={image} hight="50" width="100"></br>'+
                '</div>'+
                '</tpl>',
        itemSelector:'div.main',
    }
});// End of class

3）タブパネルを使用しており、jsonファイルを使用してタブパネルを動的に追加しています。

Ext.define('Balaee.view.kp.dnycontentcategories.Contentcategories',{
    extend:'Ext.tab.Panel',
    requires:[
              'Balaee.view.kp.dnycontentcategories.ContentcategoriesView','Balaee.view.kp.dnycontentcategories.ContentcategoriesView1'
             ],
    id:'contentcategoriesId',
    alias:'widget.Contentcategories',
    height:500,
    items:[

    ],//end of items square
});// End of login class

4）マイストアファイル：-

Ext.define('Balaee.store.kp.DnycontentcategoriesStore',{
    extend: 'Ext.data.Store',
    model: 'Balaee.model.kp.DnycontentcategoriesModel',
    autoLoad:true,
//    filters: [{
//        property: 'title',
//    }],
    proxy:
    {
        type:'ajax',
        api:
        {
            read:'data/content.json',
            //create: ,
            //update: ,
            //destroy: ,
        },//End of api 
        reader:
        {
            type:'json',
            root:'contents',
            //successProperty: ,
        }//End of reader
    }//End of proxy
});//End

5）コントローラーファイルここにいくつかのコードjsonファイルからいくつかのタブを動的に追加しています。特定のタブを選択すると、jsonファイルから別の特定の値が必要になります。しかし、私は最初のタブの同じビューを取得します。どうすればこの問題を解決できますか。

init: function(){
    console.log("inside content controller");
    this.control({
        'Contentcategories':
        {
            render:this.renderFunction,
        }
    });//End of control
},//End of init() function
renderFunction:function(){
    console.log("Inside render function");
    var tabPanel = Ext.getCmp('contentcategoriesId');       // tabpanel  
    var tabPanelView = Ext.getCmp('contentcategoriesViewId');   // tabpanel view

    var storeObject= this.getStore('kp.DnycontentcategoriesStore'); // store
    storeObject.on('load',function(){
        storeObject.each(function(model){
            //tabPanelView.store().filter('title',model.get('title')),
            console.log(model.get('title'));
            console.log(model.get('categories'));
            tabPanel.add({title:model.get('title'),
                            id:model.get('title'),
                            //html:"<image src=model.get('image')>",
                            xtype:'ContentcategoriesView',              
                        }); //End of add function 
        });// End of storeObject function
        tabPanel.setActiveTab(0);
    });
},// End of render function

提案をお願いします。

4

1 に答える 1

0

コードにはいくつかの問題があります。

あなたが定義するContentcategoriesView-あなたが拡張したそのaaコンポーネント。ただし、ID（contentcategoriesId）を指定しても、これらのコンポーネントを複数作成していることになります。IDはコンポーネントインスタンスごとに一意である必要があるため、意味がありません。

次に、ストアをこのビューにアタッチします。これは、すべてのコンポーネントが同じようにレンダリングされることを意味します。

私が正しく理解していれば、jsonの各エントリを異なるタブにする必要があります。

私はこの方向性を取ります（コードはテストされていませんが、方向性を示す必要があります）：

Ext.define('Balaee.view.kp.dnycontentcategories.ContentcategoriesView',
{
    extend:'Ext.panel.Panel', // Notice it's a panel.
    alias:'widget.ContentcategoriesView',

    config:
    {
        tpl: '<div class="main">' +
             '</br>' +
             '<b>{title}</b></br>' +
             '<img src={image} hight="50" width="100"></br>' +
             '</div>'
        itemSelector:'div.main',
    }
});

その後：

storeObject.on( 'load',function() {
    storeObject.each( function( model ) {
        tabPanel.add({
            xtype: 'ContentcategoriesView',
            title: model.get( 'title' ),
            id:    model.get( 'title' ),
            data:  model
        }); 
    });
    tabPanel.setActiveTab(0);
});
于 2013-01-09T15:56:21.587 に答える