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

Question

我想在extjs4中开发一个与下图完全相同的窗口，以便用户在点击详细信息部分时能够看到根本原因。单击详细信息选项卡时，Textarea部分应隐藏/显示。

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

如果您正在寻找显示文本区域的功能。这就是它的工作原理：

需要在按钮处理程序中添加以下代码：

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

使用hidden:true属性创建窗口时需要隐藏textarea。

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();
    }