PDA

View Full Version : Scroll on pickerfield



harman
3 Apr 2012, 9:09 AM
Hi,

I have a tree inside a pickerfield.
Somewhat like this


Ext.create('Ext.form.field.Picker', {
renderTo: Ext.getBody(),
createPicker: function() {
return Ext.create('Ext.tree.Panel', {
hidden: true,
floating: true,
minHeight: 300,
root: {
expanded: true,
text: 'Root',
children: [
{text: 'Child 1', children: []},
{text: 'Child 2', children: []},
{text: 'Child 3', children: []}
]
}
});
}
});


The problem is that if i have more items how do i provide a scroll bar?
My tree gets populated with JSON so i dont know the height taht it would take.
So i dont want to hardcode any height.
but still i can live with it if i can get the scroll anyway.

Thanks for the help in advance

scottmartin
3 Apr 2012, 9:49 AM
As mentioned, you will need to specify a height to have it scroll. If you have more items that the client body, it may provide one when it reaches the bottom.

As a user, I usually prefer a height rather than a hug list if items in a drop down.

Regards,
Scott.

harman
4 Apr 2012, 5:20 AM
Scott i forgot to write but i already tried that.
But what ever i give as height is neglected. It only takes min height to define its height.

scottmartin
4 Apr 2012, 5:34 AM
The following code work for me as expected



Ext.create('Ext.form.field.Picker', {
renderTo: Ext.getBody(),
createPicker: function() {
return Ext.create('Ext.tree.Panel', {
hidden: true,
floating: true,
minHeight: 100, // < height
height: 150, // added height
root: {
expanded: true,
text: 'Root',
children: [
{text: 'Child 1', children: []},
{text: 'Child 2', children: []},
// repeated several times to increase item size
{text: 'Child 3', children: []}
]
}
});
}
});


33576
Regards,
Scott.

harman
5 Apr 2012, 1:20 AM
thanks for the reply Scott.
I also tried this on sencha's editor and found that you are correct i.e the scroll appears.
But i dont know why it doesnt appear in my app.
I am using ExtJS 4.0.7 version.What does the editor in Sencha uses?
Also i can see a shaded region at right side but it does not have the scroll.
I inspected it and found that HTML says its 'Scrollbar-ct'. Then why doesnt it appear?
Does that relate to the css or something like that?

harman
5 Apr 2012, 3:35 AM
It got marked as best answer by mistake.How do i revert?

harman
5 Apr 2012, 4:41 AM
Adding to that.
When i try the same code in Chrome i see a handsome scroller that doesnt scroll at all.
:s

scottmartin
5 Apr 2012, 5:10 AM
What do you see if you run the following code? Lets take your app out of the look for a bit.
If it works, I suspect you have some CSS in your app that is clobbering the defaults.
Can you inspect the CSS of your combo in Firebug to see if any rules are getting in the way?

Make sure to change the path for extjs

See attached screens using 4.07 and 4.1rc2



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>f192963</title>

<link rel="stylesheet" type="text/css" href="../../extjs407/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../../extjs407/examples/shared/example.css" />

<script type="text/javascript" src="../../extjs407/ext-all-debug.js"></script>

<script type="text/javascript">
document.write('ExtJS: '+Ext.versions.extjs.version);
</script>

<!-- page specific -->
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<h1>f192963</h1>
</body>
</html>




Ext.create('Ext.form.field.Picker', {
renderTo: Ext.getBody(),
createPicker: function() {
return Ext.create('Ext.tree.Panel', {
hidden: true,
floating: true,
minHeight: 100, // < height
height: 150, // added height
root: {
expanded: true,
text: 'Root',
children: [
{text: 'Child 1', children: []},
// repeated several times to increase item size
{text: 'Child 2', children: []},
{text: 'Child 2', children: []},
{text: 'Child 2', children: []},
{text: 'Child 2', children: []},
{text: 'Child 2', children: []},
{text: 'Child 2', children: []},
{text: 'Child 2', children: []},
{text: 'Child 2', children: []},
{text: 'Child 2', children: []},
{text: 'Child 2', children: []},
{text: 'Child 2', children: []},
{text: 'Child 2', children: []},
{text: 'Child 2', children: []},
{text: 'Child 2', children: []},
{text: 'Child 3', children: []}
]
}
});
}
});


336353363633637

Regards,
Scott.

harman
5 Apr 2012, 6:26 AM
Sorry for a little late reply.
I figured out the same thing.
My code ran proper on Sencha since it uses the ext-all.css,
the customed css that i used in my app caused the problems with the scroll.

here is a solution to it
may be someone else will find that usefull.



.x-scroller-ct {
overflow:hidden;
position:absolute;
margin:0;
padding:0;
border:none;
left:0px;
top:0px;
box-sizing:content-box !important;
-ms-box-sizing:content-box !important;
-moz-box-sizing:content-box !important;
-webkit-box-sizing:content-box !important
}


.x-vertical-scroller-present .x-grid-body {
border-right-width:0px
}


.x-scroller {
overflow:hidden
}


.x-scroller-vertical {
border:1px solid #99bce8;
border-top-color:#c5c5c5
}


.x-scroller-horizontal {
border:1px solid #99bce8
}


.x-vertical-scroller-present .x-scroller-horizontal {
border-right-width:0px
}


.x-scroller-vertical .x-scroller-ct {
overflow-y:scroll
}


.x-scroller-horizontal .x-scroller-ct {
overflow-x:scroll
}