도구 설명 Extjs 창에서 문제가 발생했습니다.

Question

Ext 창 내부에있는 도구 설명이 숨겨져 있습니다. 창문으로 돌아갈거야. 이 코드는 창없이 잘 동작합니다 (formPanel에서는 잘 작동합니다). 코드와 스크린 샷이 첨부됩니다. 나는 그 변화가 팁의 표적으로 만들어 질 것이라는 것을 안다. 그러나 무엇을 줄지 모르십시오.

Ext.onReady(function() { 
    Ext.tip.QuickTipManager.init(); 
    var btn = new Ext.Button({ 
     renderTo: Ext.getBody(), 
     text:'Submit', 
     handler:function(){ 
      new Ext.Window({ 
       width:600, 
       height:500, 
       items:[formPanel] 
      }).show();   
     } 
    }) 
    var formPanel = Ext.widget('form', { 

     width: 350, 
     bodyPadding: 10, 
     title: 'Account Registration', 

     defaults: { 
      anchor: '100%' 
     }, 

     /* 
     * Listen for validity change on the entire form and update the combined error icon 
     */ 
     listeners: { 
      fieldvaliditychange: function() { 
       this.updateErrorState(); 
      }, 
      fielderrorchange: function() { 
       this.updateErrorState(); 
      } 
     }, 

     updateErrorState: function() { 
      var me = this, 
       errorCmp, fields, errors; 

      if (me.hasBeenDirty || me.getForm().isDirty()) { //prevents showing global error when form first loads 
       errorCmp = me.down('#formErrorState'); 
       fields = me.getForm().getFields(); 
       errors = []; 
       fields.each(function(field) { 
        Ext.Array.forEach(field.getErrors(), function(error) { 
         errors.push({name: field.getFieldLabel(), error: error}); 
        }); 
       }); 
       errorCmp.setErrors(errors); 
       me.hasBeenDirty = true; 
      } 
     }, 

     items: [{ 
      xtype: 'textfield', 
      name: 'username', 
      fieldLabel: 'User Name', 
      allowBlank: false, 
      minLength: 6 
     }], 

     dockedItems: [{ 
      xtype: 'container', 
      dock: 'bottom', 
      layout: { 
       type: 'hbox', 
       align: 'middle' 
      }, 
      padding: '10 10 5', 

      items: [{ 
       xtype: 'component', 
       id: 'formErrorState', 
       baseCls: 'form-error-state', 
       flex: 1, 
       validText: 'Form is valid', 
       invalidText: 'Form has errors', 
       tipTpl: Ext.create('Ext.XTemplate', '<ul><tpl for="."><li><span class="field-name">{name}</span>: <span class="error">{error}</span></li></tpl></ul>'), 

       getTip: function() { 
        var tip = this.tip; 
        if (!tip) { 
         tip = this.tip = Ext.widget('tooltip', { 
          target: this.el, 
          title: 'Error Details:', 
          autoHide: false, 
          anchor: 'top', 
          mouseOffset: [-11, -2], 
          closable: true, 
          constrainPosition: false, 
          cls: 'errors-tip' 
         }); 
         tip.show(); 
        } 
        return tip; 
       }, 

       setErrors: function(errors) { 
        var me = this, 
         baseCls = me.baseCls, 
         tip = me.getTip(); 

        errors = Ext.Array.from(errors); 

        // Update CSS class and tooltip content 
        if (errors.length) { 
         me.addCls(baseCls + '-invalid'); 
         me.removeCls(baseCls + '-valid'); 
         me.update(me.invalidText); 
         tip.setDisabled(false); 
         tip.update(me.tipTpl.apply(errors)); 
        } else { 
         me.addCls(baseCls + '-valid'); 
         me.removeCls(baseCls + '-invalid'); 
         me.update(me.validText); 
         tip.setDisabled(true); 
         tip.hide(); 
        } 
       } 
      }] 
     }] 
    }); 

}); 

Answer 1

ExtJS에는 두 항목이 겹칠 때 표시되는 항목을 제어하는 ​​zindex 관리자가 있습니다. 올바른 방향으로 당신을 가리키는 희망.