EXT4.2--Ext Designer 使用

前言：

“画EXT”是一个美好的想法，如果有一款可视化工具能够只需进行拖拽而设计EXT，生成代码--那真是一件美丽的事。然而现实是，即使是为Eclipse装上EXT插件，用上idea，手写代码的提示也只是聊以安慰而已。Ext Designer是官方出的一款可视化设计EXT的工具，用来通过鼠标拖拽设计EXT，虽然设计滞后明显，但闲时倒腾几番对于EXT的理解和学习也是有帮助的。

下面笔者将演示2个示例来说明该工具的基本用法。

其中涉及到重要点包括：运用Ext Designer 创建项目，导出js源码，设计中重要步骤。最后以idea工具在项目中显示。

示例一：

Ext Designer 设计图

设计中重要点：

布局：Form Panel 的布局为column （MyForm）;Panel的布局为form（MyPanel）. 布局决定了组件如何显示，因此十分重要。

border：MyForm下面的第一级子组件为Panel，它的默认border是显示的--虽然你第一次看到下面的border属性会疑惑我没有勾选怎么还有显示？--没关系，你再点一次就发现没有了。

columnWidth：既然布局为column，那么子组件有一个属性--columnWidth是必备配置项，如下：

生成/导出代码：

保存到指定目录，便导出了js代码

保存项目：

设计完成，如下所示保存项目到指定目录下次可直接打开。

这里是原始代码：

Ext.MyViewport=Ext.extend(Ext.Viewport ,{
xtype:"viewport",
    initComponent: function(){
        this.items=[
            {
                xtype:"form",
                title:"我的表单",
                labelWidth:100,
                labelAlign:"left",
                layout:"column",
                bodyBorder:false,
                maskDisabled:false,
                border:false,
                items:[
                    {
                        xtype:"panel",
                        title:"",
                        layout:"form",
                        border:false,
                        columnWidth:0.3,
                        items:[
                            {
                                xtype:"textfield",
                                fieldLabel:"姓名",
                                anchor:"100%"
                            }
                        ]
                    },
                    {
                        xtype:"panel",
                        title:"",
                        layout:"form",
                        bodyBorder:false,
                        animCollapse:false,
                        border:false,
                        columnWidth:0.3,
                        items:[
                            {
                                xtype:"textfield",
                                fieldLabel:"性别",
                                anchor:"100%"
                            }
                        ]
                    },
                    {
                        xtype:"panel",
                        title:"",
                        layout:"form",
                        border:false,
                        columnWidth:0.3,
                        items:[
                            {
                                xtype:"textfield",
                                fieldLabel:"户籍",
                                anchor:"100%"
                            }
                        ]
                    },
                    {
                        xtype:"panel",
                        title:"",
                        layout:"form",
                        border:false,
                        columnWidth:0.3,
                        items:[
                            {
                                xtype:"datefield",
                                fieldLabel:"出生日期",
                                anchor:"100%"
                            }
                        ]
                    },
                    {
                        xtype:"panel",
                        title:"",
                        layout:"form",
                        border:false,
                        columnWidth:0.3,
                        items:[
                            {
                                xtype:"datefield",
                                fieldLabel:"入职日期",
                                anchor:"100%"
                            }
                        ]
                    }
                ]
            }
        ]
        Ext.MyViewport.superclass.initComponent.call(this);
    }
})

现在用idea来显示吧

如下所示：（注：因为是Viewport，所以无需以renderTo配置项渲染页面指定的dom，只需var port = new Ext.MyViewport(); 即可显示。）

