CODEWITHSUNDEEP
extjssencha-touch-2carousel
Fazil
Fazil

Reputation: 1390

Sencha Carousel not working

Im new bee to sencha, i tried to add a scroll view using Carousel . Here my code

var signupBase = {
standardSubmit : false,
items: [{
         xtype: 'fieldset',
         title: 'Sign up',
         defaults: {
                    required: true,
                    labelAlign: 'left',
                    useClearIcon: true,
                    labelWidth: '37%'
                    },
                    items: [{
                            xtype: 'textfield',
                            name : 'FirstName',
                            label: 'FirstName' ,
                            useClearIcon: true
                            },{
                            xtype: 'textfield',
                            name : 'LastName',
                            label: 'LastName',
                            useClearIcon: true
                            },{
                            xtype: 'textfield',
                            name : 'email',
                            label: 'Email',
                            useClearIcon: true
                            },{
                            xtype: 'passwordfield',
                            name : 'password',
                            label: 'Password',
                            useClearIcon: true
                            },{
                            xtype: 'passwordfield',
                            name : 'Confirm',
                            label: 'Confirm',
                            useClearIcon: true
                            }]
                    },{
                    xtype:  'button',
                    text:   'Sign up',
                    ui: 'confirm',
                    handler: function() {
                    view.setActiveItem('welcomepanel', {type:'fade', direction:'left'});

                    }
                    }]
            }
          var carousel = new Ext.create('Ext.Carousel',
                                          {
                                          fullscreen: true,
                                          itemLength: 250, // **you can change value as you want**
                                          defaults: {
                                          styleHtmlContent: true
                                          },
                                          items: [signupBase]});
        var view = Ext.create('Ext.TabPanel', {
                       fullscreen: true,
                       tabBarPosition: 'bottom',
                       scroll:'vertical',
                       //styleHtmlContent: true,
                       //padding: 10,
                       items: [{
                               title: 'HOME',
                               iconCls: 'home',
                               items: [{
                                       xtype: 'toolbar',
                                       title: 'Sign In',
                                       },signinBase]

                               },
                               {
                               title: 'ITEMS',
                               iconCls: 'star',
                               items: [
                                       {
                                       xtype: 'toolbar',
                                       title: 'Add Items',
                                       },
                                       carousel]

The carousel view is not visible in 'Add items' tab.When i add 'signupBase' directly its working but its not scrolling...What mistake i have in the above code.please help me to sort it out.

Upvotes: 0

Views: 668

Answers (1)

Viswa
Viswa

Reputation: 3211

just give height to carousel.

        var carousel = new Ext.create('Ext.Carousel',{
            itemLength: 250, 
            height : '100%',
            defaults: {
                styleHtmlContent: true
            },
            items: [signupBase]
        });

Update

Give card layout for Add Items tab and use titlebar that is docked at top, Try below code

//Same code..
     {
       title: 'ITEMS',
       iconCls: 'star',
       layout:'card',
       items: [{
        docked: 'top',
        xtype: 'titlebar',
        title: 'Add Items',
       },
       carousel]
    },
//Same code..

Upvotes: 1

Related Questions