`

ExtJs ComboBox FormPanel

阅读更多
   1. combobox extjs的combobox应该是用一个input + div拼出来的,我没有详细看代码,这个combobox如果把editable设成false,那么他就是一个很好的select标签,但是比 select标签有很多优点。 2.1它可以有效解决select div遮挡问题(<select>标签永远在其它标签上面)。 2.2combobox可以指定getValue得到是TextField的值,还是ValueField的值。 2.3最重要的是combobox可以自己输入信息(设置editable=true). 
   2. 发现不给body定义font   ComboBox 会有点变形定义了就不会
   3. ComboBox
      var store = new Ext.data.SimpleStore({
              fields: ['abbr', 'state', 'nick'],
              data : [
              ['AL', 'Alabama', 'The Heart of Dixie'],
              ['AK', 'Alaska', 'The Land of the Midnight Sun'],
              ['IN', 'Indiana', 'The Hospitality State']
              ]
      }); // 用于填充combobox的下拉数据,可以用 Store实现ajax动态取得下拉框的数据.
      var combo = new Ext.form.ComboBox({
              id: 'pageCombo'
              store: store, // 下拉数据
              tpl: '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>',
              // 提示信息
              displayField:'state', //显示上面的fields中的state列的内容,相当于option的text值
              valueField: 'abbr', // 选项的值, 相当于option的value值
              name: 'content',
              mode: 'local', // 必须要,如果为 remote, 则会用ajax获取数据
              triggerAction: 'all', // 点击下拉的时候, all 为展出所有Store中data的数据
              readOnly: true, // 如果设为true,则好像一般的下拉框一样,默认是false,可输入并自动匹配
              emptyText:'Select a state...',
              selectOnFocus:true,
              hiddenName: 'comBoValue', // 如果有form提交,这个值一定要设置,不然记下选了那个值
              // 生成一个hidden的input,用于存放选中的值, 因为ComboBox是用div和input模拟的,form.submit后取得的是input的值.
      });
      Ext.getCmp('pageCombo').addListener('change', function(box, newv, oldv) {
             alert(newv);
          });
      // 给ComboBox添加监听事件,change事件相当于select的onchange事件


      FormPanel
      <div id='dp' style='width: 120px; height: 30px;'></div>
      Ext.onReady(function(){
              Ext.form.Field.prototype.msgTarget = 'side';
              // 这个设置会使field在allowBlank==false时提示field的emptyText
              var myForm = new Ext.form.FormPanel({
                      // 可用属性包括了 BasicForm 的属性
                      width: 500,
                      method: 'post',
                      title: '',
                      header: false, // 不创建标题栏
                      headerAsText: false, // 如果有标题栏, 隐藏标题栏
                      onSubmit: Ext.emptyFn,
                      submit: function() {
                          this.getForm().getEl().dom.submit(); // 提交form
                      }
              });
              myForm.add(combo);
              myForm.render('dp'); // 在div中添加这个form
      }
分享到:
评论

相关推荐

    ExtJS Combobox二级联动列子

    1. Combobox:ExtJS中的Combobox是FormPanel的一个字段,它结合了文本输入框和下拉列表,提供了一种选择或输入数据的方式。 2. 二级联动:指两个或多个Combobox之间存在依赖关系,当一个Combobox的值改变时,另一个...

    extJs ComboBox级联

    ExtJS ComboBox级联是一种在Web应用中常见的交互方式,它允许用户从下拉列表中选择一个值,并且这个选择会影响到另一个ComboBox的选择项,通常用于表示层级关系的数据,比如省份-城市-区县。这种功能在数据筛选、...

    EXTJS修改颜色实例源码

    在提供的实例源码中,我们看到的是如何在 EXTJS 中修改颜色的示例,具体涉及到 EXTJS 的 FormPanel 和 ComboBox 组件,以及自定义事件处理。 1. **FormPanel**: - `Ext.form.FormPanel` 是 EXTJS 中用于创建表单...

    轻松搞定Extjs 带目录

    Extjs的组件系统非常丰富,包括按钮、日期选择器、ComboBox等,它们都可以通过配置实现复杂的交互逻辑。数据管理部分涉及到了Extjs对Ajax请求的封装、数据代理、读取器、存储等概念。Extjs对分页、表单验证、表单...

    轻松搞定Extjs

    ### 轻松搞定Extjs #### 极简学习指南概览 《轻松搞定Extjs》是一本旨在帮助读者快速掌握Extjs框架基础知识及其高级应用的教程书籍。本书通过详尽的内容安排,从预备知识到具体实践案例,全方位地介绍了Extjs的...

    ExtJS 3.1 下拉框 与aps.net绑定使用

    2. 在客户端使用ExtJS创建ComboBox: ```javascript Ext.onReady(function() { var store = new Ext.data.JsonStore({ url: 'DropDownService.asmx/GetOptions', root: 'd', // ASP.NET Web Service 返回的JSON...

    extjs2.0 下拉列

    在 ExtJS 中,下拉列表可以通过创建 `Ext.form.ComboBox` 实现。这个组件可以静态填充数据,也可以动态从服务器获取数据。 创建一个基本的下拉列表需要以下步骤: 1. **创建 Store**: 首先,你需要定义一个数据...

    Extjs4 下拉树 TreeCombo

    在ExtJS 4中,TreeCombo主要由两部分组成:一个普通的ComboBox和一个内嵌的TreeView。当用户展开ComboBox时,内部的TreeView显示,用户可以浏览和选择树形结构中的节点。一旦用户选择了某个节点,ComboBox的输入框将...

    ExtJS 2.2 API文档

    ExtJS 2.2提供了一系列丰富的表单组件,如`TextField`、`ComboBox`、`DateField`等,以及`FormPanel`用于组织这些组件。表单提交和验证功能强大,可以方便地进行Ajax异步提交。 5. **图表组件**: 虽然2.2版本的...

    extjs 常用控件的使用 table layout

    2. **ComboBox**:下拉框,允许用户从预定义的选项中选择,也可以进行搜索。 3. **Checkbox** 和 **Radio**:复选框和单选按钮,用于多选和单选操作。 4. **Button**:按钮组件,常用于触发操作或事件。 5. **...

    Extjs2.0中文文档

    文档中会介绍Panel的使用以及其子类Window和FormPanel的特定功能。 12. **表单组件**:表单是Web应用中不可或缺的一部分,文档会介绍Ext.js提供的各种表单组件以及它们的配置选项和验证功能。 13. **悬停提示与...

    extjs中文教程

    ExtJS中的分页通常与ComboBox组件结合使用,允许用户在不同页面间切换,获取所需数据。本部分介绍了如何从Servlet获取数据,实现分页功能,并创建ComboBox组件。 ### 第十二部分:面板组件 面板(Panel)是ExtJS...

    extJs 常用到的增,删,改,查操作代码

    对于新增操作,ExtJs提供了FormPanel组件,这个组件可以包含各种表单元素,比如TextField、ComboBox等,它们可以与后端的模型字段相对应。在上述代码示例中,“showUserForm()”函数被用来绘制添加表单,其中用到了...

    extjs下拉树

    在ExtJS中,下拉树是通过`Ext.form.field.Tree`类实现的,它继承自`Ext.form.field.ComboBox`,增加了树状结构的功能。`ComboTree.js`可能就是实现了这个功能的JavaScript文件,包含了一些定制化的代码或扩展。 ...

    extjs2.0 画的一个带查询条件和查询结果的页面

    在ExtJS中,我们可以使用`Ext.form.FormPanel`创建一个包含输入字段的表单,这些字段对应于查询条件。例如,你可以有文本框(TextField)用于关键词输入,下拉框(ComboBox)用于选择类别,日期选择器(DateField)...

Global site tag (gtag.js) - Google Analytics