Combobox属性及使用方法详解--打印文章

打印本文

关闭窗口

Combobox属性及使用方法详解

作者：佚名文章来源：本站原创点击数3196 更新时间：2012/2/23 14:02:11 文章录入：mintao 责任编辑：mintao

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 //宽度
});
});
1. Ext.onReady(function(){
2. //使用表单提示
3. Ext.QuickTips.init();
4. Ext.form.Field.prototype.msgTarget = 'side';//提示显示方式
6. /*
7. //定义读取数据映射。
8. var modelRecordDef = Ext.data.Record.create([
9. {name: 'name'},{name: 'value'}
10. ]);
11. //定义数据源和读取方式
12. //如果不想再页面初始化是加载数据，则可以有以下两种办法：
13. //第一、把comboboxStore.load()去掉。
14. //第二、不要proxy，在需要加载数据的时候再写上:comboboxStore.proxy = new Ext.data.HttpProxy({url: url})
15. //第二种方法可以灵活的取得下拉框的数据。因为可以变动url.
16. var comboboxStore=new Ext.data.Store({
17. //下面这句也可以直接写成：url: "../../manageActions/actionAction!getJsons.html",
18. proxy: new Ext.data.HttpProxy({ url: "../../manageActions/actionAction!getJsons.html"}),
19. //传给后台的参数：baseParams的参数是一直存在的，而params的参数，只有load时才会传递过去，当调用reload时参数就不存在了
20. baseParams:{arg:'Model'},
21. //设定读取的格式
22. reader: new Ext.data.JsonReader({
23. id:"modelCboxId",root:'resultList'
24. }, modelRecordDef),
25. //不排序，此属性为true则设置的所有排序都不起作用。此属性只对从服务器取数据有效。
26. remoteSort: true
27. });
28. //排序用的列名和排序方式，这个必须在load之前或者下次load时发生。
29. comboboxStore.setDefaultSort('name', 'ASC');
30. //排序用的列名和排序方式，这个无所谓load位置。
31. comboboxStore.sort('name', 'ASC');
32. //加载数据。
33. comboboxStore.load();
34. var Cb = new Ext.form.ComboBox({
35. fieldLabel: '下拉框', //显示文本字段
36. valueField:'value', //下拉框的值域
37. hiddenName:'cb', //真正提交时此combo的name
38. displayField:'name', //显示的域
39. id:'CbId', //id
40. emptyText:'-- 请选择 --', //空文本是显示的值
41. renderTo: 'combobox', //将此下拉框渲染到id为combobox的div中
42. width:200, //宽度
43. anchor:'95.2%', //自适应宽度，随着容器变化而变化。
44. <SPAN id=TheWorldHiLightStyleID style="BACKGROUND: #ffff00; COLOR: #000000">selectOnFocus</SPAN>:true,
45. triggerAction:'all', //请设置为"all",否则默认为"query"的情况下，你选择某个值后，再次下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项
46. store:comboboxStore, //下拉框数据来源
47. typeAhead:true, //延时查询，与下面的参数配合
48. typeAheadDelay:250, //默认250
49. editable:true, //是否可编辑
50. forceSelection:true, //是否只能选择下拉框的值，即不会取输入的未在下拉框值域内的值
51. mode: 'local' //因为data已经取数据到本地了，所以'local',默认为"remote"
52. });
53. */
54. //读取本地数据
55. var localStore = new Ext.data.SimpleStore({
56. fields: ["num"],
57. data: [["2"],["1"],["5"],["3"],["9"],["6"]],
58. //排序，只能对本地取数据有效。
59. sortInfo:{field:"num"}
60. });
61. //排序用的列名和排序方式，对于本地数据和服务器取数据一样适用。
62. localStore.sort('num', 'ASC');
63. var localCb = new Ext.form.ComboBox({
64. store: localStore,
65. renderTo: 'combobox',
66. valueField :"num",
67. displayField: "num",
68. hiddenName:'number',
69. mode: 'local',
70. forceSelection: true,
71. blankText:'-- 请选择 --',
72. emptyText:'-- 请选择 --',
73. editable: true,
74. <SPAN id=TheWorldHiLightStyleID style="BACKGROUND: #ffff00; COLOR: #000000">selectOnFocus</SPAN>:true,
75. triggerAction: 'all',
76. id:'localCombo',
77. anchor:'95.2%',
78. typeAhead: true,
79. fieldLabel: '数字'
80. });
82. //把已有的下拉框改变为Ext样式
83. var ExtSelect=new Ext.form.ComboBox({
84. transform:"select",//html中的select控件id
85. width:200 //宽度
86. });
87. });
89. <div id="combobox"></div>
90. <select id="select">
91. <option value="1">男</option>
92. <option value="2">女</option>
93. <option value="3">人妖</option>
94. </select>

打印本文

关闭窗口