jsp中Ext的“布局”和“表单提交”“回填”教程（1）

jsp 中Ext 的“ 布局” 和“ 表单提交”“ 回填” 教程

网络上有很多 ext 的很全面的教程，但是学习起来不免还是有些负担，今天我制作这个教程目的是让迷惑的朋友能更快的对 ext 有一定的了解，不至于对 ext 还是那么抽象。

 doc版教程下载：51cto ,dbank ,115

在这里大家可以先下载我写好的 Struts-Spring 模板（后面讲到与后台交互时会用到，现在先不下也没关系）

http://down.51cto.com/data/201424              51ct

http://dl.dbank.com/c0zu1qyv6f                   dbank

http://u.115.com/file/e6crn8t0                             115

 

但是这个一定要下载： ext 基础包

http://dl.dbank.com/c0zzqvugdc                   dbank

http://u.115.com/file/clioh2zq                             115

 

接着，教程开始了：

一．搭建环境：在 myeclipse 下先新建一个 WebProject 工程（导入之前下载的 Struts-Spring 项目均可）

如果你是新建一个 WebProject\ 工程，那必须先吧下载的 ext 基础包复制到工程的 WebRoot 下，并把 ext/src/locale/ext-lang-zh_CN.js 包的编码改为 UTF-8

 

二． 画界面：

1. 画界面必须都必须的第一步：在 .jsp/html 里导入包：在 </ head > 前面加入以下几句即可

<link href="<%=path%>/ext/resources/css/ext-all.css" rel="stylesheet"

                            type="text/css" />

                   <script type="text/javascript"

                            src="<%=path%>/ext/adapter/ext/ext-base.js" charset="GBK">

                  </script>

                   <script type="text/javascript" src="<%=path%>/ext/ext-all.js" charset="GBK">

                   </script>

                   <script type="text/javascript" src="<%=path%>/test0512/test1.js" charset="GBK">

                   </script><!-- 这里指明你编写的 ext 的 .js 文件的路径，因为这个页面已经不需要在修改了 -->

                   <script type="text/javascript" src="<%=path%>/ext/src/locale/ext-lang-zh_CN.js">

                   </script>

                   <script type="text/javascript" charset="GBK">

                            var path='<%=path%>';

                   </script>

注：我这里页面使用的是 UTF-8 编码所以在以上几句引入中加入： charset="GBK"

如果你的页面使用的是 GBK 编码，可以把 charset="GBK" 去掉，并且把

<script type="text/javascript" src="<%=path%>/ext/src/locale/ext-lang-zh_CN.js">

                   </script>

修改为：

<script type="text/javascript" src="<%=path%>/ext/src/locale/ext-lang-zh_CN.js" charset="UTF-8">

                   </script>

 

2. 定义 Ext 制作的界面风格， txt 有两种风格：

a. 一个小窗口停留在页面（像 webQQ 中的标签一样）。

b. 布局编写到界面（普通的写入页面）

3. 我们先编写一个 a 风格的登入界面：

新建一个 ext 的 .js 文件，即 javascript 文件，命名，并修改之前页面的导入语句 :

<script type="text/javascript" src="<%=path%>/test0512/test1.js" charset="GBK">

</script><!-- 这里指明你新建的 .js 文件的路径 -->

将以下内容复制进 .js 文件：

