ExtJS——继承

最新推荐文章于 2018-06-14 15:27:32 发布

木然绽放

最新推荐文章于 2018-06-14 15:27:32 发布

阅读量292

点赞数

分类专栏： ExtJS4

本文链接：https://blog.csdn.net/u013127751/article/details/65443728

版权

ExtJS4 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>

    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-all-debug.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
 var Panel1 = new Ext.Panel({
                title: '标题',
                width: 500,
                height: 100,
                html: '好好学习'
            });
 var Panel2 = new Ext.Panel({
                title: '标题',
                width: 500,
                height: 100,
                html: '天天向上'
            });
 //Ext.extend 用来继承已有的类 这里给 title,width,height加上了默认值
 var MyPanel = Ext.extend(Ext.Panel,{
    title:'继承Panel',
    width:500,
    height:100
 });
 var MyPanel1 = new MyPanel({
    html:'好好学习'
 });
 var MyPanel2 = new MyPanel({
        html: '天天向上'
 });
 //将变化的部分我们可以通过定义新属性把他外露出来。
 var MyFormPanel = Ext.extend(Ext.form.FormPanel,{
    title:'属性外露items的id由usernameid属性的值给出',
    width:500,
    labelWidth:80,
    initComponent:function(){
        this.items=[{
            xtype:'textfield',
            fieldLabel:'姓名',
            id:this.usernameid,//变化的部分
            name:'username',
        }];
        this.buttons=[{
            text:'确定',
            handler:this.submit,//变化的部分
            scope:this
        },{
            text:'取消',
            handler:this.cancel,//变化的部分
            scope:this
        }];
        MyFormPanel.superclass.initComponent.call(this,arguments);//调用父类的initComponent,这一步对于重写构造方法是必不可少的
    }
 });
 //创建测试对象1
 var testform1 = new MyFormPanel({
    usernameid:'username',
    submit:function(){
        Ext.MessageBox.alert('提示',Ext.getCmp('username').getValue());
    },
    cancel:function(){
        testform1.getForm().reset();
    }
 });
 //创建测试对象2
 var testform2 = new MyFormPanel({
    title:'覆盖父级的title属性',
    usernameid:'usernameid属性值',
    submit:function(){
        Ext.MessageBox.alert('提示',this.usernameid+"，与上一个组件实现submit不同");
    },
    cancel:function(){
        testform2.getForm().reset();
    }
 });
 //创建窗体
 var win = new Ext.Window({
        title: '窗口',
        id: 'window',
        width: 500,
        height: 620,
        resizable: true,
        closable: true,
        maximizable: true,
        minimizable: true,
        items: [Panel1, Panel2, MyPanel1, MyPanel2, testform1,testform2]
 });
 win.show();
});
</script>
</body>
</html>

木然绽放

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS——继承

Ext.onReady(function(){ var Panel1 = new Ext.Panel({ title: '标题', width: 500, height: 100, html: '好好学习' }); var Panel2 = n
复制链接

扫一扫