`

EXTJS 初始化Combobox的数据

阅读更多
combobox获取数据有两种方式:即参数mode的取值,local或者remote
我比较喜欢的数据格式是JSON,采用Ext.data.SimpleStore
1、mode:'local'
var departmentCode = [
   ['1','研发部'],['2','人事处'],['3','总经办']
];

new Ext.form.ComboBox({
    fieldLabel: 'Department Code',
    name:'departmentCode',
    forceSelection: true,
    listWidth: 200,
    store: new Ext.data.SimpleStore(...{
           fields: ['value', 'text'],
           data : departmentCode
    }),
    valueField:'value',
    displayField:'text',
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all',
    selectOnFocus:true,
    allowBlank:false
})

2、mode:'remote'
var combo = new Ext.data.JsonStore({
     url:'url',
     fields: ['departmentId','departmentname']});

combo.load();

new Ext.form.ComboBox({
      fieldLabel: 'Department',
      name:'department',
      forceSelection: true,
      listWidth: 150,
      store: combo,
      valueField:'departmentId',
      displayField:'departmentname',
      typeAhead: true,
      mode: 'local',
      triggerAction: 'all',
      selectOnFocus:true,
      allowBlank:false
})
其中json的格式如:{['1','研发部'],['2','财务处']}

注意:如果返回的json数据有多列,需要在new Ext.data.JsonStore的时候,在fields一项中填写所有column的名字,否则不能填充combobox
分享到:
评论

相关推荐

    extjs editgrid combobox 回显

    1. **初始化`ComboBox`**:在`ColumnModel`的`editor`属性中,创建一个`ComboBox`实例,并正确设置`valueField`和`displayField`属性。同时,确保`ComboBox`的`store`属性绑定到适当的数据存储。 2. **配置`...

    Extjs EditorGridPanel中ComboBox列的显示问题

    在EXTJS中,EditorGridPanel是一种可编辑的表格组件,它允许用户直接在表格单元格内编辑数据。然而,当在EditorGridPanel中嵌入ComboBox(下拉选择框)作为编辑器时,可能会遇到一个问题,即ComboBox显示的不是其...

    Extjs让combobox写起来简洁又漂亮

    2. 绑定事件监听器:在自定义combobox类中,定义一个监听器在组件渲染后获取数据,这样可以在组件初始化时直接从服务器获取数据并显示。 3. 创建控制器:定义一个名为baseComboboxController的控制器来处理combobox...

    extjs4 实现下拉树并支持复选

    - `initComponent`:初始化组件,调用父类方法并添加事件监听器。 - `createPicker`:创建下拉树的面板(tree.Panel)。这个面板包含了树的数据源(store)、宽度、高度、显示字段等配置,并且监听了节点点击事件...

    轻松搞定Extjs 带目录

    Extjs对分页、表单验证、表单组件的布局与初始化都提供了详细的指导,使得表单元素的开发更加高效。 表格组件GridPanel是Extjs中的亮点之一,它不仅可以展示大量数据,还支持复杂的列模型和行操作。此外,GridPanel...

    EXTJS记事本 当CompositeField遇上RowEditor

    在EXTJS中,RowEditor的beforeedit事件并不适合用来初始化自定义的CompositeField,因为此时RowEditor的控件尚未渲染完成。为了解决这个问题,开发者创建了一个自定义的afterstart事件,这个事件会在RowEditor显示后...

    Extjs Combotree

    7. **初始化和渲染**:最后,调用`render`方法使Combotree组件在页面上显示。 在实际应用中,ExtJS Combobox Tree常用于选择层级结构的组织机构、地区、分类等场景,通过其强大的功能和灵活的配置,可以大大提高...

    EXTJS3.0中文API (离线)

    总的来说,EXTJS 3.0中文API为开发者提供了一个详细的指南,无论是在项目初始化阶段还是在解决具体问题时,都能从中获得必要的帮助。对于EXTJS的初学者和有经验的开发者来说,这都是一份非常宝贵的资源。

    Extjs应用教程 提高篇

    代码段展示了ASP.NET页面的结构,包括引用EXTJS库的CSS和JavaScript文件,以及初始化GridPanel和ComboBox的JavaScript代码。变量如table_Name、panel、data、grid和combobox分别用于存储表名、面板、数据、网格和...

    轻松搞定Extjs

    合理的布局可以使表单更加美观易用,初始化则确保了表单的初始状态符合预期。 - **布局概述**: 强调了布局在表单设计中的重要性。 - **分割吧!**: 展示了如何使用分割线等布局控件来组织表单元素。 - **表单初始化...

    ExtJs下拉树

    它可能包含了HTML结构和必要的JavaScript代码来初始化和配置下拉树实例。 - **getNodes.jsp:** 这个可能是服务器端的文件,用于获取并返回树结构的数据。当用户打开下拉树时,这个文件会被Ajax请求调用来动态加载...

    Extjs3 多选下拉框LovCombo

    1. **初始化Store**:定义一个Ext.data.Store对象,用于存储lovcombo的数据。数据源可以是JSON、XML或者其他格式。 2. **定义Model**:定义数据模型,指定哪些字段作为显示字段和值字段。 3. **配置LovCombo**:...

    extjs4.2 datetime控件

    3. **动态赋值**:描述中提到的“动态赋值”意味着你可以随时更改DateTime控件的值,而不仅仅是初始化时。这可以通过JavaScript代码直接设置控件的“value”属性,或者通过监听其他组件的事件来响应变化。 4. **...

    Extjs2.0中文文档

    3. **页面与脚本的分离**:Ext.js提倡在开发中将页面标记和JavaScript脚本彻底分离,文档中会有介绍如何通过事件管理器Ext.onReady来管理脚本的加载时机和页面的初始化过程。 4. **元素操作与模板**:Ext.js提供了...

    extjs插件开发教程

    其中,`init`方法是插件的核心,它会在组件初始化完成后被调用。 2. **实现插件功能**: 在`init`方法中,你可以访问并操作关联的组件,添加事件监听器,或者修改组件的配置。例如,如果你想要扩展一个Grid面板,...

    extjs中文教程

    同时,也介绍了FormPanel的布局方式和初始化过程。 ### 第十六部分:表格组件——GridPanel GridPanel是ExtJS中处理表格数据的高级组件。本部分详细介绍了GridPanel的使用,包括列模型、数据管理,以及如何实现...

    Extjs中ComboBoxTree实现的下拉框树效果(自写)

    - `initComponent`: 这是初始化组件的函数,用于设置组件的一些基本属性和行为,包括创建TreePanel实例。 5. **TreePanel配置**: TreePanel用于展示树状数据结构,配置项包括但不限于: - `border`: 是否显示...

Global site tag (gtag.js) - Google Analytics