Extjs5 Textarea Resizing

Question

I have the following form defined:

Ext.define('Admin.view.messaging.MsgDataForm',{
    extend: 'Ext.window.Window',
    xtype: 'msgdataform',
    title: 'Compose Practice Message',          
    defaultFocus: '[name=subject]',     
    modal: true,            
    layout: 'fit',  
    closable: false,
    width: 700, 
    items: [{
        xtype: 'form',      
        layout: 'anchor',
        fieldDefaults: {labelWidth: 60,labelAlign: 'right',anchor: '100%'},
        padding: 10,
        items: [{           
            xtype: 'fieldcontainer',
            layout: 'hbox',
            fieldLabel: 'Date',                                             
            items: [{
                xtype: 'datefield',
                name: 'msgdate',                    
                format: 'F j, Y g:i A',
                readOnly: true,
                flex: 1,
                margin: '0 5 0 0'
            },{
                xtype: 'combo',
                name: 'priority',           
                fieldLabel: 'Priority',
                store: Ext.create('Ext.data.Store',{
                    fields: ['priorityval','priority'],
                    data: [{'priorityval':0,'priority':'Low'},{'priorityval':1,'priority':'Normal'},{'priorityval':2,'priority':'High'}]
                }),
                queryMode: 'local',
                displayField: 'priority',
                valueField: 'priorityval',
                width: 160
            }]              
        },{
            xtype: 'textfield',
            name: 'subject',    
            fieldLabel: 'Subject'
        },{
            xtype: 'textarea',
            id: 'editor1',
            name: 'message',            
            style: {background: '#E1E1E1'}
        }]
    }],
    buttons:[{
        text: 'Send',
        handler: 'onClick_btnMsgDataSend'
    },{
        text: 'Cancel',     
        handler: 'onClick_btnMsdDataCancel'
    }]
});

The height of the textarea is not properly sized when the window is rendered. Additionally, when the window is resized, only the width of the textarea is resized - not the height. Attempting to listen to the resize event on the text area after the window is resized but it isn't fired. Any ideas? Thanks.

qmateub qmateub · Accepted Answer · 2015-05-12T09:12:42

You width is properly resized because of the default configuration of 'anchor:100%'.

On the other hand, the height it's a little bit more difficult, the idea that comes to me now is try to with a particular css (using property cls) manipulate the height (height:'100%') or something like that. Because you can't use flex in a textarea, you could also nest de textarea in a panel and use flex on it to try it.

Check the documentation of textarea of ExtJS5 for other posible solutions: http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.form.field.TextArea

Extjs5 Textarea Resizing

1 Answers