<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2016/2/21
  Time: 4:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
  <link rel="stylesheet" type="text/css" href="Extjs4.2/resources/css/ext-all-neptune-rtl.css">
  <script type="text/javascript" src="Extjs4.2/ext-all.js"></script>
  <script type="text/javascript" src="Extjs4.2/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
      Ext.onReady(function(){
          Ext.MyViewport=Ext.extend(Ext.Viewport ,{
              xtype:"viewport",
              initComponent: function(){
                  this.items=[
                      {
                          xtype:"form",
                          title:"我的表单",
                          labelWidth:100,
                          labelAlign:"left",
                          layout:"column",
                          bodyBorder:false,
                          maskDisabled:false,
                          border:false,
                          items:[
                              {
                                  xtype:"panel",
                                  title:"",
                                  layout:"form",
                                  border:false,
                                  columnWidth:0.3,
                                  items:[
                                      {
                                          xtype:"textfield",
                                          fieldLabel:"姓名",
                                          anchor:"100%"
                                      }
                                  ]
                              },
                              {
                                  xtype:"panel",
                                  title:"",
                                  layout:"form",
                                  bodyBorder:false,
                                  animCollapse:false,
                                  border:false,
                                  columnWidth:0.3,
                                  items:[
                                      {
                                          xtype:"textfield",
                                          fieldLabel:"性别",
                                          anchor:"100%"
                                      }
                                  ]
                              },
                              {
                                  xtype:"panel",
                                  title:"",
                                  layout:"form",
                                  border:false,
                                  columnWidth:0.3,
                                  items:[
                                      {
                                          xtype:"textfield",
                                          fieldLabel:"户籍",
                                          anchor:"100%"
                                      }
                                  ]
                              },
                              {
                                  xtype:"panel",
                                  title:"",
                                  layout:"form",
                                  border:false,
                                  columnWidth:0.3,
                                  items:[
                                      {
                                          xtype:"datefield",
                                          fieldLabel:"出生日期",
                                          anchor:"100%"
                                      }
                                  ]
                              },
                              {
                                  xtype:"panel",
                                  title:"",
                                  layout:"form",
                                  border:false,
                                  columnWidth:0.3,
                                  items:[
                                      {
                                          xtype:"datefield",
                                          fieldLabel:"入职日期",
                                          anchor:"100%"
                                      }
                                  ]
                              }
                          ]
                      }
                  ]
                  Ext.MyViewport.superclass.initComponent.call(this);
              }
          })
          var port = new Ext.MyViewport();
     })
  </script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>

示例二：

Ext Designer 设计图

说明：

1.隐藏的fieldLabel

在“我的表单”中的textfield、radio、checkbox、combobox其实都有fieldLabel这个配置项，默认为：标签:  ，但很奇怪上面的视图却没有任何文字--这便是笔者发现Ext Designer的第一个bug。

看到这里，亲爱的朋友你可能会问--示例1也是这样吗？答：不是。因为经笔者测试发现，如果将父组件的布局设定为form布局即会显示fieldLabel，如下：

2.buttonAlign：经笔者测试formPanel的此配置项在设计视图中如果设定为right无法看到正确显示（在项目中正常显示），left、center显示正常。如下：

重要点：

frame：formPanel的这个配置项决定了它的button是否在框架视图内显示。记得勾选此项，否则上图中的2个“我的按钮”将不在formPanel中显示。

原始代码：

