首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在ExtJS 3.4中使用Json将缺省值设置为ComboBox

在ExtJS 3.4中,可以使用Json将缺省值设置为ComboBox。ComboBox是一个下拉列表框,可以用于选择一个或多个选项。通过Json数据,可以设置ComboBox的缺省值。

首先,需要创建一个ComboBox组件,并设置其store属性为一个JsonStore。JsonStore是一个用于加载和保存Json数据的数据存储对象。

代码语言:txt
复制
var store = new Ext.data.JsonStore({
    fields: ['value', 'text'],
    data: [
        { value: '1', text: 'Option 1' },
        { value: '2', text: 'Option 2' },
        { value: '3', text: 'Option 3' }
    ]
});

var comboBox = new Ext.form.ComboBox({
    store: store,
    displayField: 'text',
    valueField: 'value',
    mode: 'local',
    triggerAction: 'all',
    value: '2', // 设置缺省值为Option 2
    editable: false
});

在上述代码中,我们创建了一个JsonStore,并设置了两个字段:value和text。然后,我们通过data属性设置了ComboBox的选项数据。在ComboBox的定义中,我们设置了displayField为'text',valueField为'value',这样ComboBox将显示选项的文本,同时将选项的值存储在value属性中。

通过设置value属性为'2',我们将ComboBox的缺省值设置为Option 2。这样,在页面加载时,ComboBox将显示Option 2作为默认选项。

需要注意的是,为了防止用户修改ComboBox的值,我们将editable属性设置为false,这样用户只能选择ComboBox中的选项,而不能手动输入其他值。

推荐的腾讯云相关产品:腾讯云COS(对象存储服务)。腾讯云COS是一种安全、高可靠、低成本的云存储服务,适用于存储、备份和归档大量非结构化数据,如图片、音视频、文档等。您可以通过以下链接了解更多关于腾讯云COS的信息:腾讯云COS产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

EXT.NET复杂布局(一)——工作台

EXT.NET是一组基于ExtJS库开发的开源的ASP.NET组件。 使用Ext.NET开发,比直接写JS更利于维护,也更方便开发。...使用EXT.NET就不代表不需要写EXTJS,更不代表不需要了解Extjs。你会发现,使用EXT.NET的过程中,也会对Extjs有一定的了解。...有的控件设置了IDMode="Static",故可以直接使用控件的服务器ID来获取对象。 ExcuteCommand:执行命令。当View时,打开相应的窗口。...JsonReader控件:用于读取Json数据。注意属性TotalProperty和Root,分别是设置总记录数和根元素的,如果设置不正确,读取不到数据。...Handler属性里面写脚本,可以使用"#{ID}"来获取控件的客户端ID, 这里没有设置IDMode="Static",所以当放置在用户控件或者母版页中的时候,会添加很多前缀,导致JS执行出错。

