1. #1
    Sencha Premium Member
    Join Date
    Jan 2008
    Posts
    112
    Vote Rating
    22
    KajaSheen will become famous soon enough KajaSheen will become famous soon enough

      0  

    Default [SOLVED PARTLY] Mixing labelAlign and trouble with width...

    [SOLVED PARTLY] Mixing labelAlign and trouble with width...


    It would be great if it give labeAlign to the item directly...

    I'd like a form with input text and textarea to look like this:

    name: []
    comment:
    []

    Is there any way to do this? Because otherwise the textarea gets very narrow...

    Also I have trouble with "defaults: {width: 230}" and "width:400". The textarea uses the default over the defined with, which works just fine with the textfield

    Thanks a lot...

    From the example:
    PHP Code:
        var simple = new Ext.FormPanel({
            
    labelWidth75// label settings here cascade unless overridden
            
    url:'save-form.php',
            
    frame:true,
            
    title'Simple Form',
            
    bodyStyle:'padding:5px 5px 0',
            
    width550,
            
    defaults: {width230},
            
    defaultType'textfield',

            
    items: [{
                    
    fieldLabel'Name',
                    
    width:350
                
    }, new Ext.form.TextArea({ 
                    
    allowBlank:false
                    
    fieldLabel:"Comment"
                    
    value:"My Text\r\nmore text",
                    
    width:400
                 
    })            
                
            ],

            
    buttons: [{
                
    text'Save'
            
    },{
                
    text'Cancel'
            
    }]
        });

        
    simple.render(document.body); 
    Last edited by KajaSheen; 19 Jan 2008 at 2:49 AM. Reason: styling and topic

  2. #2
    Sencha Premium Member
    Join Date
    Jan 2008
    Posts
    112
    Vote Rating
    22
    KajaSheen will become famous soon enough KajaSheen will become famous soon enough

      0  

    Default Solved partyl

    Solved partyl


    Ok, a couple of hours later I figured out a way to display my textfield like I want to, but it is far from perfect and the width problem remains...

    Added an itemCls and a cls to the textArea. And a couple of styles to the file.

    PHP Code:
        var simple = new Ext.FormPanel({
            
    labelWidth75// label settings here cascade unless overridden
            
    url:'save-form.php',
            
    frame:true,
            
    title'Simple Form',
            
    bodyStyle:'padding:5px 5px 0',
          
    defaults: {width230},
            
    width650,
            
            
    defaultType'textfield',

            
    items: [{
                    
    fieldLabel'Name',
                    
    width325
                }, new 
    Ext.form.TextArea({ 
                    
    allowBlank:false
                    
    fieldLabel:"Comment"
                    
    value:"My Text\r\nmore text",
                    
    width400,
                    
    itemCls'ux-label-top',
                    
    cls'textarea'
                 
    })            
                
            ],

            
    buttons: [{
                
    text'Save'
            
    },{
                
    text'Cancel'
            
    }]
        });

        
    simple.render(document.body); 
    HTML Code:
    .ux-label-top label{width:auto;float:none;clear:none;display:inline;margin-bottom:4px;position:static;}
    .ux-label-top .x-form-element{padding-left:0 !important;padding-top:4px;}
    .ux-label-top .x-form-item{padding-bottom:4px;}
    .ux-label-top .textarea {width: 397px !important; height: 200px !important;}

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Here is the same form without special markup:

    Code:
    var simple = new Ext.FormPanel({
    	url:'save-form.php',
    	frame:true,
    	title:'Simple Form',
    	bodyStyle:'padding:5px 5px 0',
    	width:650,
    	defaults:{
    		layout:'form',
    		defaultType:'textfield',
    		labelWidth:75,
    	},
    	items:[{
    		items:[{
    			fieldLabel:'Name',
    			width:320
    		}]
    	},{
    		labelAlign:'top',
    		items:[{
    			xtype:'textarea',
    			allowBlank:false,
    			fieldLabel:"Comment",
    			value:"My Text\r\nmore text",
    			width:400
    		}]
    	}],
    	buttons:[{
    		text:'Save'
    	},{
    		text:'Cancel'
    	}]
    });
    simple.render(document.body);

Thread Participants: 1