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>