Hello I got problem with scroll on my grid.
Here is the code (nothing fancy or special in it)
Ext.define('grid.list',{
alias:'widget.grid.list',
extend: 'Ext.grid.Panel',
title: 'list',
frame:true,
width:325,
store: new axs.dry.cargo.data.store.list,
queryMode: 'remote',
style:{
cursor: 'default'
},
viewConfig: {
autoScroll: true
},
features:[Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: '{name}'
})],
columns: [
{
text: 'Name',
flex: true,
dataIndex: 'name',
sortable: false
}
],
initComponent:function(){
this.on('beforerender',function(){
this.store.load();
});
grid.list.superclass.initComponent.apply(this,arguments)
}
})
Grid is looking good and the scroller is showing BUT over the scrollbar extjs generates a DIV who is making the real problem. Because of that div I CAN'T click on the scrollbar because the transparent DIV is over it.... here is the code of this useless DIV
<div id="gridscroller-1032" class="x-component x-scroller x-scroller-vertical x-component-default x-docked x-docked-right x-component-docked-right x-component-default-docked-right" style="width: 17px; height: 297px; left: 302px; top: 47px; " role="presentation"><div class="x-stretcher" id="ext-gen1392" style="width: 1px; height: 2953px; "></div></div>
I hear opinion that this div is generated for "infinitive grid" but ...
Can you help me with good solusion (removing the element by selecting its ID is not a good solusion)
PS. When I remove the fixet width of my grid.list element the problem gone ... but then it starts showing horisontal scroll bar who looks ugly and I can remove it only by setting the width to fixed size.
PS2. I'm using the default css files and no special styles or anything.
The problem fixed by itself. I have integrate my form in the main project and the scrollbar appears...
I don't know why is that happening, maybe it is extjs bug.
Related
I am not able to get border for combobox.
xtype: "toolbar",
overflowHandler: "scroller",
dock: "top",
items: [{
xtype: "combo",
itemId: "combo1",
width: 80,
labelWidth: 50,
fieldLabel: "Filename",
store: filenames,
queryMode: "local",
displayField: "text",
fieldStyle: {
borderRadius: "3px"
}
}]
border is not displaying for combobox.
You appear to be missing the border config property from your component. That could be one of the reasons of your problem, especially as your component seems to be embedded in a toolbar.
From Sencha's documentation:
Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).
For components that have no border by default, setting this won't make the border appear by itself. You also need to specify border color and style:
border: 5,
style: {
borderColor: 'red',
borderStyle: 'solid'
}
Note that setting borderRadius as you did does not imply that there will automatically be a border. It only states that "should there be a border, it will have that radius in its corners".
Most likely, all you need is to add the following to your combo configuration:
border: 1
Modifying Sencha's fiddle provided in the documentation to have a toolbar, the border is present whether you manually set the border property or not.
The following code - run within the sencha documentation itself - demostrates a combobox within a toolbar, with its border.
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
// Create the combo box, attached to the states data store
var cmb = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
border: 5,
style: {
borderColor: 'red',
borderStyle: 'solid'
},
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr'
});
Ext.create({
xtype: "toolbar",
overflowHandler: "scroller",
dock: "top",
renderTo: Ext.getBody(),
items: [
cmb
]
});
Problems related to border and the like are often caused by the CSS of your team not being imported or the related js file not being loaded, in contexts where ExtJS has not been "prepared" built using sencha build but instead manually imported.
Alternatively, it's a CSS problem. In that case you'll have to use The Developer Tools of your browser of choice (F12 key, usually) and inspect the border-related properties for your component.
I have a popup windows which is suppose to show an email (which is in html) in the centerPanel. That panel is in the center region of the border layout.
It absolutely has autoscroll set to true and I know that my test data is much larger than the panel. But I can't get it to scroll.
Is there, perhaps, a better way of setting this up? I've tried some other object like a label, display, textarea etc. as an item in the center panel and set that object with autoscroll : true with no success
popup = new Ext.Window({
width: 900,
height: 320,
resizable: true,
draggable: true,
id: 'popupWindow',
layout: {
type: 'border'
},
items: [
// ...
{
xtype: 'panel',
region: 'center',
id: 'centerPanel',
autoscroll: true,
margin: '0 5 0 5',
html: jsonData.email
},
// ...
]
});
It should be autoScroll, not autoscroll.
Got it!
I had to add overflowY: 'scroll' to the center panel.
Thev's answer is correct; however, it depends upon which version of Ext JS you are using (read below).
autoscroll means nothing to Ext JS, specifically. It becomes a new Javascript property entirely distinct from autoScroll due to the casing.
Watch out, though: Ext's 5.1 Documentation specifies that autoScroll is now deprecated and that scrollable (with the appropriate configuration) should be used, instead.
I want to put some label/fields in a dialog/window. See below
I would like to stretch the field part to maximum, and I would like to shrink the label to the allowed minimum.
I thought border layout would be the best in that situation :
{
xtype: 'panel',
//flex: 1,
margin: '3',
border: true,
layout: 'border',
items: [
{
xtype: 'label',
region: 'west',
text: 'label'
},
{
xtype: 'numberfield',
region: 'center'
}
]
}
However when I do that, the field disappears and even more strangely, the dialog moves to the (0,0) position in the frame. Ie. the dialog moves to the top left corner :
Am I not understanding something here? The dialog also uses a border layout. Ie the buttons are in a south panel. Is it maybe not allowable to use a border inside a border for a dialog? Is this an extjs bug?
Is there some other way to achieve what I want to do? I understand you can use fieldLabel on a textfield. But I wanted to have two seperate components so I could have more control.
I am using extjs to build a portal and I have the following problem. The images are more than the height of the tab (on the right size). What I want is to add a vertical scroll bar on this tab. How can I do this in extjs?
This is the part of my code:
items: [{
xtype: 'tabpanel',
activeTab: 0,
flex: 2,
items: [{
xtype: 'panel',
title: 'Images',
items: [{contentEl:'img',autoScoll: true,height:11200,overflowY : String }]
},{
xtype: 'panel',
title: 'Material',
items: [{contentEl:'msg',autoScoll: true,height:11200,overflowY : String }]
}]
}]
Thanks.
I can see in your code autoScoll instead of autoScroll: true.
It seems to be a typo.
Check this out.
Try adding layout:fit and autoScroll:true.
Have you tried this -
overflowY: 'scroll'
Here's what it says in the documentation -
'scroll' to always enable vertical scrollbar (Style overflow-y:
'scroll').
http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.Component-cfg-overflowY
For ExtJS 6 you can use Ext.panel.Panel.scrollable.
To enable vertical scroll you can set it as scrollable: 'vertical'.
To force vertical scroll regardless of content you can pass Ext.scroll.Scroller config:
scrollable: {
y: 'scroll'
}
I'm following examples in the "ExtJS in Action" book and I ran into a problem with one of them. The code intends to add new panels to a window, unfortunately when the panels being added are collapsed by default, they are not rendered correctly.
Here is the code in question:
var childPnl1 = {
frame: true,
height: 50,
html: 'My First Child Panel',
title: 'First children are fun'
};
var myWin = new Ext.Window({
height: 300,
width: 300,
title: 'A window with a container layout',
autoScroll: true,
items: [
childPnl1
],
tbar: [
{
text: 'Add child',
handler: function() {
var numItems = myWin.items.getCount() + 1;
myWin.add({
title: 'Child number ' + numItems,
height: 60,
frame: true,
collapsible: true,
collapsed: true,
html: 'Yay, another child!'
});
myWin.doLayout();
}}
]
});
myWin.show();
When I run it, I get the result presented in this fiddle:
http://jsfiddle.net/PHaP4/
When I hit the 'Add child' button, the collapsed panels are rendered as very narrow elements, as if width was not properly set.
Is this a bug in Ext or is there a new way of doing this properly in ExtJS4?
The new public 4.0.7 release seems no to have this bug fixed yet.
Looks like a bug in ExtJS 4.0.2, and appears to be fixed in ExtJS 4.0.5. Here is what I found in the release notes:
[EXTJSIV-2547] - Child components not rendered.sized in initially
collapsed, uncontained Panel.
My job has a premium account, so I was able to download and check 4.0.5. You'll have to wait for the general release, though.