Ext中使用兩種方法實現複雜的Form佈局實例

最新推荐文章于 2021-06-18 12:32:46 发布
最新推荐文章于 2021-06-18 12:32:46 发布
阅读量1.8k 收藏
点赞数
分类专栏： javacript 文章标签： radiobutton ext layout input stylesheet border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yoyoch1/article/details/5675049
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Panel</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />

    <!-- GC -->
  <!-- LIBS -->
  <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
  <!-- ENDLIBS -->

    <script type="text/javascript" src="../ext-all.js"></script>
 
 <script type="text/javascript"  language="javascript">
  Ext.onReady(function(){     
      var test='';
   test+='  <table width="200" border="0">';
   test+='    <tr>';
   test+='   <td>Name: <input name="radiobutton" type="text" value="radiobutton"></td>';
   test+='   <td>Guoji:<input name="radiobutton" type="text" value="radiobutton"></td>';
   test+='   <td><input name="radiobutton" type="text" value="radiobutton"></td>';
   test+='   <td><input name="radiobutton" type="text" value="radiobutton"></td>';
   test+='   <td><input name="radiobutton" type="text" value="radiobutton"></td>';
   test+='   <td><input name="radiobutton" type="text" value="radiobutton"></td>';
   test+='   <td colspan="2" rowspan="2">';
   test+='    <input type="image" name="imageField" src="../resources/images/default/dd/drop-add.gif">     ';
   test+='   </td>';
   test+='    </tr>';
   test+='    <tr>';
   test+='   <td><input name="radiobutton" type="text" value="radiobutton"></td>';
   test+='   <td><input name="radiobutton" type="text" value="radiobutton"></td>';
   test+='   <td><input name="radiobutton" type="text" value="radiobutton"></td>';
   test+='   <td><input name="radiobutton" type="text" value="radiobutton"></td>';
   test+='   <td><input name="radiobutton" type="text" value="radiobutton"></td>';
   test+='   <td><input name="radiobutton" type="text" value="radiobutton"></td>';
   test+='    </tr>         ';
   test+='  </table>';
   var panel=new Ext.Panel(     
      {     
       renderTo:'paneldiv',     
       title:'Container',     
       layout:'form', 
       width:500,     
       height:200,     
       items:[     
     {title:'',html:test} 
       ]     
      }     
   );     
  });
  
  
 </script>
 
 <script type="text/javascript">
　　Ext.onReady(function() {
　　　　var form = new Ext.FormPanel({
　　　　　　title: "复杂Form布局示例()",
　　　　　　width: 640,
　　　　　　height: 400,
　　　　　　renderTo: Ext.getBody(),
　　　　　　labelWidth: 80,
　　　　　　labelAlign: "top",
　　　　　　frame: true,
　　　　　　items: [{
　　　　　　　　layout: "column",
　　　　　　　　items: [{
　　　　　　　　　　columnWidth: 0.5,
　　　　　　　　　　layout: "form",
　　　　　　　　　　items: {
　　　　　　　　　　　　xtype: "textfield",
　　　　　　　　　　　　fieldLabel: "A1",
　　　　　　　　　　　　anchor: "90%"
　　　　　　　　　　}
　　　　　　　　}, {
　　　　　　　　　　columnWidth: 0.5,
　　　　　　　　　　layout: "form",
　　　　　　　　　　items: {
　　　　　　　　　　　　xtype: "textfield",
　　　　　　　　　　　　fieldLabel: "A2",
　　　　　　　　　　　　anchor: "90%"
　　　　　　　　　　}
}]
　　　　　　　　}, { items: [{
　　　　　　　　　　layout: "column",
　　　　　　　　　　items: [{
　　　　　　　　　　　　columnWidth: 0.33,
　　　　　　　　　　　　layout: "form",
　　　　　　　　　　　　items: {
　　　　　　　　　　　　　　xtype: "datefield",
　　　　　　　　　　　　　　fieldLabel: "B1",
　　　　　　　　　　　　　　anchor: "90%"
　　　　　　　　　　　　}
　　　　　　　　　　}, {
　　　　　　　　　　　　columnWidth: 0.33,
　　　　　　　　　　　　layout: "form",
　　　　　　　　　　　　items: [{
　　　　　　　　　　　　　　xtype: "radiogroup",
　　　　　　　　　　　　　　fieldLabel: "B2",
//　　　　　　　　　　　　　　columns: ["33%", "33%", "33%"],
　　　　　　　　　　　//　　　items: [{ boxLabel: '我是', name: 'rb-auto', inputValue: 1 },
//　　　　　　　　　　　　　　　　　　{ boxLabel: '一个', name: 'rb-auto', inputValue: 2, checked: true },
//　　　　　　　　　　　　　　　　　　{ boxLabel: '好人', name: 'rb-auto', inputValue: 3}]
　　　　　　　　　　　　　　//下面也是一种解决办法，不管radiogroup或是下面的写法，都很难保证在所有浏览器下效果一致
　　　　　　　　　　　　　　　　　　　　　　　　　　　　xtype: "panel",
　　　　　　　　　　　　　　　　　　　　　　　　　　　　layout: "column",
　　　　　　　　　　　　　　　　　　　　　　　　　　fieldLabel: "球类",
　　　　　　　　　　　　　　　　　　　　　　　　　　isFormField: true,
　　　　　　　　　　　　　　　　　　　　　　　　　　items: [{
　　　　　　　　　　　　　　　　　　　　　　　　　　　　columnWidth: 0.33,
　　　　　　　　　　　　　　　　　　　　　　　　　　　　xtype: "checkbox",
　　　　　　　　　　　　　　　　　　　　　　　　　　　　boxLabel: "足球",
　　　　　　　　　　　　　　　　　　　　　　　　　　　　name: "",
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　anchor:"100%"
　　　　　　　　　　　　　　　　　　　　　　　　　　　　}, {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　columnWidth:0.33,
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　xtype:"checkbox",
　　　　　　　　　　　　　　　　　　　　　　　　　　　　boxLabel:"蓝球",
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　name:"",
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　anchor: "100%"
　　　　　　　　　　　　　　　　　　　　　　　　　　　　}, {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　columnWidth: 0.33,
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　xtype: "checkbox",
　　　　　　　　　　　　　　　　　　　　　　　　　　　　 boxLabel: "乒乓球",
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　name: "tyy",
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　anchor: "100%"
　　　　　　　　　　　　　　　　　　　　　　　　　　　　}]
}]
　　　　　　　　　　　　}, {
　　　　　　　　　　　　　　columnWidth: 0.33,
　　　　　　　　　　　　　　layout: "form",
　　　　　　　　　　　　　　items: {
　　　　　　　　　　　　　　　　xtype: "textfield",
　　　　　　　　　　　　　　　　fieldLabel: "B3",
　　　　　　　　　　　　　　　　inputType: "password",
　　　　　　　　　　　　　　　　anchor: "90%"
　　　　　　　　　　　　　　}
}]
}]
　　　　　　　　}, {
　　　　　　　　　　xtype: "htmleditor",
　　　　　　　　　　fieldLabel: "详细内容",
　　　　　　　　　　height: 200,
　　　　　　　　　　anchor: "100%"
}]
　　　　　　　　, buttons: [{ text: "Save" }, {text:"cancel"}]
　　
　　　　　　　　});
　　　　　　});
　　　　　　
</script>

</head>
<body>
<div id="paneldiv"/>
    <table width="200" border="1">
      <tr>
     <td><label>
       <input name="radiobutton" type="radio" value="radiobutton">
     </label></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td colspan="2" rowspan="2">    
      <input type="image" name="imageField" src="../resources/images/default/dd/drop-add.gif">    
     </td>
      </tr>
      <tr>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
      </tr>
      <tr>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td>&nbsp;</td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
      </tr>
      <tr>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
     <td><input name="radiobutton" type="radio" value="radiobutton"></td>
      </tr>
    </table>
</body>
</html>

 

    另請參考：http://www.3648.com/article/sort02/sort023/sort059/info-8650_3.html

工业互联
关注
专栏目录
第2章[2.5] Ext JS组件、容器与布局
oscar999的专栏
12-11 323
组件 （Components） 基于Ext JS的应用的UI由组件（Component）组成。这和绝大部分界面开发语言的概念是类似的。 Ext JS使用的是面向对象的概念， 有组件类与组件实例的概念，组件实例也常简称为组件。组件类之间可以有继承关系。 Ext JS的所有组件类都继承自 Ext.Component父类，这些类的组件可以自动参与组件的生命周期，包括：初始化、渲染、调整大小、定位以及销毁。 Ext JS提供了很多现成的组件， 也可以继承这些组件扩展新的组件类型。 从是否可以在页面上直接看到组件来分
Ext2.0 form使用实例的例程
10-02
在这个“Ext2.0 form使用实例的例程”中，我们将深入探讨Ext 2.0的表单（form）组件及其应用。 表单在任何应用程序中都扮演着至关重要的角色，用于收集和验证用户输入的数据。Ext 2.0的表单组件提供了一整套完整的...
extjs html 布局实例,谈谈Ext JS的组件——布局的使用方法
weixin_35081861的博客
06-18 301
概述在ExtJS中，包含两类布局：组件类布局和容器类布局。由于有些组件是有不同的组件组合而成的，如字段就由标题和输入框构成，他们之间也是存在布局关系的，而这就需要组件类布局来处理组件内自己特有的布局关系。如果我们不定义自己的组件，基本不需要使用到组件布局，知道就行了。本文主要介绍的是容器类布局，因为这个在开发中是必定会使用到的。注意：在Ext JS中，字段有两层意思。在模型中所说的字段，与数据库中...
谈谈Ext JS的组件——布局的使用方法
黄灯桥的专栏
06-24 8592
在Ext JS中，包含两类布局：组件类布局和容器类布局。由于有些组件是有不同的组件组合而成的，如字段就由标题和输入框构成，他们之间也是存在布局关系的，而这就需要组件类布局来处理组件内自己特有的布局关系。如果我们不定义自己的组件，基本不需要使用到组件布局，知道就行了。本文主要介绍的是容器类布局，因为这个在开发中是必定会使用到的。
Ext2.0中的form使用实例
kinglino520的专栏
06-23 915
 Ext2.0的form不单增加了时间输入控件、隐藏输入控件，还修改了创建方法，通过formpanel代替了原来form，column也根据新的布局定义更新了定义方式。总体来说，定义一个form更简单便捷了。本文将通过一个实例介绍一下2.0的form的创建以及其大部分控件的使用方法，因水平有限，错漏难免，忘大家多多谅解！我们先来看看我们将要设计的form的情况： 呵呵，
