Как создать изображение ниже в 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

Если ваш ищет функциональность, чтобы показать текст area.This как это работает:

нужно добавить следующий код в обработчике кнопки:

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

Необходимо скрыть текстовое поле при создании окна, используя hidden:true.

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