We Keep Coding

extjs 3.4 column not fully expanding when window is maximised

I am creating an EXT application that uses several Panel components. One of them is a GridPanel containing a single Column. In my GridPanel I have set the autoExpandColumn config to this Column because one of my Panel components is collapsible, so when it is collapsed the other Panel components expand and the Column also expands. When the Window is at its normal size and the collapsible Panel is collapsed, the Column does expand to take up the full width of the GridPanel. However, when the Window is maximised, the column does not expand, but stays at the same width that it was when the window was maximised and the collapsible Panel was not collapsed (this is bigger than when the Window is at its normal size). The Window has a BorderLayout which is why the first two Panel components use the region property.
Here is the relevant code:
config for the Window:
title: 'Engineering Works',
width: 915,
height: 550,
// minHeight: 550,
// minWidth: 915,
resizable: false,
padding: 10,
shim:false,
// monitorResize: true,
confirmClose: true,
animCollapse:false,
constrainHeader:true,
style: {
margin: "10px"
},
layout: "border",
items: [filterFormPanel,centrePanel]
Collapsible panel:
var filterFormPanel = new Ext.FormPanel({
region: "west",
monitorResize:true,
width: "38%",
title: "Filter",
collapsible: true,
id: windowId + "filter",
items: [stationsPanel, datesPanel, daysPanel, impactPanel, searchButton]
});
centrePanel (contains two other panels, the first of which (searchResultsPanel) is the GridPanel explained above
var centrePanel = new Ext.Panel({
region: "center",
layout:'border',
monitorResize:true,
items: [searchResultsPanel,individualResultPanel]
});
searchResultsPanel (contains a rowclick listener which I've omitted because it's very long and not relevant to this problem):
var searchResultsPanel = new Ext.grid.GridPanel({
title: "All Results",
id: windowId + "allresults",
border: false,
monitorResize:true,
autoScroll: true,
region:'center',
forceFit: true,
colModel: myColumnModel,
autoExpandColumn: windowId + "summarycolumn",
store: mystore
});
It's worth pointing out that the GridPanel itself does expand properly at all times, it's just the Column inside it does not take the full width of the GridPanel when the Window is maximised and the filterFormPanel is collapsed.
I have tried, without success:
Putting the searchResultsPanel inside its own parent Panel and giving it a layout of fit, as per this question (and some others). In any case I realised this is probably moot because this concerns the GridPanel not expanding, a problem which I do not have.
Setting the width config of the Column to be equal to the width of the GridPanel when the collapsible Panel is collapsed and expanded. This did not solve my problem and caused the Panel components on the right (inside centrePanel) to have horizontal scroll bars when the collapsed Panel was expanded.

I solved this problem by removing the autoExpandColumn config in my GridPanel and surrounding the forceFit config with viewConfig because it's a config of the GridView component. So my GridPanel now looks like this (minus the listeners):
var searchResultsPanel = new Ext.grid.GridPanel({
title: "All Results",
id: windowId + "allresults",
border: false,
monitorResize:true,
autoScroll: true,
region:'center',
colModel: myColumnModel,
viewConfig: {
forceFit: true
},
store: mystore
});

Extjs Scroll to position inside tabPanel

I have a window, containing a tabPanel, this tabPanel has 4 tabs.
I wanted to write down something like user manual so I created several panels as blocks, each panel contains some text and pics.
from another button, I want to scroll to a particular postiton in that tab. How can I do it? here is my structure, and let's say I want the button to open the first tab, scrolling to the third panel (id:here).
tabPanel:
var tabs = Ext.createWidget('tabpanel', {
id: 'myTabs',
header: false,
activeTab: 3,
closable: true,
defaults:{ autoScroll:true },
items: [
{
title: 'first',
itemId: 'firstTab',
items: [
{
xtype: 'panel',
html: text39,
cls: 'layout_text1'
},
{
xtype: 'panel',
html: text40,
cls:'layout_subtitle'
},{
xtype: 'panel',
id: 'here',
html: text41,
cls: 'layout_text2'
}]
});
window:
var UMwindow = new Ext.Window({
id: 'myWindow',
name: 'userManual',
closable: true,
floating: true,
width: 900,
height: 600,
items : myTabs,
}).show();
I managed to open the window then activating the first tab using: Ext.getCmp('tabs').setActiveTab('firstTab'); but then I couldn't figure out how to scroll down to the position i need "third panel in my example". do I have to add property to the panel such as position or something?

I would gladly help but I'm unable to get a working jsfiddle demo out of this. I imagine that what you are trying to do requires firing setActiveTab for the tab panel then jumping to the item you would like to show, using that item's offset.

Resizing child items of vbox

We recently updated our ext-js from 4.1 to 4.2. On 4.1 following code made it possible to resize child items of vbox used here. We could drag border between those children, and both items would resize.
In 4.2 there is no way to resize those children. Not even cursor changes the shape when pointing at correct space.
Ext.define('Example.view.NavPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.exampleNavPanel',
requires: ['Example.view.example.List', 'Example.view.example2.List', 'Example.view.paneledycji.EditTabPanel'],
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start'
},
items: [
{
xtype: 'panel',
title: 'Navpanel',
collapsible: true,
flex: 1,
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{xtype: 'exampleList', flex: 1},
{xtype: 'example2List', flex: 3}
]
},
{
xtype: 'editTabPanel',
flex: 1
}
]
});
I tried adding
resizable:true
to first child. It made the cursor change shape when pointing at the border, and I could drag it around... but the children wouldn't resize. When I removed flex from first child I finally could resize the items, but it had few problems:
I could resize first item both in height and width, I want only height, and it's how it worked in 4.1
the vbox would give as much space as needed for first child, and if first child was too big 2nd child wasn't even in the window, making it impossible to see, or to resize first child, as the border was offscreen
setting minHeight on either child had completely no effect
I want to be able to set minimum and maximum height for upper child, ideally in percentage, and disable width resizing. Ideally I would also like to be able to set default sizes for both children. I can't work it out using any combinations of configs listed at docs.sencha.com. What do I have to do to accomplish this effect?

