Combobox属性详解

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的name
        displayField:'name',     //显示的域
        id:'CbId',               //id
        emptyText:'-- 请选择 --', //空文本是显示的值
        renderTo: 'combobox',    //将此下拉框渲染到id为combobox的div中
        width:200,               //宽度
        anchor:'95.2%',          //自适应宽度，随着容器变化而变化。
        selectOnFocus:true,
        triggerAction:'all',    //请设置为"all",否则默认为"query"的情况下，你选择某个值后，再次下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项
        store:comboboxStore,    //下拉框数据来源
        typeAhead:true,         //延时查询，与下面的参数配合
        typeAheadDelay:250,     //默认250
        editable: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          //宽度
        });
});

	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的name
			displayField:'name',     //显示的域
			id:'CbId',               //id
			emptyText:'-- 请选择 --', //空文本是显示的值
			renderTo: 'combobox',    //将此下拉框渲染到id为combobox的div中
			width:200,               //宽度
			anchor:'95.2%',          //自适应宽度，随着容器变化而变化。
			selectOnFocus:true,     
			triggerAction:'all',    //请设置为"all",否则默认为"query"的情况下，你选择某个值后，再次下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项
			store:comboboxStore,    //下拉框数据来源
			typeAhead:true,         //延时查询，与下面的参数配合
			typeAheadDelay:250,     //默认250
			editable: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>