`
猪↘專屬|华
  • 浏览: 164061 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

extjs的conbobox

阅读更多

Ext.onReady(function(){
//定义一个二维数组,用来存放下拉列表的值
 //实际的项目中这里是用AJAX方法得到的,或者是一个文件中定义好的
 var cities = [
               [1,"湘潭"],
               [2,"株洲"],
               [3,"长沙"],
               [4,"岳阳"]
              ];
 //DateProxy:获得数据,数据可以是数组,服务器...
 //有三个子类:
  //1:MemoryProxy:获取来自内存中的数据,可以使数组,json和xml
  //2:HttpProxy:使用HTTP协议通过AJAX从远程服务器获得数据的代理,需要指定url
  //3:ScriptTagProxy:跟HTTPProxy差不多,但是支持跨域取得数据
 var proxy = new Ext.data.MemoryProxy(cities);
 
 
 //var city = Ext.data.Record.create([
 //      {name:"cid",type:"int",mapping:0},
 //      {name:"cname",type:"String",mapping:1}
 //]);
 //var reader = new Ext.data.ArrayReader({},city);
 
 //reader也分为三种子类,取决于代理用的是什么
 //1:ArrayReader:数组
 //2: JsonReader:json
 //3: XmlReader:xml
 //reader的第一个参数为元数据,第二个参数为Record记录
 var reader = new Ext.data.ArrayReader({},[
     {name:"cid",type:"int",mapping:0},//列的逻辑名称,列的类型,列与数据源的索引映射
     {name:"cname",type:"String",mapping:1}
 ]);
 
 
 //Stroe整合Proxy与Reader
 var store = new Ext.data.Store({
  proxy:proxy,
  reader:reader,
  autoLoad:true//即时加载数据.如果没有这句话的话,那么则需要显示调用load方法
 });
 //store.load();
 
 //创建ComboBox对象
 var combobox = new Ext.form.ComboBox({
  renderTo:Ext.getBody(),
  triggerAction:"all",
  store:store,
  displayField:"cname",
  valueField:"cid",
  mode:"local",
  emptyText:"请选择湖南城市"
 });
 
 //定义一个按钮,获得下拉列表的值
 var btn = new Ext.Button({
  renderTo:Ext.getBody(),
  text:'获得下拉列表的值',
  //type:'submit',
  //disabled:false,
  //pressed:false,
  handler:function(){
   Ext.MessageBox.alert("测试按钮","实际值"+combobox.getValue()+"显示的值为"+combobox.getRawValue());
  }
 });
 
 //使用json的下拉列表框
 var jsons = [
              {cid:1,cname:"长沙"},
              {cid:2,cname:"株洲"},
              {cid:3,cname:"湘潭"},
              {cid:4,cname:"衡阳"}
              ];
 
 //创建代理
 var proxy1 = new Ext.data.MemoryProxy(jsons);
 
 var city = Ext.data.Record.create([
       {name:"cid",type:"int",mapping:"cid"},
       {name:"cname",type:"String",mapping:"cname"}
 ]);
 
 //创建reader
 var reader1 = new Ext.data.JsonReader({},city);
 
 //创建Store
 var store1 = new Ext.data.Store({
  proxy:proxy1,
  reader:reader1,
  autoLoad:true
 });
 
 var combobox1 = new Ext.form.ComboBox({
  renderTo:Ext.getBody(),
  triggerAction:"all",
  store:store1,
  displayField:"cname",
  valueField:"cid",
  mode:"local",
  emptyText:"请选择湖南城市"
 });
 
 //定义一个按钮,获得下拉列表的值
 var btn1 = new Ext.Button({
  renderTo:Ext.getBody(),
  text:'获得下拉列表的值',
  //type:'submit',
  //disabled:false,
  //pressed:false,
  handler:function(){
   Ext.MessageBox.alert("测试按钮","实际值"+combobox1.getValue()+"显示的值为"+combobox1.getRawValue());
  }
 });
 
 
});

0
0
分享到:
评论

相关推荐

    Extjs 4.x 得到form CheckBox 复选框的值

    CheckBox(复选框)主要用来接收用户选择的选项 如图所示(请忽略UI的不好看): 该弹出窗口的主要代码如下: 代码如下: var win = new Ext.Window({ modal : true, title : ‘确定要拒绝该表吗?...

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具,使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中,我们主要关注的是...

    轻松搞定Extjs 带目录

    本书作为Extjs的中文教程,旨在帮助读者快速上手Extjs,其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 - **类的定义**: Extjs中的类继承于JavaScript原生类,通过Ext.extend来定义。这是...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    ExtJS是一个广泛使用的JavaScript库,专门用于构建富客户端应用程序。版本3.3是该库的一个稳定版本,提供了许多功能和组件,使得Web开发者能够创建功能丰富的、交互性强的用户界面。这个“ExtJS3.3中文API.CHM”文档...

    包含各种类型的extjs小图标,Extjs4小图标

    ExtJS 是一个流行的JavaScript框架,主要用于构建富客户端的Web应用程序。它提供了丰富的组件库、数据管理功能以及强大的用户界面(UI)元素。在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列...

    ExtJS 7.6 SDK trial

    ExtJS 是一个流行的JavaScript框架,用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和强大的API,使开发者能够创建功能强大的、响应式的桌面和移动应用。7.6版本是ExtJS的一个重要更新,...

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...

    ExtJS经典皮肤集合

    ExtJS是一款功能强大的JavaScript前端框架,它为开发者提供了构建富客户端Web应用的工具。这款框架以其丰富的组件库、可定制的界面和强大的数据绑定机制而闻名。标题中的"ExtJS经典皮肤集合"指的是该框架中包含的一...

    Extjs 2.2 Extjs 3.21 js

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端Web应用程序。这个压缩包包含了ExtJS的两个重要版本:2.2和3.2.1。这两个版本在Web开发领域都有着广泛的运用,它们各自拥有不同的特性和改进,对于理解...

    EXTJS讲解个人项目经历

    EXTJS 是一个强大的JavaScript前端框架,它主要用于构建富客户端应用,提供丰富的用户界面组件和灵活的可定制性。EXTJS 的核心在于其组件化的架构,允许开发者构建复杂的UI布局和功能丰富的应用程序。以下是对EXTJS...

    extjs 3.4 开发前准备

    【EXTJS 3.4 开发前准备】 EXTJS 是一款强大的JavaScript库,主要用于构建桌面级的Web应用程序,提供丰富的用户界面组件和交互效果。3.4版本是EXTJS的一个重要里程碑,它提供了稳定的基础和丰富的组件库。本文将...

    ExtJS 界面设计器

    ExtJS是一款强大的JavaScript库,主要用于构建富客户端的Web应用程序。其界面设计器,正如标题所示,是一种可视化的开发工具,能够极大地提升开发效率和用户体验。这个工具允许开发者通过拖放组件和直观地调整属性来...

    extJS4升级至extJS6.6所遇问题及解决方案

    项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议

    ExtJS4ExtJS5MD5 加密

    适用于ExtJS4、ExtJS5 MD5加密算法!

    extjs6.2 SDK下载

    EXTJS 6.2 SDK是EXT JavaScript库的一个版本,它是一个强大的前端开发框架,用于构建企业级的Web应用程序。EXTJS提供了丰富的组件库,包括数据管理、图表、表格、窗体和其他用户界面元素,使开发者能够创建功能丰富...

    extjs中文文档大全

    ExtJS是一种基于JavaScript的开源富客户端框架,用于构建桌面级的Web应用程序。它提供了一整套组件化的用户界面元素和强大的数据绑定机制,使得开发者能够创建功能丰富的、交互性强的Web应用。本文档集合包括了...

    extjs电子书,extjs电子书,extjs电子书

    extjs电子书,extjs电子书,extjs电子书,extjs电子书

    让我们开始EXTJS之旅EXTJS_WEB开发指南

    开始ExtJS之旅的第一步是要获得开发包,可以从官方网站www.ExtJS.com下载,以保证获 得最新版本。其下载地址是http://www.ExtJS.com/download,下载成功后的开发包是ExtJS- 2.0.2.zip,有6.08MB大。不过不用担心,这...

    EXTJS4自学手册

    一 Extjs 基础 EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) ...

Global site tag (gtag.js) - Google Analytics