如何在 Extjs4 中创建下面的图像？

Question

I want to develop a window in extjs4 which exactly same like below image, so that the user able to see root cause when they click on details section. Textarea section should be hide/show when click on details tab.

Ext.create('Ext.window.Window', {
            title: 'First Window',
            height: 200,
            width: 400,  
            layout:'fit',
            items:{
                xtype:'form',
                //title: 'ErrorDetails',
                bodyPadding: 5,
                width: 350,
                items:[{
                    html: 'Failed to submit the request'
                },
                {
                    xtype: 'button'
                    ,text: 'Details>>' ,
                    handler : function(){
                        console.log('Button got clicked');
                    }
                },
                {
                    xtype: 'textarea',
                    id:'tt',
                    minHeight : 300
                    ,minLength : 500
                }]
            }

        }).show();

Answer 1

If your are looking for a functionality to show the text area.This is how it works:

Need to add following code in button handler:

this.up().down('textarea').show();

Need to hide the textarea while creating the window using hidden:true property.

Ext.create('Ext.window.Window', {
            title: 'First Window',
            width: 400,  
            layout:'fit',
            items:{
                xtype:'form',
                //title: 'ErrorDetails',
                bodyPadding: 5,
                width: 350,
                items:[{
                    html: 'Failed to submit the request'
                },
                {
                    xtype: 'button'
                    ,text: 'Details>>' ,
                    handler : function(){
                        this.up().down('textarea').show();
                    }
                },
                {
                    xtype: 'textarea',
                    id: 'tt',
                    hidden:true,
                    readOnly:true,
                    minHeight : 300
                    ,minLength : 500
                }]
            }

        }).show();
    }