Ext.MyForm=Ext.extend(Ext.form.FormPanel ,{
xtype:"form",
    title:"我的表单",
    labelWidth:100,
    labelAlign:"left",
    layout:"column",
    width:400,
    height:350,
    padding:"10px",
    frame:true,
    style:";bodyPadding:10px;",
    bodyStyle:"",
    buttonAlign:"right",
    initComponent: function(){
        this.fbar=[
            {
                text:"我的按钮"
            },
            {
                text:"我的按钮"
            }
        ]
        this.items=[
            {
                xtype:"panel",
                title:"",
                border:false,
                columnWidth:1,
                layout:"column",
                items:[
                    {
                        xtype:"textfield",
                        fieldLabel:"标签",
                        columnWidth:0.5
                    },
                    {
                        xtype:"textfield",
                        fieldLabel:"标签",
                        columnWidth:0.5
                    }
                ]
            },
            {
                xtype:"panel",
                title:"",
                columnWidth:1,
                border:false,
                layout:"column",
                items:[
                    {
                        xtype:"textfield",
                        fieldLabel:"标签",
                        columnWidth:0.5
                    },
                    {
                        xtype:"datefield",
                        fieldLabel:"标签",
                        columnWidth:0.5
                    }
                ]
            },
            {
                xtype:"panel",
                title:"",
                border:false,
                layout:"column",
                columnWidth:1,
                items:[
                    {
                        xtype:"radio",
                        fieldLabel:"标签",
                        boxLabel:"boxLabel",
                        validationEvent:"0.5",
                        columnWidth:""
                    },
                    {
                        xtype:"radio",
                        fieldLabel:"标签",
                        boxLabel:"boxLabel"
                    }
                ]
            },
            {
                xtype:"panel",
                title:"",
                layout:"column",
                border:false,
                columnWidth:1,
                items:[
                    {
                        xtype:"checkbox",
                        fieldLabel:"标签",
                        boxLabel:"boxLabel"
                    },
                    {
                        xtype:"checkbox",
                        fieldLabel:"标签",
                        boxLabel:"boxLabel"
                    },
                    {
                        xtype:"checkbox",
                        fieldLabel:"标签",
                        boxLabel:"boxLabel"
                    },
                    {
                        xtype:"checkbox",
                        fieldLabel:"标签",
                        boxLabel:"boxLabel"
                    }
                ]
            },
            {
                xtype:"panel",
                title:"",
                layout:"column",
                columnWidth:1,
                items:[
                    {
                        xtype:"combo",
                        triggerAction:"all",
                        fieldLabel:"标签",
                        columnWidth:0.5
                    },
                    {
                        xtype:"combo",
                        triggerAction:"all",
                        fieldLabel:"标签",
                        columnWidth:0.5
                    }
                ]
            },
            {
                xtype:"htmleditor",
                anchor:"100%",
                fieldLabel:"标签",
                height:150,
                width:300,
                columnWidth:1
            }
        ]
        Ext.MyForm.superclass.initComponent.call(this);
    }
})

现在用idea来显示吧

如下所示：

