PDA

View Full Version : Ext.window



yogeshmsharma
28 Nov 2007, 4:00 AM
Hi
I want to show form on window,
I don't want any scrollbar in window. Window should resize automatically when field set is collapse. It is not rendering correctly when field set is collapse .


function createAddDialog(){
Ext.namespace('Ext.nodeCOSData');
Ext.nodeCOSData.COS;
var storeNodeCos=new Ext.data.SimpleStore({
fields: ['abbr', 'COS'],
data : Ext.nodeCOSData.COS
});
var chkNodeid;
var txtNodeId;
var chkIp;
var chkIp;
var txtIp,txtUsername,txtPassword;

var form1 = new Ext.FormPanel({
labelAlign: 'left',
width:450,
bodyStyle: 'padding:20px 20px 0',
items: [{
xtype:'fieldset',
autoHeight:true,
title : 'Config Details',
collapsible:true,
items:[

new Ext.form.TextField({
fieldLabel: 'Node Name',
id : 'nodeName',
allowBlank:true,
value: ''}),

new Ext.form.ComboBox({
fieldLabel: 'Class of Service',
hiddenName:'hidCOS',
name: 'txtCos',
displayField:'COS',
typeAhead: true,
store:storeNodeCos,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
width:135
})
]
},

{
xtype : 'fieldset',
title : 'Discover node by',
collapsible : true,
autoHeight:true,
items : [
chkNodeid= new Ext.form.Checkbox({
id : 'chknodeId',
boxLabel:'NodeId',
labelSeparator:'&nbsp',
width:150
}),

txtNodeId= new Ext.form.TextField({
fieldLabel: 'Node Id',
id : 'nodeId',
allowBlank:true,
value: ''}),

chkIp= new Ext.form.Checkbox({
id : 'chkIp',
boxLabel:'IP Address',
width:150,
labelSeparator:'&nbsp',
value: ''}),

txtIp= new Ext.form.TextField({
fieldLabel: 'IP Address',
id : 'ipaddr',
allowBlank:true,
value: ''}),

chkIp= new Ext.form.Checkbox({
id : 'chkIP',
boxLabel:' Address',
width:150,
labelSeparator:'&nbsp',
value: ''}),


txtUsername =new Ext.form.TextField({
fieldLabel: 'User Name',
id : 'UserName',
allowBlank:true,
value: ''}),

txtPassword = new Ext.form.TextField({
fieldLabel: 'Password',
id : 'Password',
allowBlank:true,
value: ''})
]},
{
xtype : 'fieldset',
title : 'Memory & Storage Details',
autoHeight:true,
collapsible : true,
items : [
new Ext.form.TextField({
fieldLabel: 'Disks',
id : 'txtInternalDisk',
allowBlank:true,
value: ''})


]}
],

});
form1.render('form-addconfigdetails');
txtNodeId.setDisabled(true);

txtUsername.setDisabled(true);
txtPassword.setDisabled(true);
txtIp.setDisabled(true);

chkNodeid.on('check',function(){
txtNodeId.setDisabled(!chkNodeid.getValue())});



chkIp.on('check',function(){
txtIp.setDisabled(!chkIp.getValue())
});

dialog = new Ext.Window( {
closable:true,
width:450,
el:'AddComputeNode',
height:620,
title : 'Add Compute Node',
items : [form1],
keys : [{
key:27,
fn:function(){event_btnCancelNodeClick();}
}],
buttons :
[{text : 'Save'},
{text : 'Cancel'}
]
});
dialog.show();
}//End Create Dialog

Animal
28 Nov 2007, 5:33 AM
You mean the shadow stays the same.

You have to sync that yourself. autoSize means that the window's div is style='height:auto' so it doesn't handle sizing. You will have to add an expand/collapse listener to your collapsible panel, and sync the shadow.

Where p is the collapsible Panel, and w is the Window:



p.on({
beforecollapse: function() {
w.el.disableShadow();
},
collapse: function() {
w.el.enableShadow(true);
},
expand: w.syncShadow.createDelegate(w)
});