在sencha touch 2中动态添加轮播

时间:2012-11-12 11:50:27

标签: sencha-touch-2

动态添加轮播项目的最佳做法/程序是什么。我需要一个顶杆和底杆,它们是固定的,在它们之间,需要一个旋转木马,其中的项目将从网址动态添加。轮播的项目将在我的应用程序中用作图标,单击它们会列出各自的子类别。 我尝试使用Ext.getCmp('carousel')。add()方法在初始化事件中添加轮播和顶部栏和底栏,但是在Android 2手机中查看轮播项时没有加载。

代码如下所示

var obj;
var lengthArray,t,str;
var added_carousel ;
var rid=1;
horizontalCarousels = []; 
Ext.define('AppNew.view.HomePage', {
    extend: 'Ext.Carousel',
    layout:{
        type: 'card',
        animation: {
            type: 'slide',
            direction: 'left' 
        }
    },
    xtype: 'homepage',
    id:'carouselpage',
    requires: [ 'AppNew.view.TopBar','Ext.data.Store','Ext.dataview.List',],
    initialize : function() {
    Ext.Ajax.request({
         url: 'http://127.0.0.1/AppNew/AppNewApi/GetCategory?rest_id='+rid,
         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;
         var division=Math.floor(lengthArray/num1);
         var modulus=lengthArray%num1;
         if(modulus>0) {
             var pages=division+1;
         }else {
              var pages=division;
         }

         Ext.getCmp('carouselpage').add([{
                                        xtype: 'topbar',
                                        docked: 'bottom', 
                                      listeners:{
                                            activeitemchange:function( obj, value, oldValue, eOpts ){
                                                console.log(value); 

                                                var values_button=value.config.title;
                                                if(values_button=='Contact') {
                                                    if(Ext.getCmp('ContactPage')){
                                                    Ext.getCmp('ContactPage').destroy();
                                                    }
                                                     Ext.Viewport.setActiveItem({

                                                       xtype: 'contactpage'  
                                                   });
                                                }
                                            }
                                        },
                                        activeItem: 0,    
                                        scrollable : {
                                          direction     : false,
                                          directionLock : true
                                        },

                                        items: [


                                                {
                                                    title: 'Get Social',
                                                    iconCls: 'social',
                                                    html: 'Get Social screen'
                                                },
                                                {
                                                    title: 'Contact',
                                                    iconCls: 'locate',
                                                    text: "Save",

                                                }
                                            ]

                                        } 

                                        ]);
            start='';
              Ext.getCmp('carouselpage').add([
                                      {
                    xtype: 'toolbar',
                    docked: 'top',
                    title: 'AppNew' ,
                    id:'toptoolbar' }

                ]);

                  for ( i=-1;i<=pages;i++)
              {

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


                      t= new Date().getTime();
                 if(i>0 ){

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


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

                                            items:[ 

                                            ],
                                            listeners: {
                                                activate:function(){console.log('in');




                                            console.log(start);
                                            }

                                            },
                                            store:str,


                                            itemTpl: '<div 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>' 

                                        }
                                   ]);
                 }

              }



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


    }  ,
    config: {

    listeners:{
    add:function(HomePage, item, index, eOpts       ){

        if(added_carousel)
        {
            if(added_carousel!=1){
            gr=3; 
            }
            else
            {
                gr=3;
                added_carousel=1;

            }
        }
        else
        {
            gr=2;
            added_carousel=1;
        }
        if(parseInt(index) >1){
            str=Ext.create("AppNew.store.HomePage");

            str.getProxy().setExtraParam('rest_id',rest_id);
            str.getProxy().setExtraParam('start1',start);
            str.getProxy().setExtraParam('end',num1);
            str.getProxy().setExtraParam('t',t);
            str.load();
        }   else{
            str=''; 

        }

    }
},
        title: 'AppNew',
        fullscreen: true,


        items: [  ]
    }  ,



})

0 个答案:

没有答案