2.3K30
  • Extjs-lesson4

    TextField 1.2 代码 ❝窗体 Window 以及表单 FormPanel 的代码省略,以后的代码只展示必要部分。...Combobox 8.2 代码 ❝Ext.js2.3 中没有 ArrayStore ,我们使用 Store 替代更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』 ❞ //创建数据源[...Extjs 使用的数据 // 参数 id 列,以及其他各个字段的名称 reader: new Ext.data.ArrayReader({ id: "id" }, ["id", "name"]...//显示的列,对应数据源的 name 列;此属性必填 displayField: "name", //对应数据源中 id 列的值;此属性必填 valueField: "id", //请设置...//指定数据源本地数据源,如果是本地创建的数据源,该属性也是必须的 //设置'remote'表示数据源来自于服务器 mode: "local" }); //Combobox获取值 //选择时

    4.8K10

    EXT基础

    http://extjs.org.cn/ 下载好以后解压缩 •adapter :负责里面提供第三方底层库(包括Ext自带的底层库)映射Ext所支持的底层库。...•exmaples:提供使用ExtJs技术做出的小实例。 •resources:Ext UI资源文件目录,如CSS、图片文件都存放在这里面。...fieldLabel: 'Title',    name: 'title', allowBlank: false } 一种常用的校验是看用户是否输入了任何内容,建立一个allowBlank配置项并把它设置...下拉框 对于combobox我们也要为它添加配置。 store配置项就是用来说明combo中采用的数据的。...使用它的时候只要在menu配置项目中添加按钮的属性就可以了。点击按钮左边部分可以触发按钮本身的事件,点击按钮右边的部分(有个倒三角)可以展开菜单。

    4.3K40

    Extjs form 组件

    数据验证,表单提交,数据加载的功能 2.表单的容器 Ext.form.Panel 容器自动关联 Ext.form.Basic 的实例对象更方便的进行字段的配置 重要属性 defaultType:"" 设置默认子项...    重要的方法     Ext.form.field.ComboBox     控件支持自动完成、远程加载、和许多其他特性。...这个类的实例只Form 提交的时候创建。     ...isValid方法确保每个表单字段都已经填写正确    3.最后调用submit方法,并传递了两个回调函数success和failure,在这两个回调函数的参数中,action.result可以引用到服务器端返回JSON...'Please correct form errors.') }             }       } ]    demo 下载 https://github.com/ningmengxs/Extjs.git

    2K50

    easy ui Tree请求跨域数据

    扯淡篇: jQuery EasyUI提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree...jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但页面也是相当好看的,同时页面支持各种themes以满足使用者对于页面不同风格的喜好。...一些功能也足够开发者使用,相对于extjs更轻量。...在此之前对她只是简单的了解,经过项目的开发有了进一步的理解,本文主要分享一下我使用tree组件过程中的一些心得,把我遇到的一些问题分享给大家。...newArr[j].id == oriArr[i].channel) { //如果新数组中已经存在了当前的设备id,则将当前设备当做child保存 notExist = false; //flag

    71530

    初识Ext.NET

    以前从没想过会用到ExtJS,总是对它有着一种反感:认为脚本资源大,执行脚本多,性能差等等。最近因为一个项目使用到了,就用上了。...相对JQuery,ExtJS没有那么方便灵活,但是其界面美观,功能实用,可以节约不少开发时间。玩ExtJS,就感觉是玩配置,也许Java程序员会习惯些。...不过使用过程中,也没有那么顺畅。 1)TextField的LabelStyle属性无效。这个据老外说,貌似是ExtJS的Bug,因为Ext.NET会根据你的设置生成标准的ExtJS配置。...FormPanel里面嵌套FormPanel,把子FormPanel的Layout设置Column就好布局了。或者也可以考虑使用TableLayout,布局起来也挺方便的。.../projects/json-net.aspx(JSON.NET) http://www.jsonlint.com/(JSON格式验证,感觉方便JSON格式化,这对于查看或检查JSON数据、ExtJS

    1.6K60

    基于 HTML5 WebGL 的 3D 仓储管理系统

    , methods) 是 HT 中封装的自定义类的函数,其中 className 自定义类名, superClass 要继承的父类,methods 方法和变量声明,要使用这个方法要先在外部定义这个函数变量...要继承的父类,methods 方法和变量声明,要使用这个方法要先在外部定义这个函数变量,通过 functionName.superClass.constructor.call(this) 方法继承...(1, 150); tableLayout.setPadding(8);//设置组件内边距,参数如果是数字,说明四边使用相同的内边距;如果是数组,则格式:[上边距, 右边距, 下边距, 左边距] /...('imgs/combobox_icon_hover.json'); comboBox.setBorderRadius(0);////设置 CSS 边框圆角 comboBox.setBorder(new...= new ht.ui.ColorPicker();//颜色选择器组件 comboBox.setFormDataName('blend');//设置组件表单中的名称 comboBox.getView

    3.6K51

    基于 HTML5 WebGL 的 3D 仓储管理系统

    , methods) 是 HT 中封装的自定义类的函数,其中 className 自定义类名, superClass 要继承的父类,methods 方法和变量声明,要使用这个方法要先在外部定义这个函数变量...要继承的父类,methods 方法和变量声明,要使用这个方法要先在外部定义这个函数变量,通过 functionName.superClass.constructor.call(this) 方法继承...(1, 150); tableLayout.setPadding(8);//设置组件内边距,参数如果是数字,说明四边使用相同的内边距;如果是数组,则格式:[上边距, 右边距, 下边距, 左边距] /...('imgs/combobox_icon_hover.json'); comboBox.setBorderRadius(0);////设置 CSS 边框圆角 comboBox.setBorder(new...= new ht.ui.ColorPicker();//颜色选择器组件 comboBox.setFormDataName('blend');//设置组件表单中的名称 comboBox.getView

    3.6K30

    基于 HTML5 的 3D 工业互联网展示方案

    实际应用中,东方航空公司 Predix 上使用工业互联网应用搜集了 500 多台 CFM56 发动机的高压涡轮叶片保修数据,结合远程诊断纪录和第三方数据,建立了叶片损伤分析预测模型。..., methods) 是 HT 中封装的自定义类的函数,其中 className 自定义类名, superClass 要继承的父类,methods 方法和变量声明,要使用这个方法要先在外部定义这个函数变量...要继承的父类,methods 方法和变量声明,要使用这个方法要先在外部定义这个函数变量,通过 functionName.superClass.constructor.call(this) 方法继承...(1, 150); tableLayout.setPadding(8);// 设置组件内边距,参数如果是数字,说明四边使用相同的内边距;如果是数组,则格式:[上边距, 右边距, 下边距, 左边距]...('imgs/combobox_icon_hover.json'); comboBox.setBorderRadius(0);// 设置 CSS 边框圆角 comboBox.setBorder(new

    2.7K20

    【大牛经验】Java开源JSP标签库(32款)

    使用该标记库,利用 Google 你的网站提供网站查询,并且可以直接在你的网页里面显示搜查的结果。 10 TableTag TableTag是类似于DataGrid的Jsp标签库。...扩展使用策略设计模式实现。利用pack:tag压缩静态资源:能够减少带宽;加速客户端装载时间;混淆内容和资源名称。解决JavaScript文件浏览器缓存问题(HashCode成新的资源名称)。...Jmesa非常易于使用,可按自己的需求进行扩展。JMesa需要JDK1.5以上的环境。 30 ExtTLD ExtTLD是一个封装ExtJS框架的JEE标签库。...如果你不熟悉javascript,但只要会使用标签,同样可以使用ExtJS漂亮的UI组件。...31 JSON-taglib JSON-taglib是一套JSP标签库用于JSP代码中输出JSON格式的数据。

    2.1K50

    Ext JS 教程-MVC架构 原

    最后你将会指导如何使用心得ExtJS 4 应用程序架构简单的应用程序组织到一起。 应用程序架构提供了架构和一致性的意义和提供了实际的类和框架代码一样重要。...所有ExtJS 4应用程序都应该使用一个单独的全局变量,应用程序的所有类网络其中。...这样就自动的我们设置了一个全局变量 AM,并且向 Ext.Loader 注册了命名空间,附带通过 appFolder 配置选项设置了对应的与其(命名空间)对应的路径‘app' 。...阅读器负责服务的回应数据解码成存储(Store)可以理解的格式。这里我们使用了一个 JSON 阅读器,并且定制根路径和successProperty配置。...对于这个例子我们只服务器端使用了静态的JSON文件,因此我们看不到对数据库的任何更改,但是我们至少验证了所有东西被正确的塞到了一起。

    3.3K10

    easyUI的combobox实现级联

    ”,这种方式比较适用于静态的选项 2、使用input标签,并加上class=”easyui-combobox”,后面跟上data-options,可以用local或是remote方式加载数据 3、使用js...方式,和2基本相同,只是把combobox一些属性的设置分离到了js中 下面是级联的思路: combobox实现级联基本上和select类似,比如省份和城市的级联 当省份选完这个事件发生之后,城市的选择框里就会刷新数据...比如是浙江,id是29),那么我们可以拿到这个29去后台查询浙江省下的城市Json数据,这串Json就是需要放到城市combobox中的数据 那么开始动手吧: 省份:...' "> 使用中可能碰到的问题: 1、combobox指定name后,经过easyUI自己解析后,生成的combobox(也就是select)没有name这个属性...所以要根据name得到combobox使用comboname 2、$(‘[comboname=city]’).combobox(‘clear’); 这一步也是必要的,不然combobox中之前选中的值无法清除

    1.8K20

    Easyui datagrid combobox输入框非法输入判断与事件总结

    ; 如果选取项和当前输入框的值一样,仅会触发事件:onHidePanel 2、输入 通过Combobox输入框中手动输入数据 如果停止输入后的数据和输入前的值不一样,则触发事件:onChange 连续不停的输入...var comboboxData = $(this).combobox('getData'); var if_found = false; // 用于标记输入值是否选项中...收起下拉列表时,触发事件: onHidePanel 通过以上规律,我们可以触发onSelect事件时,存储选取的值,触发onUnselect事件时,移除取消选中的值,然后收起下拉列表时,获取输入框的值和存储的值...newValue[],oldValue设置最新的值 // 收起下拉列表时触发的事件 function onHidePanel() { var... 说明: multiple:'true', 设置combobox支持多选。

    3.4K30

    easyui combobox下拉框实现多选框以及全选、全不选的实现

    如果需要一开始就加载数据加载方式: $(function(){ initCombobox(id);//id你上面的控件id,例如我的控件idfhry,那么我这里调用就是initCombobox...propAttr('checked', true); } } //设置选中值所对应的复选框选中状态..._propAttr('checked', false); } }); } 我们选中和取消选中的时候都通过...作为我人员信息表中查询人员信息的查询条件,这就涉及到我们需要将下拉框获取的值传递到后台,然后拆分出每个值,然后写入数据库查询语句,进行查询 1、值传递到后台很简单,我在这里不在多做说明,因为我们前台已经通过...$("#xsry").val()获取到了选中的值的,比如获取的值:“1,2,3” 2、可是前台传递过来的值,我们在后台是不能直接用的,因为它是有一个字符串, 后台如何获取的值进行拆分

    5.5K20

    web中的树形结构【小结】

    2、 获得与引用Ext js 要使用 ExtJS,那么首先要得到 ExtJS库文件,该框架是一个开源的,可以直接从官方 网站下载,网址http://extjs.com/download。...说明: 1、adapter:负责里面提供第三方底层库(包括 Ext 自带的底层库)映射 Ext所支持的底层库。 2、build:压缩后的 ext全部源码(里面分类存放)。...应用 extjs需要在页面中引入 extjs的样式及 extjs库文件,样式文件resources/css/ext-all.css,extjs的 js库文件主要包含两个,adapter/ext/ext-base.js...因此,要使用 ExtJS框架的页面中一般包括下面几句: <linkhref=".....<em>在</em> <em>ExtJS</em>中<em>使用</em>树控件其实非常简单,我们先来看下面的代码:      Ext.onReady(function () { var root

    3.5K20

    DateTimeExtJs中无法正确序列化的问题

    这几天在学习ExtJs + Wcf的过程中,发现一个问题,如果Class中有成员的类型DateTime,即使我们正常标识了[DataMember],序列化成JSON时,会生成一种特有的格式: .....这种格式ExtJs并不识别,导致最终的组件,比如Grid上无法正常显示,解决办法有二个: 1.Class的成员,手动改成String类型,不过个人不推荐这种方式,毕竟数据类型都改了,相应的服务端很多地方都可能会做相关修改...2.用JS在前台调用时,用代码处理返回的JSON字符串格式,使之符合ExtJs的规范(这个方法是从博客园"小庄"那里学来的,呵) Ext.onReady(function() { //这个函数演示了怎样把服务器端的...设置Grid的Columns时,类似如下处理: var grid = new Ext.grid.GridPanel({             store: store,

    2.7K100
    领券