EXTjs学习笔记（2）
动起来的Combobox
?
1. 创建一个html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><title>Insert title here</title><link rel="stylesheet" type="text/css" href="css/resources/css/ext-all.css" /><script type="text/javascript" src="js/adapter/ext/ext-base.js"></script><script type="text/javascript" src="js/ext-all.js"></script><script type="text/javascript" src="js/combobox.js"></script></head><body>ComboBox Test</body></html>
?
?
2. 创建生成combobox的js
Ext.onReady(function() { /**具体的数据存储*/ var cities=[ [1,"西安市"], [2,"咸阳市"] ]; var proxy1=new Ext.data.MemoryProxy(cities); /**对内存记录的数据定义*/ var City=Ext.data.Record.create([ {name:"cid",type:"int",mapping:0}, {name:"cname",type:"string",mapping:1} ]); var reader1=new Ext.data.ArrayReader({},City); /**数据的存储地，是数据和组件的纽带*/ var store1=new Ext.data.Store({proxy:proxy1,reader:reader1,autoLoad:true});var combobox=new Ext.form.ComboBox({renderTo:Ext.getBody(),triggerAction:"all",store:store1,displayField:"cname",valueFeild:"cid",mode:"local",emptyText:"请选择西安市"}); var btn3 = new Ext.Button({renderTo : Ext.getBody(),text : "获取Combox值",width : "200",handler: getComValue});function getComValue(){ Ext.MessageBox.alert("ComboxValue","实际值是：" +combobox.getValue()+"显示值是："+combobox.getRawValue()) }; });?
小结：
上面的例子comobox的数据来源于自定义的数组。 组件的数据获取分以下步骤：
1.?proxy 目的就是分离数据的来源与展现。 无论数据时从文件或者远程接口或者自定义都有代理全权负责处理?
2. reader 目的是定义数据的结构，让数据规范化 是将零散数据规范化的工具，此处定义了数据的格式。
3. store 是对代理和reader的汇聚是与组件直接通信的 数据存储。
?
?