Ext3.2 繼承

父類和子類

//Js 的對象更像是一個字典  以鍵值對的形式
/**
* Ext 3.2中需要引入 
* ext-base.js,ext-all.js,ext-all.css,ext-lang-zh_CN.js
*
*/

Ext.namespace('com');  //指定命名空間

com.parentWin = function(){ //新建一個類
  this.init();
};
com.parentWin.prototype = { //對類的原型進行修改
	init: Ext.emptyFn,
	title:'測試'
}

com.childWin = function(cfg){   //新建一個子類
	Ext.apply(this,cfg);
	this.initApp();
}

Ext.extend(com.childWin,com.parentWin, { //繼承父類,並且補充屬性
  winTitle: '日程信息設置',
  initApp: function(){
    this.createMainFrame();
  },
  createMainFrame: function(){
    var pThis = this;
    var win = new Ext.Window({
      labelAlign: 'right',
      title: this.winTitle,
      closeAction: 'close',
	  hideMode : 'offsets',
      modal: true,
      width: 550,
      height:237,
      items: [],
      buttons: [{
        text: '保存',
        id: 'saveButton',
        handler: function(){
          Ext.Msg.alert("點擊了保存");
        }
      }, {
        text: '關閉',
		id: 'closeButton',
        listeners:{   
                    "click":function(){   
                        win.close();
                     }   
                 }
      }]
    });
    win.show();
    
  },
  saveDailyPlan: function(win){
	 alert(this.title);//訪問父類中的屬性
  },
  getEditWindowData: function(){

  },
  destroy: function(obj){
	obj.close();
  },
});



Html 文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>

	 
	<script language="javascript" src="Class.js"></script>
	
   <script language="javascript">
		Ext.onReady(function(){
			var win;
			var button = Ext.get('show-btn');

			button.on('click', function(){
				win = new com.childWin({title:'測試2'});
				win.initApp();
			});
		});
   </script>
	
</head>
<body>

<input type="button" id="show-btn" value="彈框" /><br /><br />

</body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章