Ext.onReady(function(){                       // 自动读取内容，加以显示，否者不显示任何东西

         Ext.QuickTips.init();                  // 初始化 Ext.QuickTips ，以使得 tip 提示可用

// 可拖动窗口

         var fp = new Ext.form.FormPanel( {//new 一个 FormPanel 表单，相当于 jsp 中的 form 表单，用于提交

//                 title : ' 测试登入 ',             // 注释掉可以看到区别

                   frame : true,                     // 是否使用样式

                   layout:'border',                 // 边框布局

                   items:[{                                             // 控件，往这个 FormPanel 表单内装什么

                            region: 'center',                 // 中间控件，这个要写中间，然后才能 north 、 east 、 west 、 south ，不然会出现警告或显示异常

                            layout : 'absolute',   // 绝对布局

//                          layoutConfig : {

//                                   extraCls : 'x-abs-layout-item'

//                          },

                            defaultType : 'textfield',      // 默认控件类型为 textfield, 这里不写里面就要一个一个写

                            items : [{

                                               x : 0,                              // 绝对路径 X 轴

                                               y : 5,                              // 绝对路径 y 轴

                                               xtype : 'label',         // 控件类型为标签

                                               text : ' 用户名 :'                 // 显示内容              提示：这里要注意的事，最后一个属性的后面不能加逗号，不然会不显示并且报错

                                     }, {

                                               x : 60,

                                               y : 0,

                                               name : 'username',   // 文本框名字，用户表单提交对应后台

                                               anchor : '100%'                 // 控件长度占总长度的百分比

                                     }, {

                                               x : 0,

                                               y : 35,

                                               xtype : 'label',

                                               text : ' 密码 '

                                     }, {

                                               x : 60,

                                               y : 30,

                                               name : 'password',

                                               anchor : '100%'

                                     }, {

                                               x : 0,

                                               y : 60,

                                               xtype : 'textarea',

                                               name : 'mess',

                                               anchor : '100% 100%'

                                     }

                            ]

                   },{

                            region:'south',                  // 边框布局的南边

                            height:30,                        // 设置南边布局的高度， center 则自动调整

                            layout:'absolute',     // 设置为绝对布局

                            items:[{

                                     x:10,

                                     y:5,

                                     xtype: 'button',        // 设置控件类型为按钮类型

                                     width:70,                        // 按钮宽度

                                     text:" 登入 "                      // 显示内容

                            }]

                   }]

         });

         // 定义窗体

         var _window = new Ext.Window( {                 // 定义一个标签窗体

                   title : " 測試登入 ",                               // 设置标题

                   layout : "fit",                                      // 布局设置为全部填充

                   width : 335,                                       // 窗体宽度

                   height : 260,                                       // 窗体高度

                   minWidth:335,                                             // 窗体最小宽度

                   minHeight:260,                                            // 窗体最小高度

                   draggable:true,                                    // 是否可以拖动

                  resizable:false,                           // 是否可以改变大小

                   maximizable:false,                      // 是否可最大化窗体

                   maximizable : false,          // 初始化时最大化显示窗口

                   closeAction : "close",                  // 关闭窗口的动作，包括以下两种：

            //close ：从 DOM 删除窗口，销毁窗口及其所属组件，窗口不再可用，重新显示需要调用 show 方法。此为默认值。

            //hide ：通过设置可见性隐藏窗口，窗口还可用，调用 show 方法后重新显示。

                   closable : false,                          // 是否允许关闭窗口，默认为 true 。

                   constrain:false,                           // 是否约束窗口只能在容器内移动，默认为 false 。窗口默认渲染到 document.body 。

                   constrainHeader:false,                  // 是否约束窗口头部只能在容器内移动，默认为 false 。

                   collapsible : true,                       // 可否最小化窗体

                   plain : true,                               // 主体背景是否透明，默认为 false 。

                   modal:false,                              // 是否为模式窗口，默认为 false 。

                   manager:false,                                     // 是否为模式窗口，默认为 false 。

                   buttonAlign : "center",

//                 x:50,// 窗口的 X 坐标值。设置居中后无需在设置坐标值

//      y:50,// 窗口的 Y 坐标值。

                   items : fp                                           // 内容为之前 new 的 fp 表单，如果去掉将仅显示窗体，无内容              // 注，最后一个属性如果去掉，要将前一个的逗号去掉

         });

         _window.show();                                          // 显示窗体，否则不显示

});

之后部署项目，访问 .jsp 文件即可看到内容：窗体内一个可拖动的窗口

4.. 编写登入后的主页面，把登入后的界面分为上、左、中三块

新建一个 .jsp 页面、 .js 文件，在 .jsp 文件里导入 ext （步骤 1 ）和 .js 。

开始编写 .js 文件：

Ext .onReady(function (){     // 必须的，自动读取内容，加以显示，否则不显示任何东西

    Ext .QuickTips.init();

    var tree = new Ext .tree.TreePanel( {

         rootVisible:false ,  // 隐藏根节点

        el : 'tree'         // 使用body 中的tree

    });

    var root = new Ext .tree.TreeNode({text:'all'});         // 定义根节点

    var node1 = new Ext .tree.TreeNode({text:' 一级子节点'});   // 定义一级子节点

    var node11 = new Ext .tree.TreeNode({text:' 二级子节点'});  // 定义二级子节点

     node1.appendChild(node11);  // 往一级子节点添加二级子节点

    root.appendChild(node1);    // 往根节点添加一级子节点

    tree.setRootNode(root);     // 往树中添加根节点

    tree.render();              // 调用树，我想是用于跟新吧

    root.expand(true , true );    // 初始化是是否展开节点

 

    //viewport 分割页面（一定要有center ）

    new Ext .Viewport({      //ewPort 会随着浏览器显示区域的大小自动改变，代表整个浏览器的显示区域，它直接渲染到页面的body 区域，所以在一个页面中就只能有一个ViewPort 实例

        layout: 'border',   // 边框布局

        items: [{

            region: 'north',    //border 布局中，这个不能漏掉

        //  html: '<h1 class="x-panel-header">1Page Title</h1>',

 

//          border: true,           // 是否需要边框

            margins: '0 0 0 0',     // 上右下左边距

//          title:'test',           // 标题

//          collapsible:true,       // 有上方缩小箭头

//          collapseMode: 'mini',   // 缩小按钮（与缩小箭头方式不同）

            Xtype:'tabpanel',       // 相当于load, 需要的时候才实例化（看不到区别）

            items: [{

                baseCls: 'x-plain',

                // 分页中编写html 代码

                html: 'The first tab\'s<br/> content. Others may be added dynamically'

               

                // 分页中加载jsp 页面

//              html : '<iframe src="http://www.baidu.com" width="100%" height="100%" name="top"></iframe>'

            }],

           

//          autoHeight: true, 锁定高度，如果锁定，以下三句就没有效果了

            split: true ,// 可调整，只在border 布局中有效，要配合上minHeight 一起使用

            height: 150,

            minHeight: 100

           

 

        }, {// 现有center 才能有east/west ，不然会抛出异常没有接住, 而且center 要设宽，否则会占用整个屏幕，或者报未结束

            region:'center'

           

        },{

            region:'west',

            split:true ,

            width:160,

            minWidth:100,

//          layout:fit,

            items:tree

        }]

    });

});

黏贴上以上代码后，页面就会被分成上、左、中三分。 :

教程2：http://yonghengmoming.iteye.com/admin/blogs/1044945