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
});

Extjs4: How to add head title from CheckboxModel in grid?

I want to add header title from CheckboxModel column in grid.
Truth be told, I wanted to add multiple checkbox column in grid like that.(attached image file)
My mission is one checkbox have to select only one. But extjs does not have supported RadioModel.
So I had an idea. I could use CheckboxModel of selModel in grid.
BUT it also had a problem. I could not add title in CheckboxModel column.
1. Ankus.js
{
margin: '10 0 0 0',
xtype: 'grid',
minHeight: 100,
layout: 'fit',
frame: true,
resizable: true,
itemId: 'previewGrid',
selModel: Ext.create('Ext.selection.CheckboxModel', {
ignoreRightMouseSelection: true,
headerWidth: 66,
dataIndex: "classIndex",
injectCheckbox:"last",
}), ......
See the image : http://goo.gl/znbTwU
ext-them-gray-all.css
I removed 'x-column-header-inner-empty' elements. BUT it did't work.
How do I do?
Please help me.

Collapsed panel in border-layout: Permanent expand on title-click

i have 2 panels inside a border-layout. The second one is collapsible with configs 'collapsed' and 'titleCollapse' set. When i click on the title it just shows the panel "temporary" which means that it doesn't stick but collapses automatically after i click anywhere else inside my window. It kind of floats in...
Working example: http://jsfiddle.net/suamikim/LNfm8/
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
title: 'panel1',
region: 'center',
flex: 1
},{
xtype: 'panel',
title: 'panel2',
region: 'south',
flex: 1,
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: Ext.Component.DIRECTION_BOTTOM,
titleCollapse: true
}]
}).show();
});
I guess this is a feature of the border-layout because if i put the 2 panels into a box-layout the collapsed panel permanently expands after a click on the title-bar.
I'm aware that the panel would stay expanded if i click on the "double-arrow" or if i click the title a second time after it has been "floated in" but i just don't want this floating-behaviour at all because i experienced it as pretty buggy so far.
I would really appreciate if anyone could tell me how to turn that feature of the border-layout off.
Thanks

Add after titleCollapse property
floatable: false
Look at the fiddle

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.

ExtJS: ViewPort with vertical scroll bar

I have 4-5 grid panels, one form panel and want to put it into one viewport.
Here the code:
var panel = new Ext.Viewport({
layout: 'vbox',
items:[SearchForm,1_grid_panel,2_grid_panel,3_grid_panel]
});
It woks very well, but im need horizontal scroll box because 3rd grid panel located under visible area. How I can add this scroll box?
Update: Example of one grid
var 1_grid_panel = new Ext.grid.GridPanel({
store: some_store,
flex:2,
height: heightOfGrid,
autoExpandColumn: 'id_md_dog',
plugins: expander ,
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: new Ext.PagingToolbar({
pageSize: 100,
store: some_store,
displayInfo: true,
displayMsg: 'text',
emptyMsg: "No topics to display"
}),
columns: []
});

Have you tried autoScroll: true ?

Ah, I really forgot. You need to describe next app structure: Viewport->Panel->items(your grids). Panel must have layout: fit
If I correctly understand your problem.