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());
}
});
});
分享到:
相关推荐
CheckBox(复选框)主要用来接收用户选择的选项 如图所示(请忽略UI的不好看): 该弹出窗口的主要代码如下: 代码如下: var win = new Ext.Window({ modal : true, title : ‘确定要拒绝该表吗?...
ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...
ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具,使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中,我们主要关注的是...
本书作为Extjs的中文教程,旨在帮助读者快速上手Extjs,其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 - **类的定义**: Extjs中的类继承于JavaScript原生类,通过Ext.extend来定义。这是...
ExtJS是一个广泛使用的JavaScript库,专门用于构建富客户端应用程序。版本3.3是该库的一个稳定版本,提供了许多功能和组件,使得Web开发者能够创建功能丰富的、交互性强的用户界面。这个“ExtJS3.3中文API.CHM”文档...
ExtJS 是一个流行的JavaScript框架,主要用于构建富客户端的Web应用程序。它提供了丰富的组件库、数据管理功能以及强大的用户界面(UI)元素。在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列...
ExtJS 是一个流行的JavaScript框架,用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和强大的API,使开发者能够创建功能强大的、响应式的桌面和移动应用。7.6版本是ExtJS的一个重要更新,...
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...
ExtJS是一款功能强大的JavaScript前端框架,它为开发者提供了构建富客户端Web应用的工具。这款框架以其丰富的组件库、可定制的界面和强大的数据绑定机制而闻名。标题中的"ExtJS经典皮肤集合"指的是该框架中包含的一...
ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端Web应用程序。这个压缩包包含了ExtJS的两个重要版本:2.2和3.2.1。这两个版本在Web开发领域都有着广泛的运用,它们各自拥有不同的特性和改进,对于理解...
EXTJS 是一个强大的JavaScript前端框架,它主要用于构建富客户端应用,提供丰富的用户界面组件和灵活的可定制性。EXTJS 的核心在于其组件化的架构,允许开发者构建复杂的UI布局和功能丰富的应用程序。以下是对EXTJS...
【EXTJS 3.4 开发前准备】 EXTJS 是一款强大的JavaScript库,主要用于构建桌面级的Web应用程序,提供丰富的用户界面组件和交互效果。3.4版本是EXTJS的一个重要里程碑,它提供了稳定的基础和丰富的组件库。本文将...
ExtJS是一款强大的JavaScript库,主要用于构建富客户端的Web应用程序。其界面设计器,正如标题所示,是一种可视化的开发工具,能够极大地提升开发效率和用户体验。这个工具允许开发者通过拖放组件和直观地调整属性来...
项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议
适用于ExtJS4、ExtJS5 MD5加密算法!
EXTJS 6.2 SDK是EXT JavaScript库的一个版本,它是一个强大的前端开发框架,用于构建企业级的Web应用程序。EXTJS提供了丰富的组件库,包括数据管理、图表、表格、窗体和其他用户界面元素,使开发者能够创建功能丰富...
ExtJS是一种基于JavaScript的开源富客户端框架,用于构建桌面级的Web应用程序。它提供了一整套组件化的用户界面元素和强大的数据绑定机制,使得开发者能够创建功能丰富的、交互性强的Web应用。本文档集合包括了...
extjs电子书,extjs电子书,extjs电子书,extjs电子书
开始ExtJS之旅的第一步是要获得开发包,可以从官方网站www.ExtJS.com下载,以保证获 得最新版本。其下载地址是http://www.ExtJS.com/download,下载成功后的开发包是ExtJS- 2.0.2.zip,有6.08MB大。不过不用担心,这...
一 Extjs 基础 EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) ...