PDA

View Full Version : Flex not happening when extending window



martyh1
8 Apr 2013, 2:31 PM
I can't seem to get flex to take affect for a panel that is inside a object that extends 'Ext.window.Window'. There are 3 files, index.html, demo.js, and file.js below. After it runs, it appears as if flex wasn't set at all (equal size containers). I've noticed that if I add panel collapse functionality, that it gets resized after the main panel is collapsed and expanded.

----------- index.html ---------------


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><html>
<title>demo</title>
<link rel="stylesheet" type="text/css" href="../../../libs/extjs4/resources/css/ext-all.css">
<script type="text/javascript" src="../../../libs/extjs4/ext-all.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
</body>
</html>


----------- demo.js ---------------


Ext.Loader.setConfig({
enabled : true
});


Ext.Loader.setPath('path', '../');
Ext.onReady(function() {
var me = this;
var myviewport = Ext.create('Ext.container.Viewport', {
onBoxReady: function(){
Ext.create('myWindow', {
}).show();
}
});

----------- file.js ---------------
Ext.define('myWindow', {
extend : 'Ext.window.Window',


initComponent : function () {
var me = this;


Ext.applyIf(me, {


items : [
{
xtype : 'panel',
layout : 'hbox',
items : [
{
xtype : 'container',
flex : 1,
margin : '15 40 15 0',
layout : {
align : 'stretch',
type : 'vbox'
},
items : [{
xtype : 'textfield',
margin : '0 0 15 0',
fieldLabel : 'Name'
}
]
},
{
xtype : 'container',
flex : 3,
margin : '15 0 15 0',
layout : {
align : 'stretch',
type : 'vbox'
},
items : [{
xtype : 'combobox',
margin : '0 0 15 0',
fieldLabel : 'Name2',
}
]
}
]
}
]
});
me.callParent(arguments);
}
});

evant
8 Apr 2013, 3:44 PM
What are you expecting to happen? Flex means size these in a ratio based on the dimensions of the parent. You've declared a window with no size, or layout, then a child panel with no size.

martyh1
9 Apr 2013, 7:13 AM
I'm a little new at this, but isn't Sencha supposed to size things for you based on content if you don't specify those values? And there are default layout values, correct? If no flex value is given, then things are sized by Sencha in what seems an appropriate manner. Why can it not size them (again) when flex values are given. You can see this "second sizing" occur if you add the collapsible panel option and collapse/expand the panel. The contents are then sized according to flex values.