Ext3.2 继承

最新推荐文章于 2016-10-19 13:24:24 发布

暖暖的月光

最新推荐文章于 2016-10-19 13:24:24 发布

阅读量244

点赞数

本文链接：https://blog.csdn.net/u012382571/article/details/50845891

版权

父类和子类

//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>