Ext组件属性详解之一

leader-12

Ext.onReady(function(){//使用表单提示Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'side';//提示显示方式/*//定义读取数据映射。var modelRecordDef = Ext.data.Record.create([{name: 'name'},{name: 'value'}]); //定义数据源和读取方式//如果不想再页面初始化是加载数据，则可以有以下两种办法：//第一、把comboboxStore.load()去掉。//第二、不要proxy，在需要加载数据的时候再写上:comboboxStore.proxy = new Ext.data.HttpProxy({url: url})//第二种方法可以灵活的取得下拉框的数据。因为可以变动url.var comboboxStore=new Ext.data.Store({//下面这句也可以直接写成：url: "../../manageActions/actionAction!getJsons.html",proxy: new Ext.data.HttpProxy({ url: "../../manageActions/actionAction!getJsons.html"}),//传给后台的参数：baseParams的参数是一直存在的，而params的参数，只有load时才会传递过去，当调用reload时参数就不存在了baseParams:{arg:'Model'},//设定读取的格式reader: new Ext.data.JsonReader({ id:"modelCboxId",root:'resultList'}, modelRecordDef),//不排序，此属性为true则设置的所有排序都不起作用。此属性只对从服务器取数据有效。remoteSort: true});//排序用的列名和排序方式，这个必须在load之前或者下次load时发生。comboboxStore.setDefaultSort('name', 'ASC');//排序用的列名和排序方式，这个无所谓load位置。comboboxStore.sort('name', 'ASC');//加载数据。comboboxStore.load();var Cb = new Ext.form.ComboBox({fieldLabel: '下拉框',     //显示文本字段valueField:'value',      //下拉框的值域hiddenName:'cb',         //真正提交时此combo的namedisplayField:'name',     //显示的域id:'CbId',               //idemptyText:'-- 请选择 --', //空文本是显示的值renderTo: 'combobox',    //将此下拉框渲染到id为combobox的div中width:200,               //宽度anchor:'95.2%',          //自适应宽度，随着容器变化而变化。selectOnFocus:true,     triggerAction:'all',    //请设置为"all",否则默认为"query"的情况下，你选择某个值后，再次下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项store:comboboxStore,    //下拉框数据来源typeAhead:true,         //延时查询，与下面的参数配合typeAheadDelay:250,     //默认250editable:true,          //是否可编辑forceSelection:true,    //是否只能选择下拉框的值，即不会取输入的未在下拉框值域内的值mode: 'local'           //因为data已经取数据到本地了，所以'local',默认为"remote"});*///读取本地数据var localStore = new Ext.data.SimpleStore({ fields: ["num"],data: [["2"],["1"],["5"],["3"],["9"],["6"]],//排序，只能对本地取数据有效。sortInfo:{field:"num"}});//排序用的列名和排序方式，对于本地数据和服务器取数据一样适用。localStore.sort('num', 'ASC');var localCb = new Ext.form.ComboBox({store: localStore,renderTo: 'combobox',valueField :"num",displayField: "num",hiddenName:'number',mode: 'local',forceSelection: true,blankText:'-- 请选择 --',emptyText:'-- 请选择 --',editable: true,selectOnFocus:true,triggerAction: 'all',id:'localCombo',anchor:'95.2%',typeAhead: true,fieldLabel: '数字'});//把已有的下拉框改变为Ext样式var ExtSelect=new Ext.form.ComboBox({             transform:"select",//html中的select控件id             width:200          //宽度         });});
<div id="combobox"></div><select id="select">        <option value="1">男</option>        <option value="2">女</option>        <option value="3">人妖</option>    </select>