PDA

View Full Version : fixed toolbar inside FormPanel



sntial
11 Sep 2010, 1:07 PM
What would be the best way to have a tbar or bbar toolbar stay in a fixed position within a FormPanel?

Condor
12 Sep 2010, 8:34 AM
What do you mean? tbars and bbars always have a fixed position; only the body scrolls.

sntial
13 Sep 2010, 7:09 PM
With this example I get a scrollbar for the entire html body ... basically for the whole panel. What I'm really looking to accomplish is where the field (items) area has a vertical scrollbar instead of the html body scroll.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="./extjs/resources/css/xtheme-gray.css" />
<script type="text/javascript" src="./extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./extjs/ext-all.js"></script>
<script type="text/javascript">

FormTest = Ext.extend(Ext.form.FormPanel, {
initComponent: function() {
this.width = 325;
this.autoHeight = true;
this.buttonAlign = "center";
this.padding = 10;
this.labelWidth = 80;
this.title = "Test Form";
this.items = [
{
xtype: "textfield"
,fieldLabel: "Field 1"
,name: "field1"
},{
xtype: "textfield"
,fieldLabel: "Field 2"
,name: "field2"
},{
xtype: "textfield"
,fieldLabel: "Field 3"
,name: "field3"
},{
xtype: "textfield"
,fieldLabel: "Field 4"
,name: "field4"
},{
xtype: "textfield"
,fieldLabel: "Field 5"
,name: "field5"
}
];
this.tbar = [
{
text: "button1"
,handler: function () { alert(1); }
},{
text: "button2"
,handler: function () { alert(2); }
}
];
FormTest.superclass.initComponent.call(this);
}
});

Ext.onReady(function() {
var oFormTest = null;

oFormTest = new FormTest();

oFormTest.render(Ext.getBody());
});

</script>
</head>
<body>
</body>
</html>


You have to make the window very small to see what I mean (as this test form is small).

Condor
13 Sep 2010, 11:50 PM
1. Remove width:325 and autoHeight:true from the form.
2. Instead of rendering the form, include it in a viewport:

new Ext.Viewport({layout: 'fit', items: oFormText});

sntial
14 Sep 2010, 6:45 AM
With your suggestions and the addition this.autoScroll = true; I get the desired behavior.

Thanks.