AJAX_EXT EXT開發時，注意以及技巧

1.頁面引入的JS文件又前後順序，先是ext-base後是ext-all、CSS文件引入ext-all

 

<link rel="stylesheet" type="text/css" href="js/ext-3.2.1/resources/css/ext-all.css">
<script type="text/javascript" src="js/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-3.2.1/ext-all.js"></script> 

 

 2.ext事件指定：

 

Ext.onReady(
  function(){
   Ext.get('控件ID').on(
    'click',
    function(e){
     alert(this.dom.value); //this.dom獲得控件的dom節點後獲得value值
    }
   );
   
   Ext.select('label').on(
    'click',
    function(){
     alert(this.innerText);
    }
   );
   
   Ext.select('textarea').on(
    'blur',
    function(){
     alert(this.innerText); //獲得文本域中的直接內容，好比輸入「<input />」 顯示的就是「<input />」 
     alert(this.innerHTML); //獲得文本域中的HTML內容，好比輸入「<input />」 顯示的就是「< input />」 
    }
   );
  }
 );

  

 

 

3.Ext中的消息窗口：

    a.基本的通知： 相似於js的alert();只有一個肯定:

// 基本的通知： 相似於js的alert();只有一個肯定
	Ext.Msg.alert('Status', 'Changes saved successfully.');

   

    b.有一個輸入框，返回btn：按鍵的值，text：輸入的值

//有一個輸入框，返回btn：按鍵的值，text：輸入的值
	Ext.Msg.prompt('Name', 'Please enter your name:',
		function(btn, text){
			alert(text);
			alert(btn);
		});

  

     

     c.顯示一個使用配置選項的對話框

var processResult = function(btn){
		alert("btn : "+btn);
	}
	// 顯示一個使用配置選項的對話框
	Ext.Msg.show({
	   title:'Save Changes?',
	   msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
	   buttons: Ext.Msg.YESNOCANCEL,
	   fn: processResult,
	   animEl: 'elId',
	   icon: Ext.MessageBox.ERROR
	});

 

 4.Ext文本框異步提交：

//異步提交,單個文本框的值
	Ext.onReady(function(){
		Ext.get('oKButton').on('click', function(){
			var msg = Ext.get('msg');
			var pa;
				msg.load({
				url: 'http://www.baidu.com/s', //換成你的URL
				params: 'wd=' + Ext.get('name').dom.value,
				text: 'Updating...'
			});
			msg.show();
		});
	});

 

 HTML代碼：

<div id="msg" style="visibility: hidden" mce_style="visibility: hidden"></div> 

  <p>Name: 
    <input id="xx" type="text"/>
    <br /> 

    <input type="button" id="oKButton" value="OK" />
</p>
  <p> </p>