<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2016/2/21
  Time: 6:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
  <link rel="stylesheet" type="text/css" href="Extjs4.2/resources/css/ext-all-neptune-rtl.css">
  <script type="text/javascript" src="Extjs4.2/ext-all.js"></script>
  <script type="text/javascript" src="Extjs4.2/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
    Ext.onReady(function(){
      var states = Ext.create(‘Ext.data.Store‘, {
        fields: [‘abbr‘, ‘name‘],
        data : [
          {"abbr":"AL", "name":"Alabama"},
          {"abbr":"AK", "name":"Alaska"},
          {"abbr":"AZ", "name":"Arizona"}
        ]
      });
      Ext.MyForm=Ext.extend(Ext.form.FormPanel ,{
        xtype:"form",
        title:"我的表单",
        labelWidth:100,
        labelAlign:"left",
        layout:"column",
        width:550,
        height:450,
//        padding:"10px",
        bodyPadding :‘5px‘,
        frame:true,
        buttonAlign:‘center‘,
        defaults:{
          style:‘margin-top:10px;‘,//子组件距离顶部间距
        },
        fieldDefaults:{
          labelAlign:‘left‘,
          labelStyle:‘margin-left:5px‘,//label距离左边间距
          labelWidth:‘30%‘//注意：此选项设定后radio布局混乱--暂不知道radio应该怎样布局
        },
        renderTo:‘mydiv‘,
        initComponent: function(){
          this.fbar=[
            {
              text:"我的按钮"
            },
            {
              text:"我的按钮"
            }
          ]
          this.items=[
            {
              xtype:"panel",
              title:"",
              border:false,
              columnWidth:1,
              layout:"column",
              items:[
                {
                  xtype:"textfield",
                  fieldLabel:"标签",
                  columnWidth:0.5
                },
                {
                  xtype:"textfield",
                  fieldLabel:"标签",
                  columnWidth:0.5
                }
              ]
            },
            {
              xtype:"panel",
              title:"",
              columnWidth:1,
              border:false,
              layout:"column",
              items:[
                {
                  xtype:"textfield",
                  fieldLabel:"标签",
                  columnWidth:0.5
                },
                {
                  xtype:"datefield",
                  fieldLabel:"标签",
                  columnWidth:0.5
                }
              ]
            },
            {
              xtype:"panel",//暂不知如何正常布局(像上面的textfield那样)
              title:"",
              border:false,
              layout:"column",
              columnWidth:1,
              items:[
                {
                  xtype:"radio",
                  fieldLabel:"性别",
                  boxLabel:"男",
                  validationEvent:"0.5",
                  columnWidth:""
                },
                {
                  xtype:"radio",
//                  fieldLabel:"",
                  boxLabel:"女"
                }
              ]
            },
            /*{//若将下面的fieldset组件放在这里的items中则fledlset右边框看不到了。原因暂时未知。
              xtype:"container",//panel
              title:"",
              layout:"form",//column
              border:false,
              columnWidth:1,
              items:[

              ]
            },*/
            {
              xtype:‘fieldset‘,//暂不知如何正常布局，故采用fieldset
                  columnWidth:1,
              layout:‘column‘,
              chechboxToggle:true,
              title:‘爱好‘,
              defaultType:‘checkbox‘,
              style:‘margin-left:5px;margin-left:5px;‘,
              items:[
                {
                  xtype:"checkbox",
//                  fieldLabel:"爱好:",
                  boxLabel:"读书",
                  columnWidth:0.1
                },
                {
                  xtype:"checkbox",
//                  fieldLabel:"",
                  boxLabel:"唱歌",
                  columnWidth:0.1
                },
                {
                  xtype:"checkbox",
//                  fieldLabel:"",
                  boxLabel:"跳舞",
                  columnWidth:0.1
                },
                {
                  xtype:"checkbox",
                  fieldLabel:"",
                  boxLabel:"绘画",
                  columnWidth:0.1
                }
              ]
            },
            {
              xtype:"panel",
              title:"",
              layout:"column",
              columnWidth:1,
              border:false,
              items:[
                {
                  xtype:"combobox",
                  triggerAction:"all",
                  fieldLabel:"标签",
                  columnWidth:0.5,
                  store: states,
                  displayField: ‘name‘,
                  valueField: ‘abbr‘
                },
                {
                  xtype:"combobox",
                  triggerAction:"all",
                  fieldLabel:"标签",
                  columnWidth:0.5,
                  store: states,
                  displayField: ‘name‘,
                  valueField: ‘abbr‘
                }
              ]
            },
            {
              xtype:"htmleditor",
              anchor:"100%",
//              fieldLabel:"标签",
              height:150,
              width:300,
              style:‘margin-top:5px‘,
              columnWidth:1
            }
          ]
          Ext.MyForm.superclass.initComponent.call(this);
        }
      })
      var form = new Ext.MyForm();
    })
  </script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>

后记：Ext Designer 其他更多功能待续。。如果你看到这里，也对EXT感兴趣就联系我吧以前探讨吧（qq: 472543236）

时间： 2024-10-12 19:49:52

EXT4.2--Ext Designer 使用的相关文章

Ext JS学习第九天 Ext基础之 扩展原生的javascript对象

此文来记录学习笔记: •Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务, 源码位置,我们可以从开发包的这个位置找到这几个扩展的js源码: •extjs-4.1.1\src\core\src\lang\ •ExtJS扩展原生Javascript –Ext.Object –Ext.Number –Ext.String –Ext.Array –Ext.Function –Ext.Date –Ext.Error

【转载】《Ext JS 4 First Look》翻译之一：新特性

免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:^_^肥仔John      原文地址:http://www.cnblogs.com/fsjohnhuang/archive/2013/01/29/2880705.html 第一章 新特性 Extjs 4相对于之前的版本作出了重大的修正.其中包括全新的类系统.新平台的引入.API的修整和加强还有新组件的引入(如新的图表和图形组件).Extjs 4提供更快速.更稳定的用户体验,

