ExtJS的extend（Ext Designer的使用）

最新推荐文章于 2016-02-21 18:08:00 发布

GoodShot

最新推荐文章于 2016-02-21 18:08:00 发布

阅读量2.1k

点赞数

分类专栏： extjs 文章标签： extjs designer extend 使用

extjs 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

一 Ext Designer相关

Ext Designer是ExtJS3.0的官方的可视化IDE，可视化拖拽控件，并生成以extend方式继承出来的控件的代码。
可见： ExtJS 3.0 Designer Preview (官方的IDE可视化工具)

二简单使用

1. 在Ext Designer中直接拖拽一个FormPanel，并获得生成的控件代码

2. 以new的方式，来使用生成的控件

Html代码

<html>  
<head>  
    <title>Ext JS Extends demo</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 type="text/javascript">  
ExtExt.MyForm=Ext.extend(Ext.form.FormPanel ,{  
    xtype:"formpanel",  
    title:"My Form",  
    labelWidth:100,  
    labelAlign:"left",  
    layout:"form",  
    width:400,  
    height:250,  
    padding:"10px",  
    initComponent: function(){  
        Ext.MyForm.superclass.initComponent.call(this);  
    }  
})  
Ext.onReady(function(){  
    var m1 = new Ext.MyForm();  
    m1.render(document.body);  
});  
    </script>  
</head>  
<body>  
</body>  
</html>

3. 预览。效果就和Ext Designer中所看到的一样

三添加namespace
由于控件过多，容易造成名字、属性等混淆。可使用namespace。
可见： Ext中namespace的作用

1. 先声明空间名

Js代码

Ext.namespace("Ext.iwoo")

2. 修改控件相关代码

Js代码

Ext.namespace("Ext.iwoo")  
  
Ext.iwoo.MyForm=Ext.extend(Ext.form.FormPanel ,{  
    xtype:"formpanel",  
    title:"My Form",  
    labelWidth:100,  
    labelAlign:"left",  
    layout:"form",  
    width:400,  
    height:250,  
    padding:"10px",  
    initComponent: function(){  
        Ext.iwoo.MyForm.superclass.initComponent.call(this);  
    }  
})  
  
Ext.onReady(function(){  
    var m1 = new Ext.iwoo.MyForm();  
    m1.render(document.body);  
});

3. 预览。效果和之前看到的一样。

四注册xtype，并使用

1. 注册xtype

Js代码

Ext.reg('frmMy', Ext.iwoo.MyForm);

2. 修改使用代码

Js代码

Ext.onReady(function(){  
    var outter = new Ext.Container({  
        autoEl:"div",  
        width:400,  
        height:250,  
        layout:"border",  
        items:[  
        {  
            xtype:"frmMy",  
            autoEl:"div",  
            region:"center",  
            title:"Title from Using xtype "  
        }  
        ]  
    });  
    outter.render(document.body);  
});

3. 预览。效果和之前看到的还是一样。

五代码综合

1. 具体代码

Js代码

Ext.onReady(function(){  
    var m1 = new Ext.iwoo.MyForm({  
        title:"Title from Way 1"  
    });  
  
    var outter = new Ext.Container({  
        autoEl:"div",  
        width:400,  
        height:250,  
        layout:"border",  
        items:[  
            {  
                xtype:"container",  
                autoEl:"div",  
                region:"north",  
                height:50,  
                layout:"form",  
                items: [m1] // Way of Using new  
            },  
            {  
                xtype:"frmMy", // Way of Using xtype  
                autoEl:"div",  
                region:"center",  
                title:"Title from Way 2"   
            }  
        ]  
    });  
    outter.render(document.body);  
});

2. 预览

综合使用