`

Ext.form.Radio的横向和纵向排列

EXT 
阅读更多

横向: 整个Radio Group使用column方式进行布局即可横向显示,但这样的话只能显示每一个Radio的BoxLabel,不能为Radio Group指定一个总的Label,所以第一个Radio再使用form布局进行嵌套,用它的fieldLabel作为Radio Group的Label.

纵向: 使用Form进行布局即可,但除了第一项之外的所有项需要把labelSeparator指定为空,以免出现多余的冒号

 

new Ext.FormPanel({
  labelAlign: 'right',
  frame:true,
  title: 'Radio Group',
  bodyStyle:'padding:5px 5px 0',
  width: 400,
  items: [{
   layout:'column',//列布局
   items:[{
     layout: 'form',
     items: [
          new Ext.form.Radio({
              fieldLabel: '横向Radio Group',
              boxLabel:'opt1', 
              name:'opt1'
          })]
    },{
     items: [
          new Ext.form.Radio({
              boxLabel:'opt2', 
              name:'opt1'
         })]
    },{
     items: [
          new Ext.form.Radio({
              boxLabel:'opt3', 
              name:'opt1'
          })]
    },{
     items: [
          new Ext.form.Radio({
              boxLabel:'opt3', 
              name:'opt1'
          })]
    }]
  },{
   layout: 'form',
   items: [
       new Ext.form.Radio({
         fieldLabel: '纵向Radio Group',
         boxLabel:'opt1', 
         name:'opt2'
        }),
       new Ext.form.Radio({
         boxLabel:'opt2',
         labelSeparator:'', 
         name:'opt2'
        }),
       new Ext.form.Radio({
         boxLabel:'opt3',
         labelSeparator:'', 
         name:'opt2'
        }),
       new Ext.form.Radio({
         boxLabel:'opt3',
         labelSeparator:'', 
         name:'opt2'
        })
       ]
  }]
});
 

 

分享到:
评论

相关推荐

    Ext.form表单中各种属性应用详解

    **Ext.form.DateField** 是一个日期选择器,继承自 **Ext.form.TriggerField**,专门用于日期的选择和输入。 - **altFormats**: 类型为 `String`,定义用于解析用户输入的其他日期格式,默认为 `'m/d/Y|m-d-y|m-d-Y...

    EXT.form组件

    10. `radio`:`Ext.form.Radio`是单选按钮组件,用户只能选择其中的一个选项。 11. `textarea`:`Ext.form.TextArea`用于创建多行文本输入字段,支持自动调整大小。 12. `textfield`:`Ext.form.TextField`是最...

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

    EXT dojochina文本框示例Ext.form.TextField.rar

    2. **配置项**:`Ext.form.TextField`支持多种配置项来定制其行为和外观,如`fieldLabel`(字段标签)、`name`(字段名,用于数据绑定)、`width`(宽度)、`maxLength`(最大字符数)等。 3. **验证**:EXT提供了...

    Ext.form.field.ComboBox结合Java、JSON实现AutoComplete

    本示例探讨如何利用Ext JS中的`Ext.form.field.ComboBox`组件,结合Java后端和JSON数据格式,来创建这样一个功能。 `Ext.form.field.ComboBox`是Ext JS框架中一个强大的组件,它提供了下拉列表的功能,可以用于创建...

    Ext.ux.form.ColorPickerFieldPlus 老外重写调色版

    5. **JavaScript文件**:`Ext.ux.form.ColorPicker.js` 和 `Ext.ux.form.ColorPickerFieldPlus.js` 分别是`ColorPicker`的基础组件和增强版本。前者可能包含了通用的颜色选择逻辑,而后者则是在此基础上添加了更多...

    Ext.get与Ext.fly的区别

    在Ext JS框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们主要用于操作DOM元素。理解这两个方法之间的区别以及如何使用它们对于开发高质量、高效率的应用程序至关重要。 #### 1. Ext.get **定义**:`Ext....

    Ext Extjs 禁止文本和日期编辑

    var textField = Ext.create('Ext.form.field.Text', { fieldLabel: '文本字段', id: 'readOnlyTextField' }); // 动态设置 readOnly 为 true textField.setReadOnly(true); ``` 在上述代码中,我们首先创建了一...

    Ext.Store的获取方法

    在Ext.js中,`Ext.Store`是用来管理数据的类,它通常与各种UI组件(如Grid、ComboBox等)关联,用于存储和检索数据。然而,获取`Ext.Store`的方式并不像获取其他Ext组件那样直接,因为Store并不是一个具有可视界面的...

    Ext.ux.form.TinyMCETextArea

    在Extjs4中,`Ext.form.field.TextArea`是用于输入多行文本的标准组件,但它的功能相对有限。而`Ext.ux.form.TinyMCETextArea`则扩展了这个基础组件,提供了更丰富的编辑功能。这个组件通常用在需要用户输入格式化...

    Ext.Ajax.request2.x实现同步请求

    在EXTJS库中,`Ext.Ajax.request`是用于发送Ajax请求的核心方法,它支持异步和同步操作。本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,...

    Ext.get与Ext.fly 的区别

    在EXTJS这个强大的JavaScript框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们都用于操作DOM元素,但它们之间存在着微妙的差异。了解这些差异对于优化代码性能和理解EXTJS的工作机制至关重要。 首先,`Ext....

    Ext.data.Store的基本用法

    这样做会使得`Ext.data.Store`在向服务器请求数据时自动添加`sort`和`dir`参数,从而让服务器端能够根据这些参数进行排序处理。 ```javascript var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({...

    TreeComboField 扩展自Ext.form.TriggerField

    这个是扩展自Ext.form.TriggerField的代码,很好用的,分享下

    Ext.form.FieldSet的用法.pdf

    `Ext.form.FieldSet` 是 `ExtJS` 框架中的一个组件,它主要用于组织和分组表单中的字段。FieldSet 提供了一种在界面上以可折叠或展开的方式展示一组相关输入字段的方式,有助于增强用户体验和界面的可读性。以下是对...

    一个简单的Ext.Window中插入图片的例子

    在`Ext.Window`中添加内容通常通过设置其`items`配置项来完成,可以是任何Ext JS支持的组件,如`Ext.Panel`、`Ext.form.FieldSet`或直接的HTML元素。 插入图片主要涉及以下步骤: 1. **创建图片对象**:在...

    org.restlet.ext.spring.jar

    org.restlet.ext.spring.jar

    ExtJs 带清空功能的日期组件

    DateField是Ext.form.field.Date的实例,它继承自Ext.form.field.Text。DateField提供了一个日期选择器,允许用户通过日历图标选择日期,或者直接在文本框中输入日期。默认情况下,它会按照指定的格式显示和验证日期...

    Ext.js教程和Ext.js API

    本教程和API文档聚焦于Ext.js 3.0版本,这是一个较早但仍然广泛应用的版本。 **Ext.js 3.0中文API**: API文档是开发任何库或框架时的必备参考资料。Ext.js 3.0的中文API提供了一个详细的类和方法参考,方便中文...

    Ext.tree.TreeLoader附带封装的json类

    `Ext.tree.TreeLoader`是Ext JS库中的一个组件,它负责加载和解析树形结构的数据,而JSON(JavaScript Object Notation)则是一种轻量级的数据交换格式,非常适合于在服务器和客户端之间传输数据。我们将通过实例...

Global site tag (gtag.js) - Google Analytics