Ext4.1基本方法、属性

最新推荐文章于 2021-06-09 19:26:22 发布

转载最新推荐文章于 2021-06-09 19:26:22 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/demingblog/archive/2012/10/06/2713346.html

文章标签：

#javascript #ViewUI

自己学习记录，有待完善

1..Ext.onReady 。其内的代码会在加载时执行

<html>
<head>
    <title>Hello</title>
//其他代码省略
<script type="text/javascript">
        Ext.onReady(function () {
            Ext.Msg.alert("hello",'ExtJS4.1'); 
        });
    </script>
</head>
<body>
</body>
</html>

运行结果：页面加载时弹出一个消息框

2.Ext.define 定义一个类，可以是一个全新的类，也可以继承其他类。

示例代码：

<html>
<head>
　　<title>Hello Ext</title>
//其他代码省略
<script type="text/javascript">
Ext.onReady(function() {
    //定义一个父类
        Ext.define('Pet', {
            name : 'a'
        });
        //定义一个子类
        Ext.define('Cat', {
            //用extend表示继承，在这里继承的是Pet类
            extend : Pet,
            //子类 自己有的另外一个属性
            sex : 'girl'
        });
        //new 一个Pet类对象myPet
        var myPet = new Pet();
        Ext.Msg.alert('提示', 'Pet类的属性', myPet.name);
        //new 一个Cat
　　　　　//此处new的方法与上不一样　　　　　　
var myCat = Ext.create('Cat');
        Ext.Msg.alert('提示', 'myCat的属性：' + myCat.name + '/' + myCat.sex);
    });
</script>
</head>
<body>
</body>
</html>

3.Ext.create 实例化一个类

如上例中创建Cat类类代码，下面创建一个Panel

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 200,
    title: 'Container Panel',
    layout: 'column'
    });

运行结果是一个宽400高200的panel。

有待完善……

转载于:https://www.cnblogs.com/demingblog/archive/2012/10/06/2713346.html