ExtJs开发-入门篇

最新推荐文章于 2016-05-23 18:27:00 发布

原创最新推荐文章于 2016-05-23 18:27:00 发布 · 834 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #前端开发 #布局 #体验 #js

ExtJs 专栏收录该内容

1 篇文章

订阅专栏

ExtJs 是一个重量级前端开发框架（库），个人认为ExtJs跟Jquery相比优势在于其丰富的控件及一致的界面风格及操作体验，而Jquery擅长DOM的操作及事件处理，二者各有千秋。这一个章节我学习了一下ExtJs的界面布局，搭建了一个常见的“东西南北中”中形式的布局，通过这种布局我们理解下ExtJs对象的定义，使用方式及一些常见的属性的意义及设置方式。

下面是页面的代码（这是一个完整的页面代码，因为我开始总是找不到完整的页面代码，总是不确定Js代码在页面中的位置。）

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <script src="../../ExtJs/adapter/ext/ext-base.js" type="text/javascript"></script>
    <link href="../../ExtJs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="../../ExtJs/ext-all.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {

            var p1 = { title: "嵌套面板一", xtype: "panel", html: "嵌套面板一" }
            var p2 = { title: "嵌套面板二", xtype: "panel", html: "嵌套面板二" }
            var p3 = { title: "嵌套面板三", xtype: "panel", html: "嵌套面板三" }

            var west = new Ext.Panel({
                region: "west",
                layout: "accordion",
                width: 150,
                title: "west",
                collapsible: true,
                items:[p1,p2,p3]
            });

            var east = new Ext.Panel({
                region: "east",
                width: 90,
                title: "east",
                collapsible: true
            });

            var north = new Ext.Panel({
                region: "north",
                height: 100,
                title: "north",
                collapsible: true
            });

            var center = new Ext.Panel({
                region: "center",
                split: true,
                border: true,
                collapsible: true,
                title: "center"
            });

            var south = new Ext.Panel({
                region: "south",
                split: true,
                collapsible: true,
                border: true,
                height: 100
            });

            new Ext.Viewport({
                title: "ViewPort",
                layout: "border",
                border: "false",
                defaults: { frame: true,bodyStyle: "background-color: #FFFFFF;",split: true },
                items: [west, east, north, center, south]
            });
        });
    </script>
</head>
<body>
</body>
</html>

这个代码是根据网上的一些代码进行了一些优化。ViewPort里面包含了东南西北中五个对象，其中左侧的west对象包含了三个手风琴形式的左侧菜单。这里可以看出ExtJs的组件的嵌套使用情况。另外还可以看出ExtJs 组件采用 new 关键字来创建对象，采用{}的形式来配置对象的属性。当一个对象包含多个子对象的时候，使用items属性来关联到子对象的数组，Javascript中使用[]来表示数组。上述代码引用的是ExtJs3.2库，由于比较老，新的ExtJs4可能定义方式不太一样。

运行结果如下：