Getting height of ExtJS panel used as border region - javascript

I'm struggling mightily to get the height of an ExtJS panel and the only reason I can think it's any different is that it's the panel defined as a border region, because I've not had this problem otherwise (maybe I need to report a bug to them). I'll begin with some code that demonstrates how I'm trying to get the height, with results demonstrating what the height really is, what ExtJS says it is, and how it's not an issue with a panel using a different layout (one of the panels inside the border region):
'cmBuildTab #cmProductExplorer': {
afterrender: function(productExplorer) {
var domNode = Ext.getDom(productExplorer.el),
savedSearchesPanel = productExplorer.down('#savedSearchesPanel');
console.log('productExplorer.getHeight(): ' + productExplorer.getHeight());
console.log(productExplorer.componentLayout);
console.log(productExplorer.componentLayout.lastComponentSize);
console.log(domNode);
console.log('domNode.style.height: ' + domNode.style.height);
console.log('savedSearchesPanel.getHeight(): ' + savedSearchesPanel.getHeight());
}
},
I was initally encouraged I might have a couple of alternate ways to get the height, via the dom node, or via componentLayout.lastComponentSize but neither of these are accessible to Javascript code, only the chrome console. My final try then would be to parse the returned dom string but that is a horrible hack. Suggestions appreciated; below the console.log results is the pertinent portion of my view config.
console.log results:
productExplorer.getHeight(): 2
Ext.Class.newClass
autoSized: Object
borders: Object
calculateDockBoxes_running: false
childrenChanged: true
frameSize: Object
id: "dock-1155"
info: Object
initialized: true
initializedBorders: true
lastComponentSize: Object
height: 787
width: 254
__proto__: Object
layoutBusy: false
layoutCancelled: false
onLayout_running: false
owner: Ext.Class.newClass
previousComponentSize: undefined
targetInfo: Object
__proto__: Class.registerPreprocessor.prototype
undefined
<div id=​"panel-1049" class=​"x-panel x-box-item x-panel-default" role=​"presentation" aria-labelledby=​"component-1198" style=​"margin:​ 0px;​ width:​ 254px;​ height:​ 787px;​ left:​ 0px;​ top:​ 0px;​ ">​…​</div>​
domNode.style.height:
savedSearchesPanel.getHeight(): 151
View config (partial):
},{
region: 'west',
collapsible: true,
title: 'Product Explorer',
itemId: 'cmProductExplorer',
split: true,
width: '20%',
minWidth: 100,
layout: {
type: 'vbox',
pack : 'start',
},
items: [{
collapsible: true,
width: '100%',
border: false,
title: 'Search',
itemId: 'savedSearchesPanel',
items: [{
border: false,
xtype: 'cmSearchTermAccordionPanel'
},{
border: false,
margin: '5 20 0 20',
html: 'Saved Searches:<hr>'
}]
},{

afterrender is not the event you want to use to determine the heights of components, it fires when the elements have been rendered not after they have been sized. If you are using 4.1 you can use the boxready event which fires only once the the container is intially sized http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-event-boxready . If not you can use the afterlayout event to determine size but that event fires every layout.
Also fyi widths as percentages are not documented as supported in 4.0, I've seen them work and I've seen them fail.
Here is some code I hijacked from the Viewport example thanks to a court ruling this is ok.
4.1
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 150,
//ADD LISTENERS
listeners: {
afterrender:function(){console.log( 'afterrender ' +this.getHeight())},
boxready:function(){console.log( 'boxready ' +this.getHeight())}
}
// could use a TreePanel or AccordionLayout for navigational items
}, {
region: 'south',
title: 'South Panel',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
Output :
afterrender 2
boxready 276

Related

Scrollbar location is wrong in layout : fit

I have a Panel and in that panel I am loading grid dynamically.
Here is code for panel
{
xtype: 'panel',
region: 'center',
frame: true,
scrollable: true,
itemId: 'MyGrid',
reference: 'MyGrid',
layout: {
type: 'vbox',
align: 'stretch'
},
items: []
}
and Sample of grid.
Ext.define("MyApp.view.MYGrid", {
extend: 'Ext.grid.Panel',
alias: 'widget.MyGrid',
requires: [
'Ext.grid.filters.Filters',
'Ext.form.field.ComboBox',
],
emptyText: 'No data available.',
disableSelection: true,
margin: '3 3 0 3',
collapsible: true,
multiSelect: false,
closable: true,
columnLines: true,
uniqueFields: [],
});
initComponent: function() {
var me = this;
me.fields = me.prepareFields(me.headersXmlDoc);
me.columns = me.prepareColumns(me.headersXmlDoc);
me.store = me.prepareGridStore(me.headersXmlDoc);
this.callParent(arguments);
},
Now when Grid have enough data then both horizental and vertical scroll is coming correctly but When grid have less data with more columns scrollbar is coming down. I supposed just beow the last record but it comming in down.
All the grid is taking same height though it have a less record.
Example pic
https://i.stack.imgur.com/RKdTb.png
I want scrollbar just below the last data. By debugging I found layout : fit
But not sure how to overcome out from that.
Can anybody help me that. Thanks for help.
You need to apply overflowY as true for grid.I don't think there is some problem with fit layout.If above config doesn't work share some fiddle.

Column layout in EXTJS

I am new to ExtJs. I need to create an entry form in 2 columns using column layout.
My code is as follows:
Ext.onReady(function(){
var patientForm = new Ext.FormPanel({
renderTo: "patientCreation",
frame: true,
title: 'Search Criteria',
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
labelWidth: 85,
width: 900,
items: [
{
layout:'column',
items:[
{ // column #1
columnWidth: .33,
layout: 'form',
items: [
{ xtype: 'textfield',
fieldLabel: 'FirstName',
name: 'firstName',
vtype : 'alpha',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'MiddleName',
name: 'middleName',
vtype : 'alpha'
}
] // close items for first column
}]
}]
});
var win = new Ext.Window({
layout:'form',
closable: false,
resizable: false,
plain: true,
border: false,
items: [patientForm]
});
win.show();
});
But when I run the code, I got h is undefined error. How to design a form in column layout? Is there any procedure, steps or links which give a clear idea?
I have run the same code with ExtJs 3.2.2 and got a similar error. But when I removed renderTo: "patientCreation"
code worked:
That part is not necessary 'cause you are placing the form in a the window.
I do not know anything about ExtJS 3. If you are using ExtJS 4, then you have specified layout config at wrong place. You have specified it inside items config, it should not be inside items config.
Layout can be specified as follows in ExtJS 4:
Ext.define('your_domain_name.viewName', {
extend : 'Ext.panel.Panel',
alias : 'widget.any_name_you_want',
layout : 'column',
initComponent : function() {
this.items = [
// all items inside form/panel will go here
];
this.callParent(arguments);
}
});
You can get sample code about all the panels here
try applying renderTo config to window instead of form
check example

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.

expand Ext JS GridPanel column width

I using Ext JS 2.3.0 and have a GridPanel that looks like this:
I want to expand the width of the column such that the scroll bar is pushed over the extreme right of the panel, thus eliminating the empty space to the right of the scroll bar.
The relevant code is shown below:
var colModel = new Ext.grid.ColumnModel([
{
id: 'name',
header: locale['dialogSearch.column.name'],
sortable: true,
dataIndex: 'name'
}
]);
var selModel = new Ext.grid.RowSelectionModel({singleSelect: false});
this._searchResultsPanel = new Ext.grid.GridPanel({
title: locale['dialogSearch.results.name'],
height: 400,
layout: 'fit',
stripeRows: true,
autoExpandColumn: 'name',
store: this._searchResultsStore,
view: new Ext.grid.GridView(),
colModel: colModel,
selModel: selModel,
hidden: true,
buttonAlign: 'center',
buttons: [
{
text: locale["dialogSearch.button.add"],
width: 50,
handler: function () {
}
},
{
text: locale["dialogSearch.button.cancel"],
width: 50,
handler: function () {
entitySearchWindow.close();
}
}
]
});
You should use the forceFit config for the grid view:
this._searchResultsPanel = new Ext.grid.GridPanel({
title: locale['dialogSearch.results.name'],
height: 400,
layout: 'fit',
viewConfig: {
forceFit: true
}, ....
I'm not sure if this isn't redundant so you can remove this part view: new Ext.grid.GridView(),
The problem is not the column but the grid itself which does not stretch to fill the window body completely.
Put the layout: 'fit' property onto the window config instead of onto the grid config (where it needs to be removed). You should also remove the height property because the grid height will determined by the window's size.
Add
flex: 1,
to one of the the columns config

Why am I getting errors in ext-all-debug.js in lines 4236 - 4242?

I've developed a PHP framework that generates ExtJS code in the form of an application.
This involves building the full ExtJS object literal on the first call, e.g.:
Ext.onReady(function(){
menuItemStart = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start menu item.',
cls:'menuItem'
});
...
and then navigation in the application consists of event handlers which load PHP files via AJAX that output ExtJS code, and then execute this code with this function:
function loadViewViaAjax(url, paramTargetRegion) {
Ext.Ajax.request({
url: url,
success: function(objServerResponse) {
var responseText = objServerResponse.responseText;
var scripts, scriptsFinder=/<script[^>]*>([\s\S]+)<\/script>/gi;
while(scripts=scriptsFinder.exec(responseText)) {
eval(scripts[1]);
}
}
});
}
This works well. However, I now have this situation where when a page is loaded from PHP instead of via a triggered ExtJS event handler, I get errors that are varied but all come from one block of code in the ext-all-debug.js file, namely in line 4236 and line 4242:
Has anyone experienced anything similar or know what could be causing this?
Addendum
Yes #ChrisR, here is an error I can reproduce on my machine:
It says it is getting the error in the fourth line of this code, but if I click on it, it takes me to line 4242 shown above in the ExtJS library code.
<script type="text/javascript">
clearExtjsComponent(targetRegion);
var panel_form = new Ext.FormPanel({
labelWidth: 100,
frame:true,
style: 'margin: 10px',
title: 'Test Product (TEST PAGE 2)',
bodyStyle:'padding:5px 5px 0',
width: 500,
defaultType: 'textfield',
items: [{
fieldLabel: 'ID',
value: "111",
name: 'id',
width: 370,
hidden: false,
style: 'text-align: right',
name: 'id',
width: 50,
hidden: false,
},{
fieldLabel: 'Product',
value: "Paper",
xtype: 'displayfield',
name: 'product',
width: 370,
hidden: false,
},{
fieldLabel: 'Label',
value: "none",
name: 'product3',
width: 370,
hidden: false,
},{
fieldLabel: 'Label',
value: "first line\<br/>second line\<br/>third line",
xtype: 'displayfield',
height: 100,
xtype: 'displayfield',
name: 'product4',
width: 370,
hidden: false,
}
],
buttons: [{
text: 'Save',
handler: function() {
if(panel_form.getForm().isValid()){
panel_form.getForm().getEl().dom.action = 'backend/application/help/test';
panel_form.getForm().getEl().dom.method = 'POST';
panel_form.getForm().submit({
success : function(form, action) {
replace_region_with_uri_content('backend/modules');
}
})
} else {
Ext.Msg.minWidth = 360;
Ext.Msg.alert('Invalid Form', 'Some fields are invalid, please correct.');
}
}
},{
text: 'Cancel',
handler: function(){
replace_region_with_uri_content('backend/modules');
}
}]
});
replaceComponentContent(targetRegion, panel_form);
hideComponent(regionHelp);
</script>
Is this on IE? If so, all the trailing commas in your code may be the issue (they certainly are an issue). Also, lots of duplicate configs in your first item. Try running JSLint on your code from time to time to catch stuff like that.

Categories