ExtJS学习-----------Ext.Object，ExtJS对javascript中的Object的扩展

关于ExtJS对javascript中的Object的扩展,可以参考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 下面对其中的方法进行介绍: (1)chain,把当前传入的对象当成新创建对象的原型. chain( Object object ) 使用给定对象作为原生链返回一个新对象. Parameters object : Object 创建新对象的原生链. 实例: var obj={ name:'张三', ag

谢烟客---------Linux之文件系统管理创建与挂载

文件系统在哪实现? 内核 内核级文件系统的组成?模块.用户空间中的程序 哪些是内核级文件系统?除了分布式文件系统 模块的定义 中间层定义 文件如何按名存取 查找文件.创建文件.存储文件文件系统.格式化 swap,虚拟内存 日志型文件系统和非日志型文件系统工作原理 超级块 文件按名存取的实现 文件系统实现按名存取将分区后的存储空间划分为数据区和元数据区. 数据区:   存储大小相同的数据块    元数据区:有多个inode块,每个inode块中存储:filename,perm,owner,grou

centos下误删除文件

在centos6下 :  rm  -rf /  已经被屏蔽了. windows  恢复误删除的文件:  final data v2.0 汉化版  和  easyrecoverycentos  ext4文件系统上删除文件,可以恢复  extundelete (使用范围 ext4及以前 的ext系列文件类型)扩展:    linux文件系统由三部分组成:文件名   inode  block    查看inode 方法:    #ls -i filename      #stat filename问题

SenchaTouch介绍和Sencha Architect介绍以及安装

一.SenchaTouch介绍 Sencha Touch框架是世界上第一个基于HTML 5的Mobile App框架. 在Sencha Touch这个名词中,包括了两个组成部分,其中Sencha的前身为著名的AJAX框架Ext JS. 2010年6月,Ext JS项目与触摸屏代码库项目jQTouch和SVG处理库Raphael合并,后两个项目的创始人David Kaneda和Dmitry Baranovskiy也加入了Ext JS 同时Ext项目背后的商业公司ExtJS,LLC.也改名为Senc

Web开发必备资源汇总[转]

导读:原文来自< Best “must know” open sources to build the new Web>,译文由酷壳网陈皓整理编译< 开源中最好的Web开发的资源 >.文中收集的资料相当的齐全,供大家学习.参考. 学习HTML 5编程和设计 ★ HTML5 Rocks: Major Feature Groups的学习HTML5的资源(HTML5演示,教程). 源码 很不错的HTML5 Dashboard–Mozilla,效果很炫. WhatWG Developers

Linux中的LVM的管理

1.lvm概述 LVM是 Logical Volume Manager(逻辑卷管理)的简写,它由Heinz Mauelshagen在Linux 2.4内核上实现.LVM将一个或多个硬盘的分区在逻辑上集合,相当于一个大硬盘来使用,当硬盘的空间不够使用的时候,可以继续将其它的硬盘的分区加入其 中,这样可以实现磁盘空间的动态管理,相对于普通的磁盘分区有很大的灵活性. 与传统的磁盘与分区相比,LVM为计算机提供了更高层次的 磁盘存储.它使系统管理员可以更方便的为应用与用户分配存储空间.在LVM管理下的存

面对磁盘不头疼

需要知道的概念 文件系统的类型 两种分区格式 MBR:如今主流的分区格式,针对两T以下的硬盘进行分区 分区的方式:针对柱面 0号扇区存放着:主引导程序446个字节(16进制).主分区表64个字节每16个字节代表一个分区号.最后两个字节55AA分区结束标识表示上面有分区 分区多少:最多四个分区可3个主分区一个扩展分区. 主分区只有一个是保持激活状态用来识别系统盘.主分区从/dev/sda1-4 扩展分区只能一个,其中扩展分区用来存放其他逻辑分区,所以这个扩展分区不能做它用.逻辑分区从/dev/sd