1

sencha touch 2 でスライド効果のあるビューを表示する必要があります。どの方法を使用すればよいですか? 私は
どちらかを使用しています

Ext.getCmp('mainpanel').setActiveItem('secondview');

また

Ext.getCmp('mainpanel').animateActiveItem(1, {type: 'slide', direction: 'right'}); 
Ext.getCmp('mainpanel').add('categorylist');

ただし、場合によっては、スライド効果がレンダリングされません。スライド効果はどのような条件下で発生しますか? ビューに必須の構成はありますか?

メインパネルのコードにはビュー xtype 'carouselcontainer' があり、そのコードを以下に示します。

Ext.define("MyApp.view.CarouselContainer",{
    extend     : 'Ext.Panel',
    id         : 'carouselcontainer',
    xtype      : 'carouselcontainer',
    requires   : [
                  'Ext.Carousel','Ext.data.Store','Ext.dataview.List'
                  ],
    config      :{
        layout  :'card',
        items   :[{

                xtype : 'carousel',
                id:'car1',
                animation: {
                    type: 'slide',
                    direction: 'left'
                },

                listeners:{

                    initialize : function() {
                         Ext.Ajax.request({
                         url: url_host+'GetCategory?rest_id='+rest_id,
                         success: function(response, opts) {
                         var h = Math.ceil(Ext.Viewport.getWindowHeight() * 0.7);
                         var padvalue=h*.2;
                         var padvalue2=h/8.5;
                         var w = Math.ceil(Ext.Viewport.getWindowWidth() * 0.9);

                         obj = Ext.decode(response.responseText);
                         lengthArray=obj.category.length;
                         console.log('lengthArray'+lengthArray);
                         var division=Math.floor(lengthArray/num1);
                         console.log('division'+division);
                         var modulus=lengthArray%num1;
                         console.log('modulus'+modulus);
                         if(modulus>0) {
                             var pages=division+1;
                         }else {
                              var pages=division;
                         }


                    start='';

                    console.log(pages);

                          for ( i=0;i<pages;i++)
                      {
                              t= new Date().getTime();

                              if(i==0)
                              {
                                  start=0; 
                              } 
                              else
                              {
                                  start=(i*num1)-1;   
                              }

                                str=Ext.create("MyApp.store.HomePage");

                                str.getProxy().setExtraParam('rest_id',rest_id);
                                str.getProxy().setExtraParam('start1',start);
                                str.getProxy().setExtraParam('end',num1);
                                str.getProxy().setExtraParam('t',t);



                          Ext.getCmp('car1').add([


                                                   {
                                                        xtype: 'dataview',
                                                        //id:'li'+start,
                                                        scroll: false,
                                                        scrollable : {
                                                          direction     : false,
                                                          directionLock : true
                                                        },
                                                        items:[ 

                                                        ],
                                                        listeners: {
                                                            itemtap:function(item, num, record, ev, e, eOpts) {



                                                                if(ev.data.category_name=='contact us') {


                                                                    Ext.getCmp('mainpanel').setActiveItem('contactcontainer');
                                                                    Ext.getCmp('contactcontainer').setActiveItem(2);
                                                                }
                                                                else if(ev.data.category_name=='Get Social')
                                                                    {
                                                                    Ext.getCmp('mainpanel').setActiveItem('contactcontainer');
                                                                    Ext.getCmp('contactcontainer').setActiveItem(1);
                                                                    }
                                                                else
                                                                    {
                                                                    //console.log(Ext.getCmp('categorylist').getStore());


                                                                    Ext.getCmp('mainpanel').animateActiveItem(1, {type: 'slide', direction: 'right'});
                                                                Ext.getCmp('mainpanel').add('categorylist');
                                                                    /*Ext.getCmp('categorylist').getStore().getProxy().setExtraParam('type',ev.data.client_category_id);*/
                                                                    Ext.getCmp('categorylist').getStore().getProxy().setExtraParam('cat_id',ev.data.client_category_id);
                                                                    Ext.getCmp('categorylist').getStore().getProxy().setExtraParam('rest_id',rest_id);
                                                                    Ext.getCmp('mainpanel').setActiveItem('categorylist');
                                                                    Ext.getCmp('categorylist').setActiveItem(0);
                                                                    Ext.getCmp('categorylist').getStore().load();
                                                                    //Ext.getCmp('categorylist').refresh();

                                                                //  console.log(Ext.getCmp('categorylist').getStore().url);

                                                                    }


                                                        }

                                                        },
                                                        store:str,
                                                        itemTpl: '<div id="{client_category_id}" style="margin-top:'+padvalue+'px;  float:left;text-align:center;display:block;width:49%;height:'+padvalue2+'px"><img src="{image}" /><!--<h2>{client_category_id}</h2>--!><p>{category_name}</p></div>' 

                                                    }
                                               ]);

                         str.load();

                      }
                   },
                   failure: function(response, opts) {
                      console.log('server-side failure with status code ' + response.status);
                   }
                });


            }

                    }

                }]
        }
});

メインパネルのコードは

Ext.define("MyApp.view.Main", {
    extend: 'Ext.Panel',
    requires: [
        'Ext.TitleBar',
        'Ext.Video'
    ],
    config: {
        id : 'mainpanel',
        layout : 'card',
        items : [
                 {
                     xtype : 'maintabpanel'
                 },
                 {
                     xtype:'contactcontainer'
                 } ,
                 {
                    xtype : 'categorylist'
                 },
                 {
                        xtype : 'categorylistsecond'
                     } 
                 ],


});

メインタブパネルのそれは

Ext.define("MyApp.view.MainTab", {
    extend: 'Ext.Panel',
    requires: ['Ext.data.proxy.JsonP'],
    xtype : 'maintabpanel',
    id : 'maintabpanel',
    config: {

                    id : 'home',
                    iconCls: 'home',
                    scrollable: false,
                    layout:'fit',
                    items: [
                            {
                        xtype:'panel',
                        id:'home_panel',
                        layout:'card',
                        items:[{
                                    xtype      : 'homeview'
                               },
                               ]
                            }
                        ]

            }
});

そして「homeview」のそれは

Ext.define("MyApp.view.Home",{
    extend     : 'Ext.Panel',
    id         : 'homeview',
    xtype      : 'homeview',
    requires   : [
                  'Ext.TitleBar',
                  'Ext.SegmentedButton',
                  'Ext.dataview.List',
                  'Ext.data.Store',
                  'Ext.field.Select'],
    config      :{
    layout  :'fit',
    items   :[{

            xtype : 'toolbar',
            docked: 'top',  
                  //style :'background:url(resources/images/home-logo.png) no-repeat left;',
                  title:"Welcome"
            //flex  :.75//changed

            },
            {
                xtype:'carouselcontainer'
            }]
    }
});
4

2 に答える 2

1

メインパネルに追加する必要があります

レイアウト: {
            タイプ: 'カード',
            アニメーション: {
                タイプ: 'スライド',
                方向: 「左」
            }
        }

また

panel.animateActiveItem(1, {type:'slide', direction:'left'});

も機能します

于 2012-12-07T12:24:13.293 に答える
1

を見てくださいanimateActiveItem

最初のパラメーターは、カード レイアウト内のビューのインデックス、またはこのビューへの参照です。2 番目のパラメータはアニメーションです。

例を次に示します。

Ext.getCmp('mainpanel').animateActiveItem(1, {type: 'slide', direction: 'right'});

お役に立てれば

于 2012-12-07T12:25:03.890 に答える