Results 1 to 2 of 2

Thread: Ext.window

  1. #1
    Ext User
    Join Date
    Nov 2007
    Location
    US
    Posts
    55

    Default Ext.window

    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 .
    Code:
    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

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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:

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •