`
crabdave
  • 浏览: 1294778 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

fieldset多列展示 示例

EXTJavaScriptHTML 
阅读更多

fieldset多列展示 示例

效果：

HTML源码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
<script type="text/javascript" src="js/jsloader.js"></script> 
<script type="text/javascript" src="js/assets.js"></script>

<style>

</style>
<script>
Ext.onReady(function(){
 var tabs = new Ext.Panel({
      title:'fieldset多列展示',
      labelWidth:70,
      width:580,
      border:false,
      frame:true,
      renderTo:document.body,
      items:[
       {
        xtype:'fieldset',
        title:'form信息',
        collapsible:true,
        height:80,
        layout:'column',
        items:[
         {
          columnWidth:.5,layout:'form',id:'multFieldSet',
          items:[
           {xtype:'textfield',fieldLabel:'登录名',name:'loginName',size:20},
           {xtype:'textfield',fieldLabel:'用户名',name:'userName',size:20}
          ]
         },
         {
          columnWidth:.5,layout:'form',
          items:[
           {xtype:'textfield',fieldLabel:'密码',name:'password',size:20},
           {xtype:'textfield',fieldLabel:'确认密码',name:'conformPassword',size:20}
           
          ]
         }
        ]
       }
      ]
  
 });
});
</script>
</head>
<body>
</body>
</html>

 

备注:

在使用fieldSet实现多列展示时最好给它加上个id (如:,id:'multFieldSet'),本人在项目开发过程中发现,在一个面板中使用多个fieldSet实现多个不同的多列展示(一个两列展示/一个三列展示等)时,出现不能正常渲染的问题(如果都是两列或三列,则可以正常渲染),加上id后就可以正常渲染了.

分享到：
| Ext.ux.UploadDialog组件的使用 示例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Extjs fieldset两行两列布局

    - 使用`column`布局可以轻松地将元素分成多列。 - `ColumnWidth`属性用于精确控制每列的宽度。 - 在设置`ComboBox`或`DateField`时，可以根据具体需求调整样式和其他属性。 #### 五、代码示例总结 ```javascript ...

    Extjs增删改查示例

    Ext.grid.Panel用于创建表格，可以配置列模型（ColumnModel）来定义列的显示。同时，可以设置行编辑器（RowEditing）或窗体编辑器（FormPanel）来实现对数据的编辑。在添加新记录时，通常会创建一个新的空白Model...

    Ext Column+Form布局画复杂页面

    Column Layout允许在一个容器中创建多列，并且可以自动调整列宽以适应内容。这个布局模式非常适合那些需要在一行内并排放置多个组件的应用场景。 接下来是Form Layout（表单布局），它专为创建表单而设计。表单布局...

    html标签总结

    - **作用**：定义表格中一个或多个列的属性值。 - **示例**：`&lt;table&gt;&lt;col span="2" style="background-color:yellow"&gt;&lt;col style="background-color:gray"&gt;&lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;C&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;` ####...

    Bootstrap CSS布局之表单

    - 横向表单允许表单元素在多列布局中呈现，通常与Bootstrap的栅格系统结合使用。 - 添加`.form-horizontal`类到`&lt;form&gt;`元素，然后将`.control-label`类应用于`&lt;label&gt;`，并将输入控件放入具有栅格类（如`.col-lg-...

    j2ee 表单学习

    行数" cols="列数"&gt; 默认文本 ``` #### 五、其他表单元素 除了上述基本元素外，还有一些其他类型的表单元素： - **提交和重置按钮**：用于提交或重置表单。 - 示例代码： ```html 提交"&gt; 重置"&gt; ``` -...

    html5+css3现代感注册表单.zip

    此外，CSS3的Flexbox（弹性盒布局）或Grid（网格布局）允许我们轻松地控制表单元素的排列和对齐，无论是响应式设计还是多列布局。比如，`display: flex`和`justify-content`可以实现水平居中的表单，而`grid-...

    HTML 5 标签参考

    - **示例**： ```html &lt;!-- 这是一条注释 --&gt; ``` ##### 2. `&lt;!DOCTYPE&gt;` - **用途**：定义文档类型。 - **示例**： ```html &lt;!DOCTYPE html&gt; ``` ##### 3. `&lt;a&gt;` - **用途**：定义超链接。 - **属性**： -...

    Ext中表单中各种组件的布局

    // 可以继续添加更多列或fieldset ] }], buttons: [{ text: '按钮', handler: function () { form.getForm().submit(); } }] }); }); ``` 在这个例子中，我们使用了两个`fieldset`组件来组织表单中的信息。...

    CSS3实现分步骤进行的注册表单效果.rar

    "CSS3实现分步骤进行的注册表单效果"是一个很好的示例，它展示了如何利用先进的Web技术提高用户交互性，特别是对于那些涉及多步骤填写的表单。这个项目的核心是通过HTML5和CSS3来构建一个动态的、无需跳转页面的多步...

    primefaces中文教程

    11. **Columns**：多列组件，处理复杂的数据展示。 12. **ColumnGroup**：列组，用于分组列的显示。 13. **Tree**：树形显示，用于展示层级关系数据。 14. **TreeTable**：树表，结合树形结构和表格，展示有层次的...

    html知识

    - **cols/rows**: 定义框架集的列或行布局比例。 #### HTML &lt;legend&gt; 标签 `&lt;legend&gt;` 标签用于为 `&lt;fieldset&gt;` 提供标题。它常用于表单中的分组标题，以便清晰地区分不同的表单字段。 **示例代码：** ```html ...

    利用css+html5写的登录注册.zip

    - 多列布局：column-count和column-gap等属性可以轻松创建多列布局。 - 边框和边距：圆角边框`border-radius`，以及阴影效果`box-shadow`增加视觉效果。 在这个登录注册界面中，HTML5和CSS3的结合将提供一个交互...

    django xadmin中form_layout添加字段显示方式

    总之，Django Xadmin的`form_layout`提供了一种灵活的方式来调整模型表单的显示，你可以根据需要创建多行、多列的布局，甚至隐藏不需要的字段，以提升用户体验。熟练掌握这一特性，对于开发高效且用户友好的后台管理...

    primefaces

    - **Columns**：多列布局组件。 - **ColumnGroup**：用于分组表格列的组件。 - **CommandButton**：执行特定命令的按钮。 - **CommandLink**：执行特定命令的链接。 - **ConfirmDialog**：确认对话框，在执行某些...

    htnnl--3.表格、表单

    2. **行与列**: 数据在`&lt;tr&gt;`内按列排列，每一列由一个或多个`&lt;td&gt;`或`&lt;th&gt;`组成。多行`&lt;tr&gt;`构成表格的主体。 3. **合并单元格**: 使用`colspan`属性可以合并列，`rowspan`属性可以合并行，以适应不同复杂的数据...

    html5参考手册

    10. 拓展的CSS3：HTML5与CSS3结合使用，提供了更丰富的样式和布局选项，如边框圆角、阴影、渐变、多列布局、媒体查询等，让网页设计更具表现力。 11. 语义化链接：HTML5的`&lt;link&gt;`元素新增了`rel`属性的值，如`prev...

Magicbox
Global site tag (gtag.js) - Google Analytics