View Full Version : Resize?

12 Jul 2009, 2:17 AM
Hi I've modified the XML Tree example and am trying to get it to resize when i drag the corner of the browser window. I've added the preserveRatio and dynamic properties from the basic resize example, but not having much success. Any ideas?


* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license

// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
Ext.app.BookLoader = Ext.extend(Ext.ux.tree.XmlTreeLoader, {
processAttributes : function(attr){
if(attr.first){ // is it an author node?

// Set the node text that will show in the tree since our raw data does not include a text attribute:
attr.text = attr.first + ' ' + attr.last;

// Author icon, using the gender flag to choose a specific icon:
attr.iconCls = 'author-' + attr.gender;

// Override these values for our folder nodes because we are loading all data at once. If we were
// loading each node asynchronously (the default) we would not want to do this:
attr.loaded = true;
attr.expanded = true;
else if(attr.title){ // is it a book node?

// Set the node text that will show in the tree since our raw data does not include a text attribute:
attr.text = attr.title + ' (' + attr.published + ')';

// Book icon:
attr.iconCls = 'book';

// Tell the tree this is a leaf node. This could also be passed as an attribute in the original XML,
// but this example demonstrates that you can control this even when you cannot dictate the format of
// the incoming source XML:
attr.leaf = true;


var detailsText = '<i>Select a Layer to see more information...</i>';

var tpl = new Ext.Template(
'<iframe src="{url}" height="100%" width="100%" frameborder="0" scrolling="no"></iframe>'

var myContent = new Ext.Panel({
title: 'Information Explorer',
renderTo: Ext.getBody(),
layout: 'border',
width: document.body.clientWidth,
height: document.body.clientHeight,
preserveRatio: true,
items: [{
xtype: 'treepanel',
title: 'Layers',
id: 'tree-panel',
region: 'west',
margins: '2 2 2 2',
width: 300,
split: true,
autoScroll: true,
collapsible: true,
rootVisible: false,
root: new Ext.tree.AsyncTreeNode(),

// Our custom TreeLoader:
loader: new Ext.app.BookLoader({

listeners: {
'render': function(tp){
tp.getSelectionModel().on('selectionchange', function(tree, node){
var el = Ext.getCmp('details-panel').body;
if(node && node.leaf){
tpl.overwrite(el, node.attributes);
region: 'center',
title: 'Layer Details',
id: 'details-panel',
autoScroll: true,
margins: '2 2 2 2',
cmargins: '2 2 2 2',
height: 220,
html: detailsText


12 Jul 2009, 2:21 AM
If you are planning to write a RIA, start in the correact way and use an Ext.Viewport to encapsulate the browser Window.

Use the correct layout config to specify a layout manager which performs sizing on child items, and sizing will be handled.

Examples in your examples directory.

Like this: http://extjs.com/deploy/dev/examples/layout-browser/layout-browser.html

13 Jul 2009, 11:50 AM
Thanks. I was struggling with the layout examples, as they were inside another layout, all a bit confusing. But I swapped out Panel for Viewport and it works a treat.