You can remove the flex attribute after the initial layout using the boxready event. This way, you benefit from the initial auto sizing, but it won't prevent the component from being resized later.
For your second issue, use the resizeHandles option to specify the sides that can be grabbed for resizing.
Ext.define('Example.view.NavPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.exampleNavPanel',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
title: 'Navpanel',
flex: 1,
resizable: true,
resizeHandles: 's',
listeners: {
single: true,
boxready: function() {
delete this.flex;
}
}
},{
xtype: 'component',
html: 'editTabPanel',
flex: 1
}]
});

scroll two ext.TabPanels together

So I have been searching everywhere for the past week but I cant find a way to get two "Ext.TabPanel to scroll together.
I am making this page to have Ext.Panel which has two items :
var MyBorderPanel = new Ext.Panel({
layout: 'border',
renderTo: 'command_display',
cls: 'auto-width-tab-strip',
height:800,
items: [
{
region: 'west',
title: 'item1: <?=ui::getURLField("item1")?>',
split: true,
width: 500,
minSize: 100,
maxSize: 900,
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel
baseTab
},
{
region: 'center',
title: 'item2 : <?=ui::getURLField("item2")?>',
split: true,
margins: '0 0 0 0',
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel
compareTab
}
]
});
These items : baseTab and compareTab are described like :
var baseTab = new Ext.TabPanel({
border: false, // already wrapped so don't add another border
activeTab: 0, // second tab initially active
items: [
<?php
$uihelper->perform("InitItem1Iteration");
$comma = true;
while($uihelper->hasNext("Item1Iteration"))
{
$uihelper->next("Item1Iteration");
?>
<?=(!$comma?",":"")?>
{
title: 'some php code',
id: 'some php code',
autoScroll: true,
contentEl: 'some php code',
}
<?php
$comma = false;
} ?>
]
});
Similar is the Item2.
Now basically what I want is. that these two tab panels have sroll bars, so I want that whenever I scroll one tabPanel, the other tab panel automatically scrolls along with it.
Is it even possible?
Thanks
Andy

Short answer, should be...
You need to access the scroller item of the specific container that you are interested in.
I would start investigating with something in the line of:
listeners: {
scroller: {
scroll: function(scroller, offset) {
console.log(scroller, offset);
}
}
}
I know that containers have scrollers defined, but I do not think that the tabpanel does. So this kind of listener would have to be added to every item (or the item could bubble the event, untested though).
(and of course, once you can capture the scroll event setting the other panel to the same offset shouldn't prove difficult)
Hope that this at least gives you a direction to move in.

You want to be looking at the scroller, as mentioned by #zelexir. Here is a fiddle with my example code http://jsfiddle.net/YgTuc/1/ This is for two panels, but should work just the same for panels in a TabPanel.

How to get panel within vbox layout to fill container?

I'm having trouble getting a panel to fill the space within its container panel. The container is a panel with a vbox layout having two child panels. I looked at Extjs how to set 100% height for vbox panel
and have something similar but it doesn't seem to work.
Screenshots:-
http://i.imgur.com/nAbCr.png
The screenshot is from when i use a 'fit' layout or dont even have the combobox or optionsview in a containing panel. So, what i want is for the 'options' panel to extend all the way down till the 'results' panel.
with the present vbox layout this is what i get - http://i.imgur.com/cB0k1.png
Ext.define('PA.view.CreateReportView', {
extend: 'Ext.panel.Panel',
alias: 'widget.createreportview',
id: 'createreport-panel',
requires: [
'PA.view.OptionsView', // options panel
'PA.common.Connection'],
title: 'Create Report',
items: [{
xtype: 'panel',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
border: false,
height: '50px',
items: [{
xtype: 'combobox',
....
}]
}, {
xtype: 'panel',
border: false,
flex: 1,
items: [{
xtype: 'optionsview', // options panel
style: {
paddingTop: '10px'
}
}]
}]
}]
});

The value of height: should be a number, not a string. So use height: 50 instead.

I think you have it close to what you need. Couple of observations:
1. Heights need to be set as integers (no px suffix)
2. Each container that will have children should have a layout defined for them, even though there is default - it might not be what you want.
Here is your layout working reasonably well http://jsfiddle.net/dbrin/NJjhB/
One other suggestion I would add is to use a tool like Illuminations for Developers - a firebug plugin that knows about ExtJS framework.