How to strech an TextArea to fit a Tab?

[franzisk]

I need to make that textarea fills the Tab in Width and Height, how?

I have this (see the text area field there):

<div id="EDIT-PROFILE-TEXT-DLG" style="visibility:hidden;position:absolute;top:0px;">
	<div class="x-dlg-hd">Editing profile text...</div>
		<div class="x-dlg-bd">
			<div class="x-dlg-tab" title="Profile Description">
				<div class="inner-tab">
					 <textarea id="profileTextEdit" rows="10" style="width:99%; height:100%;" ><?=$description_edit;?></textarea>
				</div>
			</div>
			<div class="x-dlg-tab" title="Profile Headline">
				<div class="inner-tab">
				
				</div>
			</div>
		</div>
	</div>
</div>

JavaScript:

var ProfileTextEdit = function(){
    var dialogProfileEditText, showBtn;    
    return {
        init : function(){
             showBtn = Ext.get('profileTextView'); // the text paragraph
             showBtn.on('dblclick', this.showDialog, this);
        },
       
        showDialog : function(){
            if(!dialogProfileEditText){ 
			    dialogProfileEditText = new Ext.BasicDialog("EDIT-PROFILE-TEXT-DLG", { 
                        autoTabs:true,
                        width:600,
                        height:350,
                        minWidth:300,
                        minHeight:250,
						animateTarget: showBtn,
						draggable: false,
                        shadow:true,
						fixedcenter: true
                });
                dialogProfileEditText.addKeyListener(27, dialogProfileEditText.hide, dialogProfileEditText);
                dialogProfileEditText.addButton('Submit', function(){saveProfileText()} );
                dialogProfileEditText.addButton('Close', dialogProfileEditText.hide, dialogProfileEditText);
            }
            dialogProfileEditText.show(showBtn.dom);
        }
    };
}();
ProfileTextEdit.init();

[tryanDLS]

Use Element.setSize on textarea. Listen to the dialog resize event if you want scale it with the dialog.

[franzisk]

Something like this?

Ext.get('profileTextEdit').setSize('100%', '100%');

[tryanDLS]

Look at the doc - setSize takes numbers, not strings. I'm not sure that setting size in percentages for a textarea works x-browser, but if so, you should do that with setStyle()

[franzisk]

another give up... moving to next...

[fay]

Look at the blog example in \examples\dialog:

txtComment = Ext.get('comment');
// ...
var sizeTextBox = function(){
  txtComment.setSize(dialog.size.width-44, dialog.size.height-264);
};
sizeTextBox();

[franzisk]

Thanks a lot for your help. It was really helpful, code adapted...