2014-09-03 5 views
0

여기 내 요구 사항은 다음과 같습니다.extjs의 피드백 메시지

3 개의 필드가있는 양식이 있습니다. 사용자가 세 번째 필드를 특정 값으로 변경하면 첫 번째 필드를 다시 설정해야하며 사용자 지정 메시지가있는 첫 번째 필드 옆에 피드백 메시지를 제공하려고합니다.

다른 종류의 메시지 상자에는 메시지, 확인, 확인, 취소 등의 ExtJS가 있다는 것을 알고 있습니다.하지만 메시지가 자동으로 나타나고 사라 지도록하고 싶습니다. ExtJS 구성 요소를 사용하여이 작업을 수행 할 수 있습니까?

+0

당신이 jQuery를 사용할 수 있습니까? 그것은 쉬울 것입니다. – VPK

+1

을 사용하면 jQuery를 사용하여 1 위 자리에서 ExtJS를 사용하는 목적을 무력화 할 수 있습니다. – sidrocks

답변

1

이렇게하려면 Ext.tip.QuickTip을 사용하는 것이 좋습니다.

Ext.create('Ext.tip.QuickTip', { 
    id: 'myquicktip', 
    hideDelay: 2000, 
    header: false 
}); 

Ext.create('Ext.panel.Panel',{  
    title: 'Panel',  
    layout: 'hbox', 
    height: 200, 
    width: 600,  
    items: [{ 
      xtype: 'textfield', 
      id: 'field1', 

     }, { 
      xtype: 'textfield', 
      id: 'field2', 
     }, { 
      xtype: 'textfield', 
      id: 'field3', 
      listeners: { 
       change: function(){ 
        var field1 = Ext.getCmp('field1'), 
         tip = Ext.getCmp('myquicktip');              

        field1.setValue(''); 

        tip.update('field1 has been cleared'); 
        tip.showBy(field1) 
       } 
      } 
     } 
    ],  
    renderTo: Ext.getBody() 
}); 

여기에 바이올린 링크는 너무 : https://fiddle.sencha.com/#fiddle/9pd

+0

공유해 주셔서 감사합니다. – sidrocks

0

이 같이 방법을 정확하게에 따라, 나는 그들 모두를 장식 할 수 있습니다 하나의

  • Ext.form.field.Display
  • Ext.form.Label
  • Ext.tip.Tip
  • Ext.tip.QuickTip

사용하십시오 Ext.util.Animate mixin, 내장 애니메이션 ns는 충분히 움직이지 않습니다.