Ext.form.ComboBox属性详解及使用方法介绍和级联使用

Ext.form.ComboBox 属性详解(见注释)及使用方法
定义一个ComboBox:

  1. Wayfoon.YearComb = new Ext.form.ComboBox({
  2. id:‘cbid’,
  3. name:‘year’,//name只是改下拉的名称
  4. hiddenName:‘hyear’,//提交到后台的input的name
  5. width : 80,
  6. store : Wayfoon.Year,//填充数据
  7. emptyText : ‘请选择’,
  8. mode : ‘local’,//数据模式,local代表本地数据
  9. readOnly : true,//是否只读
  10. value : (new Date()).YEAR,//默认值,要设置为提交给后台的值,不要设置为显示文本
  11. triggerAction : ‘all’,// 显示所有下列数据,一定要设置属性triggerAction为all
  12. allowBlank : false,//不允许为空
  13. valueField : ‘value’,//值
  14. displayField : ‘text’,//显示文本
  15. editable: false,//是否允许输入
  16. forceSelection: true,//必须选择一个选项
  17. blankText:‘请选择’//该项如果没有选择,则提示错误信息
  18. });

    注意:


    id:’cbid’,//作用不大,可以自动生成
    name:’year’,//name只是改下拉的名称,几乎没有作用
    hiddenName:’hyear’,//提交到后台的input的name,重要

    使用firebug查看html代码, 以上代码生成html是

    1. <div id=“ext-gen279” class=“x-form-field-wrap x-trigger-wrap-focus” style=“width: 80px;”>
    2. <input id=“hyear” type=“hidden” name=“hyear” value=“01”/>
    3. <input id=“cbid” class=“x-form-text x-form-field x-form-focus” type=“text” autocomplete=“off” size=“24” readonly=“” style=“width: 55px;”/>
    4. <img id=“ext-gen280” class=“x-form-trigger x-form-arrow-trigger” src=“http://www.yibenzhang.com/JSFW/ext/resources/images/default/s.gif”/>
    5. </div>可以看出一个下列选择 主要由三部分组成 两个input 和一个img。例外  name属性没有起到作用。combobox中要用到的数据:可以改成数据库读取数据
      1. Wayfoon.Year = new Ext.data.SimpleStore({
      2. fields : [‘value’, ‘text’],
      3. data : [[‘2008’, ‘2008’], [‘2009’, ‘2009’]]
      4. });

      如果要下列框级联,在combox 里面加上

      1. listeners:{
      2. select:{
      3. fn:function(combo,record,index) {
      4. var store;
      5. if(record.get(‘value’)==‘广东’)
      6. {
      7. store = Wayfoon.MMS.TypeStore5;
      8. }
      9. else if(record.get(‘value’)==‘广西’)
      10. {
      11. store = Wayfoon.MMS.TypeStore51;
      12. }
      13. Ext.getCmp(‘city’+id).clearValue();
      14. Ext.getCmp(‘city’+id).store = store;
      15. if(Ext.getCmp(‘city’+id).view){
      16. Ext.getCmp(‘city’+id).view.setStore(store);
      17. }
      18. Ext.getCmp(‘city’+id).enable();
      19. }
      20. }
      21. }

      比如省份和城市级联

      1. //省份数据
      2. Wayfoon.MMS.TypeStore4 = new Ext.data.SimpleStore({
      3. fields : [‘value’, ‘text’],
      4. data : [[, ‘全部省份’],
      5. [‘广东’, ‘广东’], [‘广西’, ‘广西’], [‘黑龙江’, ‘黑龙江’],[‘吉林’, ‘吉林’],[‘陕西’, ‘陕西’],
      6. [‘浙江’, ‘浙江’],[‘江苏’, ‘江苏’],[‘四川’, ‘四川’],[‘湖北’, ‘湖北’],[‘新疆’, ‘新疆’],
      7. [‘云南’, ‘云南’],[‘安微’, ‘安微’],[‘福建’, ‘福建’],[‘江苏’, ‘江苏’],[‘山东’, ‘山东’],
      8. [‘北京’,‘北京’]]
      9. });
      10. //城市数据1
      11. Wayfoon.MMS.TypeStore5 = new Ext.data.SimpleStore({
      12. fields : [‘value’, ‘text’],
      13. data : [[, ‘全部城市’], [‘深圳市’, ‘深圳市’], [‘广州市’, ‘广州市’]]
      14. });
      15. //城市数据2
      16. Wayfoon.MMS.TypeStore51 = new Ext.data.SimpleStore({
      17. fields : [‘value’, ‘text’],
      18. data : [[, ‘全部城市’], [‘桂林’, ‘桂林’], [‘山水’, ‘山水’]]
      19. });
      20. //省份combo
      21. Wayfoon.Province=function(id){
      22. var comboProvince=({
      23. xtype : ‘combo’,
      24. //name : ‘combo-province’,
      25. readOnly : true,
      26. triggerAction : ‘all’,
      27. allowBlank : true,
      28. width : 60,
      29. store : Wayfoon.MMS.TypeStore4,
      30. value : ,
      31. //pageSize:10,
      32. //typeAhead: true,
      33. //resizable : true,
      34. hiddenName : ‘hComboProv’,
      35. displayField : ‘text’,
      36. valueField : ‘value’,
      37. mode : ‘local’,
      38. emptyText : ‘选择省份’,
      39. listeners:{
      40. select:{
      41. fn:function(combo,record,index) {
      42. var store;
      43. if(record.get(‘value’)==‘广东’)
      44. {
      45. store = Wayfoon.MMS.TypeStore5;
      46. }
      47. else if(record.get(‘value’)==‘广西’)
      48. {
      49. store = Wayfoon.MMS.TypeStore51;
      50. }
      51. Ext.getCmp(‘city’+id).clearValue();
      52. Ext.getCmp(‘city’+id).store = store;
      53. if(Ext.getCmp(‘city’+id).view){
      54. Ext.getCmp(‘city’+id).view.setStore(store);
      55. }
      56. Ext.getCmp(‘city’+id).enable();
      57. }
      58. }
      59. }
      60. });
      61. return comboProvince;
      62. }
      63. //城市combo
      64. Wayfoon.City=function(id){
      65. var comboCity=(
      66. {
      67. id:‘city’+id,
      68. xtype : ‘combo’,
      69. readOnly : true,
      70. triggerAction : ‘all’,
      71. allowBlank : true,
      72. width : 60,
      73. store : new Ext.data.Store(),//Wayfoon.MMS.TypeStore5,
      74. value : ,
      75. hiddenName : ‘hComboCity’,
      76. displayField : ‘text’,
      77. valueField : ‘value’,
      78. mode : ‘local’,
      79. emptyText : ‘选择城市’
      80. });
      81. return comboCity;
      82. }
      83. 转自: Ext.form.ComboBox 属性详解及使用方法介绍和级联使用

发表评论

返回顶部