Extjs 태그 및 방법

1. 로드

Ext.onReady(function(){ 
});

2. 컨트롤
경고
Ext.Msg.alert('Hello', 'World');
b. 사용자 정의 대화 상자
Ext.Msg.show({ title: 'Milton', msg: 'Have you seen my stapler?',
    buttons: {
     yes: true,
     no: true,
     cancel: true
    }
  });
c. 힌트
Ext.Msg.prompt('Milton', 'Where is it?');
진도
Ext.Msg.wait('Saving tables to disk...','File Copy');
3. 방법
a. id에 따라 값을 얻는다
Ext.get(id).dom.value;
4.form 양식
a.new Ext.formPanel();

var movie_form = new Ext.FormPanel({ 
   
url: 'movie‐form‐submit.php', 
   
renderTo: document.body, // 
   
frame: true, 
    title: 'Movie Information Form', // 
    width: 250, // 
    items: [{ 
     
xtype: 'textfield', 
     
fieldLabel: 'Title', 
     
name: 'title',
allowBlank: false // 
    },{ 
     
xtype: 'textfield', // 
     
fieldLabel: 'Director', // 
     
name: 'director' // 
    },{ 
     
xtype: 'datefield', 
     
fieldLabel: 'Released', 
     
name: 'released' 
    }] 
  });  
}); 

b. 검증
알림 메시지 표시: Ext.QuickTips.init();
사용자 정의
• xxxVal: 이것은 일치하는 정규 표현식입니다.
• xxxMask: 사용자 입력을 제약하는 마스크입니다.
• xxxText: 잘못된 정보를 표시하는 데 사용됩니다.

Ext.form.VTypes['nameVal'] = /^[A‐Z][A‐Za‐z\‐]+[A‐Z][A‐Za‐z\‐]+$/; 
Ext.form.VTypes['nameMask'] = /[A‐Za‐z\‐ ]/; 
Ext.form.VTypes['nameText'] = 'In‐valid Director Name.'; 
Ext.form.VTypes['name'] = function(v){ 
   return Ext.form.VTypes['nameVal'].test(v); 
} 

c. 확인란

{ 
  xtype: 'checkbox', 
  fieldLabel: 'Bad Movie', 
  name: 'bad_movie' 
} 

d. 라디오 버튼
items

{ 
  xtype: 'radio', 
  fieldLabel: 'Filmed In', 
  name: 'filmed_in', 
  boxLabel: 'Color' 
},{ 
  xtype: 'radio', 
  hideLabel: false, 
  labelSeparator: '', 
  name: 'filmed_in', 
  boxLabel: 'Black & White' 
}

e. 드롭다운 상자

1.var genres = new Ext.data.SimpleStore({ 
  fields: ['id', 'genre'], 
  data : [['1','Comedy'],['2','Drama'],['3','Action']] 
}); 
2.{ 
  xtype: 'combo', 
  name: 'genre', 
  fieldLabel: 'Genre', 
  mode: 'local', // , .
  store: genres, // 
  displayField:'genre', 
  width: 120 
}

f. 텍스트 상자
html에서 일반적인textarea 라벨과 일치

{ 
  xtype: 'textarea', 
  name: 'description', 
  hideLabel: true, 
  labelSeparator: '', // 
  height: 100, 
  anchor: '100%' 
} 

다양한 내장 버튼이 포함되어 있습니다.QuickTips 먼저 초기화

{ 
  xtype: 'htmleditor', 
  name: 'description', 
  hideLabel: true, 
  labelSeparator: '', 
  height: 100, 
  anchor: '100%' 
} 

g. 트리거 이벤트

{ 
  xtype: 'textfield', 
  fieldLabel: 'Title', 
  name: 'title', 
  allowBlank: false, 
  listeners: { 
   
    specialkey: function(f,e){ 
      if (e.getKey() == e.ENTER) { 
       
      } 
     }    }  
    movie_form.getForm().submit(); 
} 

h. 버튼 트리거 이벤트
handler: 함수에 대한 인용을 제공합니다

buttons: [{ 
  text: 'Save', 
  handler: function(){ 
    movie_form.getForm().submit({ 
success: function(f,a){ 
    Ext.Msg.alert('Success', 'It worked'); 
}, 
     
failure: function(f,a){ 
       Ext.Msg.alert('Warning', 'Error'); 
} 
    }); 
  }  

}, { 
  text: 'Reset', 
  handler: function(){ 
   movie_form.getForm().reset(); 
  } 
}]