Need Horizantal Scroll for Container

Question

Please Somebody help to get Horizontal Scroll for this Example.if add Items Dynamically i got only Vertical scroll bar.

Ext.define('Fiddle.view.main.Main', { extend: 'Ext.container.Container',

layout: 'border',
items: [{
    xtype: 'container',
    region: 'north',
    height: 40,
    padding: 12,
    html: 'A great place to add the title of the app and app-wide navigation'
}, {
    region: 'center',
    scrollable : true,
    autoScroll : true,
    width:50,
    title: 'Required "center" region',
    bodyPadding: 12,
    html: 'Our main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app content'
}, {
    region: 'west',
    title: 'West Nav Panel',
    width: 200,
    collapsible: true,
    split: true,
    bodyPadding: 12,
    layout: 'anchor',
    defaultType: 'button',
    defaults: {
        margin: '0 0 12 0',
        anchor: '100%'
    },
    items: [{
        text: 'Nav Button 1'
    }, {
        text: 'Nav Button 2'
    }, {
        text: 'Nav Button 3'
    }]
}]

});

Ext.application({ name: 'Fiddle',

// the mainView config will create an instance of 'Fiddle.view.main.Main'
// as the main view of the application by injecting the viewport plugin
// into this instance of 'Fiddle.view.main.Main'
mainView: 'Fiddle.view.main.Main',

launch: function() {
    // application logic to execute after all application views, 
    // controllers, and viewModels are defined
}

});

https://fiddle.sencha.com/#fiddle/ngf&view/editor Check This fiddle link.i added scrollable : true,autoScroll : true for center region. — Natchatra, Apr 05 '17 at 14:11

score 0 · Accepted Answer · answered Apr 06 '17 at 05:17

0

You can get Vertical or horizontal scroll by using scrollable direction

 scrollable : {
    direction     : 'horizontal',
    directionLock : true
 },

in your case it might be like this
here is the fiddle

answered Apr 06 '17 at 05:17

Salman hassan

398
6
23

Salman hassan OkZ: In my case i m not able to use 'hbox' layout.i need to get scroll without using 'hbox' layout – Natchatra Apr 06 '17 at 05:38
well if your content is not ready for horizantal scroll then how you will do it give me a example its common sense – Salman hassan Apr 06 '17 at 05:42
post an image or something of your code that we can figure out what you want – Salman hassan Apr 06 '17 at 05:48
i understood.now i get scroll here is my example.https://fiddle.sencha.com/#view/editor&fiddle/1ti8 – Natchatra Apr 06 '17 at 06:03
yeah people cant get you exactly what you want but people can give you a idea or a direction anyway if you get your answer please accept it so the question will be closed thanks – Salman hassan Apr 06 '17 at 06:06

Need Horizantal Scroll for Container

1 Answers1