ExtJs开发-入门篇

来源：互联网发布：封面制作软件下载编辑：程序博客网时间：2024/06/08 05:57

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可能定义方式不太一样。

运行结果如下：

这个界面布局支持左右上下拖动各个区域大小，同时支持折叠。下面介绍下这些是如何配置的。

split: true 支持拖放各个区域大小。collapsible: true 支持折叠 layout: "accordion" 手风琴形式折叠菜单。

0 0