Ext2.0 form使用实例
知 行 合 一
07-18 1323
Ext2.0的form不单增加了时间输入控件、隐藏输入控件，还修改了创建方法，通过formpanel代替了原来form，column也根据新的布局定义更新了定义方式。总体来说，定义一个form更简单便捷了。本文将通过一个实例介绍一下2.0的form的创建以及其大部分控件的使用方法，因水平有限，错漏难免，忘大家多多谅解！我们先来看看我们将要设计的form的情况：
ext使用
qq_44537625的博客
05-21 2049
1.https://www.sencha.com下载Ext JS库文件(或者使用cdn调用) 2.使用Ext.onReady（）方法进行调用，用Ext.create（）创建对象，Ext.Panel是Ext JS中用于创建面板的预定义类，renderTo是此面板必须呈现的元素，高度和宽度属性用于给定面板的自定义尺寸，标题属性是向面板提供标题，html属性是要在面板中显示的html内容 3.主要就是用ext封装的js进行元素创造、添加，创建的东西可以当作组件，组件也可以在其他组件（元素）里面使用。 常见
ExtJs常用布局--layout详解（含实例）
热门推荐
Kuroko's Development Notes
05-23 4万+
序言： 笔者用的ExtJs版本：ext-3.2.0 ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 本文所有实例代码已提供下载，下载链接：ExtJs常用布局--layout详解实例代码   简介： 最常用的边框布局——BorderLay...
Ext JS 6开发实例（三） ：主界面设计
黄灯桥的专栏
05-26 1万+
在上文中，已经将CMD创建的应用程序导入到项目里了，而且也看到默认的主界面了，今天的主要工作就是修改这个主界面，以符合项目的需要。
- 转 Ext2.0 form使用实例
十一郎的IT博客
01-20 1474
导读：ZHU 　　Ext2.0的form不单增加了时间输入控件、隐藏输入控件，还修改了创建方法，通过formpanel代替了原来form，column也根据新的布局定义更新了定义方式。总体来说，定义一个form更简单便捷了。本文将通过一个实例介绍一下2.0的form的创建以及其大部分控件的使用方法，因水平有限，错漏难免，忘大家多多谅解！ 　　我们先来看看我们将要设计的form的情况： 　　
Ext 4 概述（五）之布局Layout、组件Component、Form
zhangxin09的专栏
04-18 1万+
Layout参考资源<br />Ext 4 Layouts (video)<br />Ext 4 Layouts (slides<br />ComponentLayout<br />ComponentLayout是一种新型的布局方式，许多复杂的组件就采用这种布局（与之对应的为ContainerLayout，“ContainerLayout”——传统基于容器布局的新名字）来计算内置元素的大小尺寸，以响应resize的调用。Field字段组件的FieldLayout布局，关于labell控件和input元素
Ext table布局实例 formpanel的table布局
08-02
本文将深入探讨“Ext table布局实例”以及“formpanel的table布局”，帮助开发者更好地理解和运用这两种布局方式。 首先，我们要理解什么是Ext table布局。Ext table布局主要用于显示数据，它基于HTML的`<table>`...
Ext 添加功能form表单实例
03-22
- `layout`: 使用了`"form"`布局，这是Ext中专门为表单设计的布局方式。 - `labelWidth`: 统一设置了所有字段标签的宽度。 - `autoScroll`: 设置为`true`，当表单内容超出容器时自动显示滚动条。 #### 字段配置 ...
ExtJS布局之border实例
12-11
在ExtJS框架中，`border`布局是一种非常常见的布局方式，它将容器划分为五个区域：north（北）、south（南）、east（东）、west（西）以及center（中心）。通过这种布局方式可以非常方便地构建出类似传统网页中的...
javascript 打印预览 打印
07-01 2294
function printpr() //预览函数{document.all("qingkongyema").click();//打印之前去掉页眉，页脚document.all("dayinDiv").style.display="none"; //打印之前先隐藏不想打印输出的元素（此例中隐藏“打印”和“打印预览”两个按钮）var OLECMDID = 7;var PROMPT = 1;var W
鼠標放上去，顯示圖片
08-31 1907
              http://www.baidu.com/img/baidu_logo.gif" alt="hi.baidu.com/liwya" onmousemove="show(event,http://www.baidu.com/img/baidu_logo.gif,hi.baidu.com/liwya)"   onmouseout="hide(this)" /> 
Coolite Toolkit入门指南
06-12 560
CooliteToolkit 简介Coolite Toolkit 是一个支持ASP.NET AJAX的Web控件Coolite Toolkit是基于跨浏览器的ExtJS 库开发而来的，并且简化了开发步骤，包含有丰富的Ajax运用 Coolite Toolkit和ExtJS 都是开源的 可能通过SVN直接获取Coolite 的代码<br />简单的说,就是将之前的纯Js的开源Ajax库,使用asp.net自定义控件技术,将Ext封装成asp.net 控件,简化了开发难度,提高了.net程序员web开发速度.<
ExtJS 可视化开发工具大全
06-12 532
<br /> <br /> <br />ExtJS 在线可视化开发工具 - Ext 2.1.0 Gui Designer<br />Ext JS 可视化开发工具 - extbuilder<br />Ext JS 3.0 可视化开发工具预览<br />ExtJS 在线可视化开发工具 - Formbuilder
Ext常用布局详解：FitLayout与BorderLayout实例演示
总结来说，Ext提供的FitLayout和BorderLayout是开发者在创建用户界面时常用的两种布局方法。FitLayout适用于单个组件全屏展示，而BorderLayout则提供了更多的灵活性和分隔区域，适合创建复杂的布局结构。理解并熟练...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值