logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

EXT表单组件常见属性介绍（三）

 handanyou 2011-01-18

本范例展示如何使用表单的各种组件。

下拉框组件展示了5种使用范例：普通下拉框、绑定HTML组件的下拉框、树形下拉框、分页下拉框、多选下拉框等。



  

 

Js代码 复制代码
  1. Ext.onReady(function(){   
  2.     Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";    
  3.     Ext.QuickTips.init();   
  4.     Ext.form.Field.prototype.msgTarget = "qtip";   
  5.   
  6.     //component   
  7.     var hiddenField = new Ext.form.Hidden({   
  8.         name: "hiddenField",   
  9.         value: "1"  
  10.     });   
  11.   
  12.     var usernameField = new Ext.form.TextField({   
  13.         name: "username",   
  14.         fieldLabel: "用户名",   
  15.         allowBlank: true,   
  16.         blankText: "请输入用户名！"  
  17.     });   
  18.   
  19.     var pwdField = new Ext.form.TextField({   
  20.         name: "password",   
  21.         fieldLabel: "密码",   
  22.         allowBlank: true,   
  23.         blankText: "请输入密码！",   
  24.         inputType: "password"  
  25.     });   
  26.   
  27.     var ageField = new Ext.form.NumberField({   
  28.         name: "age",   
  29.         allowBlank: true,   
  30.         blankText: "请输入年龄！",   
  31.         fieldLabel: "年龄",   
  32.         allowDecimals: false,   
  33.         allowNegative: false,   
  34.         minValue: 18,   
  35.         minText: "年龄不能少于18",   
  36.         maxValue: 100,   
  37.         maxText: "年龄不能大于100"  
  38.     });   
  39.   
  40.     var love1 = new Ext.form.Checkbox({   
  41.         name: "love1",   
  42.         boxLabel: "打球",   
  43.         inputValue: "1"  
  44.     });   
  45.   
  46.     var love2 = new Ext.form.Checkbox({   
  47.         name: "love2",   
  48.         boxLabel: "游泳",   
  49.         inputValue: "2"  
  50.     });   
  51.   
  52.     var love3 = new Ext.form.Checkbox({   
  53.         name: "love3",   
  54.         boxLabel: "登山",   
  55.         inputValue: "3"  
  56.     });   
  57.   
  58.     var loveGroup = new Ext.form.CheckboxGroup({   
  59.         name: "love",   
  60.         columns: [80, 80, 1.0],   
  61.         fieldLabel: "爱好",   
  62.         items: [love1, love2, love3]   
  63.     });   
  64.   
  65.     var sex1 = new Ext.form.Radio({   
  66.         name: "sex1",   
  67.         boxLabel: "男",   
  68.         inputValue: "1"  
  69.     });   
  70.   
  71.     var sex2 = new Ext.form.Radio({   
  72.         name: "sex1",   
  73.         boxLabel: "女",   
  74.         inputValue: "0"  
  75.     });   
  76.   
  77.     var sexGroup = new Ext.form.RadioGroup({   
  78.         name: "sex",   
  79.         columns: [80, 1.0],   
  80.         fieldLabel: "性别",   
  81.         items: [sex1, sex2]   
  82.     });   
  83.   
  84.     //本地数据源的组合框   
  85.     var store = new Ext.data.SimpleStore({   
  86.         fields: ["code", "name"],   
  87.         data: [   
  88.             ["1", "北京"],   
  89.             ["5", "上海"],   
  90.             ["4",  "广东"]   
  91.         ]   
  92.     });   
  93.     var cmbProvince = new Ext.form.ComboBox({   
  94.         id: "cmbProvince",   
  95.         hiddenName: "province.id",   
  96.         fieldLabel: "省份",   
  97.         resizable: true,   
  98.         editable: false,   
  99.         width: 100,   
  100.         emptyText: "请选择...",   
  101.         store: store,   
  102.         valueField: "code",   
  103.         displayField: "name",   
  104.         triggerAction: "all",   
  105.         mode: "local"  
  106.     });   
  107.   
  108.     //远程数据源的组合框   
  109.     var store2 = new Ext.data.SimpleStore({   
  110.         fields: ["name"],   
  111.         proxy: new Ext.data.HttpProxy({   
  112.             url: "../testForm!loadData.action"  
  113.         })   
  114.     });   
  115.   
  116.     var cmbManager = new Ext.form.ComboBox({   
  117.         hiddenName: "manager",   
  118.         fieldLabel: "经理",   
  119.         editable: false,   
  120.         triggerAction: "all",   
  121.         mode: "local",   
  122.         maxHeight: 200,   
  123.         store: new Ext.data.SimpleStore({fields:[],data:[[]]}),   
  124.         onSelect: Ext.emptyFn,   
  125.         tpl: "<tpl for='.'><div id='tree'></div></tpl>"  
  126.     });   
  127.   
  128.     var root = new Ext.tree.TreeNode({   
  129.         nodeId: 1,   
  130.         text: "根节点",   
  131.         expanded: true  
  132.     });   
  133.     root.appendChild(new Ext.tree.TreeNode({nodeId:2, text:"节点A", leaf:true}));   
  134.     root.appendChild(new Ext.tree.TreeNode({nodeId:3, text:"节点B", leaf:true}));   
  135.   
  136.     var tree = new Ext.tree.TreePanel({   
  137.         root: root,   
  138.         border: false,   
  139.         autoHeight: true,   
  140.         autoScroll: true  
  141.     });   
  142.   
  143.     tree.on("click", function(node){      
  144.         if(!node.isLeaf()) return; //只能选择叶节点   
  145.         //下拉框的隐藏值   
  146.         if(cmbManager.hiddenField){   
  147.             cmbManager.hiddenField.value = node.attributes.nodeId;   
  148.         }   
  149.         cmbManager.setRawValue(node.text); //下拉框的显示值   
  150.         cmbManager.collapse(); //折叠下拉框   
  151.     });   
  152.   
  153.     cmbManager.on("expand", function(){     
  154.         tree.render("tree");      
  155.     });    
  156.   
  157.     //分页远程数据源的组合框   
  158.     var store3 = new Ext.data.JsonStore({   
  159.         url: "../testForm!loadData3.action",   
  160.         totalProperty: "totalNum",   
  161.         root: "books",   
  162.         fields: ["id", "name"]   
  163.     });   
  164.     var cmbBook = new Ext.form.ComboBox({   
  165.         hiddenName: "books",   
  166.         fieldLabel: "书籍",   
  167.         store: store3,   
  168.         valueField: "name",   
  169.         displayField: "name",   
  170.         triggerAction: "all",   
  171.         mode: "remote",   
  172.         queryParam: "books",   
  173.         loadingText: "正在装载数据...",   
  174.         width: 180,   
  175.         minChars: 1,   
  176.         editable: false,   
  177.         listWidth: 250,   
  178.         pageSize: 3   
  179.     });   
  180.   
  181.     //HTML标准组件   
  182.     var cmbPass = new Ext.form.ComboBox({   
  183.         hiddenName: "status",   
  184.         fieldLabel: "是否有效",   
  185.         triggerAction: "all",   
  186.         editable: false,   
  187.         width: 100,   
  188.         transform: "isPass",   
  189.         lazyRender: true  
  190.     });   
  191.   
  192.     var cmbTimes = new Ext.form.TimeField({   
  193.         hiddenName: "time",   
  194.         fieldLabel: "时间",   
  195.         minValue: "09:00",   
  196.         minText: "所选时间应大于{0}",   
  197.         maxValue: "18:00",   
  198.         maxText: "所选时间应小于{0}",   
  199.         format: "H时i分",   
  200.         increment: 30,   
  201.         invalidText: "时间格式无效！",   
  202.         maxHeight: 200,   
  203.         width: 100,   
  204.         value: "09时00分",   
  205.         editable: false  
  206.     });   
  207.   
  208.     var cmbMonths = new Ext.ux.MultiSelectCombo({   
  209.         hiddenName: "months",   
  210.         fieldLabel: "月份",   
  211.         maxHeight: 200,   
  212.         editable: false,   
  213.         store: [["201010","201010"], ["201009","201009"], ["201008","201008"], ["201007","201007"], ["201006","201006"]],   
  214.         mode: "local",   
  215.         width: 180,   
  216.         maxItemsCount: 3,   
  217.         maxItemsCountText: "最多只能选择三个选项！"  
  218.     });   
  219.   
  220.     var cmbBirths =  new Ext.form.DateField({   
  221.         name: "births",   
  222.         fieldLabel: "出生日期",   
  223.         disabledDays: [0,6],   
  224.         disabledDaysText: "禁止选择周末！",   
  225.         width: 100,   
  226.         readOnly: true,   
  227.         format: "Y-m-d",   
  228.         invalidText: "不是有效的日期值！"  
  229.     });   
  230.   
  231.     var fieldSet1 = new Ext.form.FieldSet({   
  232.         title: "下拉框",   
  233.         checkboxName: "fieldSet1",   
  234.         checkboxToggle: true,   
  235.         autoHeight: true,   
  236.         layout: "table",   
  237.         layoutConfig: {   
  238.             columns: 3   
  239.         },   
  240.         defaults: {   
  241.             style:"margin-left:8px; margin-top:3px; margin-right:8px; margin-bottom:3px; valign:top",   
  242.             layout:"form",   
  243.             labelAlign: "right"  
  244.         },   
  245.         items: [   
  246.             {rowspan:1, colspan:1, items:[cmbProvince]},   
  247.             {rowspan:1, colspan:1, items:[cmbManager]},   
  248.             {rowspan:1, colspan:1, items:[cmbBook]},   
  249.             {rowspan:1, colspan:1, items:[cmbPass]},   
  250.             {rowspan:1, colspan:1, items:[cmbTimes]},   
  251.             {rowspan:1, colspan:1, items:[cmbMonths]},   
  252.             {rowspan:1, colspan:1, items:[cmbBirths]}]   
  253.     });   
  254.   
  255.     var remarksField = new Ext.form.TextArea({   
  256.         name: "remarks",   
  257.         fieldLabel: "备注",   
  258.         width: 400,   
  259.         height: 80   
  260.     });   
  261.   
  262.     var form = new Ext.form.FormPanel({   
  263.         id: "frmAddUser",   
  264.         title: "新增用户",   
  265.         autoWidth: true,   
  266.         autoHeight: true,   
  267.         frame: true,   
  268.         renderTo: Ext.getBody(),   
  269.         labelWidth: 70,   
  270.         tbar: toolbar,   
  271.         items: [hiddenField, usernameField, pwdField, ageField, loveGroup, sexGroup,    
  272.             fieldSet1, remarksField],   
  273.         url: "../testForm!ajaxSubmitForm.action"  
  274.     });   
  275. });  
Js代码 复制代码
  1. Ext.onReady(function(){   
  2.     Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";    
  3.     Ext.QuickTips.init();   
  4.     Ext.form.Field.prototype.msgTarget = "qtip";   
  5.   
  6.     //component   
  7.     var hiddenField = new Ext.form.Hidden({   
  8.         name: "hiddenField",   
  9.         value: "1"  
  10.     });   
  11.   
  12.     var usernameField = new Ext.form.TextField({   
  13.         name: "username",   
  14.         fieldLabel: "用户名",   
  15.         allowBlank: true,   
  16.         blankText: "请输入用户名！"  
  17.     });   
  18.   
  19.     var pwdField = new Ext.form.TextField({   
  20.         name: "password",   
  21.         fieldLabel: "密码",   
  22.         allowBlank: true,   
  23.         blankText: "请输入密码！",   
  24.         inputType: "password"  
  25.     });   
  26.   
  27.     var ageField = new Ext.form.NumberField({   
  28.         name: "age",   
  29.         allowBlank: true,   
  30.         blankText: "请输入年龄！",   
  31.         fieldLabel: "年龄",   
  32.         allowDecimals: false,   
  33.         allowNegative: false,   
  34.         minValue: 18,   
  35.         minText: "年龄不能少于18",   
  36.         maxValue: 100,   
  37.         maxText: "年龄不能大于100"  
  38.     });   
  39.   
  40.     var love1 = new Ext.form.Checkbox({   
  41.         name: "love1",   
  42.         boxLabel: "打球",   
  43.         inputValue: "1"  
  44.     });   
  45.   
  46.     var love2 = new Ext.form.Checkbox({   
  47.         name: "love2",   
  48.         boxLabel: "游泳",   
  49.         inputValue: "2"  
  50.     });   
  51.   
  52.     var love3 = new Ext.form.Checkbox({   
  53.         name: "love3",   
  54.         boxLabel: "登山",   
  55.         inputValue: "3"  
  56.     });   
  57.   
  58.     var loveGroup = new Ext.form.CheckboxGroup({   
  59.         name: "love",   
  60.         columns: [80, 80, 1.0],   
  61.         fieldLabel: "爱好",   
  62.         items: [love1, love2, love3]   
  63.     });   
  64.   
  65.     var sex1 = new Ext.form.Radio({   
  66.         name: "sex1",   
  67.         boxLabel: "男",   
  68.         inputValue: "1"  
  69.     });   
  70.   
  71.     var sex2 = new Ext.form.Radio({   
  72.         name: "sex1",   
  73.         boxLabel: "女",   
  74.         inputValue: "0"  
  75.     });   
  76.   
  77.     var sexGroup = new Ext.form.RadioGroup({   
  78.         name: "sex",   
  79.         columns: [80, 1.0],   
  80.         fieldLabel: "性别",   
  81.         items: [sex1, sex2]   
  82.     });   
  83.   
  84.     //本地数据源的组合框   
  85.     var store = new Ext.data.SimpleStore({   
  86.         fields: ["code", "name"],   
  87.         data: [   
  88.             ["1", "北京"],   
  89.             ["5", "上海"],   
  90.             ["4",  "广东"]   
  91.         ]   
  92.     });   
  93.     var cmbProvince = new Ext.form.ComboBox({   
  94.         id: "cmbProvince",   
  95.         hiddenName: "province.id",   
  96.         fieldLabel: "省份",   
  97.         resizable: true,   
  98.         editable: false,   
  99.         width: 100,   
  100.         emptyText: "请选择...",   
  101.         store: store,   
  102.         valueField: "code",   
  103.         displayField: "name",   
  104.         triggerAction: "all",   
  105.         mode: "local"  
  106.     });   
  107.   
  108.     //远程数据源的组合框   
  109.     var store2 = new Ext.data.SimpleStore({   
  110.         fields: ["name"],   
  111.         proxy: new Ext.data.HttpProxy({   
  112.             url: "../testForm!loadData.action"  
  113.         })   
  114.     });   
  115.   
  116.     var cmbManager = new Ext.form.ComboBox({   
  117.         hiddenName: "manager",   
  118.         fieldLabel: "经理",   
  119.         editable: false,   
  120.         triggerAction: "all",   
  121.         mode: "local",   
  122.         maxHeight: 200,   
  123.         store: new Ext.data.SimpleStore({fields:[],data:[[]]}),   
  124.         onSelect: Ext.emptyFn,   
  125.         tpl: "<tpl for='.'><div id='tree'></div></tpl>"  
  126.     });   
  127.   
  128.     var root = new Ext.tree.TreeNode({   
  129.         nodeId: 1,   
  130.         text: "根节点",   
  131.         expanded: true  
  132.     });   
  133.     root.appendChild(new Ext.tree.TreeNode({nodeId:2, text:"节点A", leaf:true}));   
  134.     root.appendChild(new Ext.tree.TreeNode({nodeId:3, text:"节点B", leaf:true}));   
  135.   
  136.     var tree = new Ext.tree.TreePanel({   
  137.         root: root,   
  138.         border: false,   
  139.         autoHeight: true,   
  140.         autoScroll: true  
  141.     });   
  142.   
  143.     tree.on("click", function(node){      
  144.         if(!node.isLeaf()) return; //只能选择叶节点   
  145.         //下拉框的隐藏值   
  146.         if(cmbManager.hiddenField){   
  147.             cmbManager.hiddenField.value = node.attributes.nodeId;   
  148.         }   
  149.         cmbManager.setRawValue(node.text); //下拉框的显示值   
  150.         cmbManager.collapse(); //折叠下拉框   
  151.     });   
  152.   
  153.     cmbManager.on("expand", function(){     
  154.         tree.render("tree");      
  155.     });    
  156.   
  157.     //分页远程数据源的组合框   
  158.     var store3 = new Ext.data.JsonStore({   
  159.         url: "../testForm!loadData3.action",   
  160.         totalProperty: "totalNum",   
  161.         root: "books",   
  162.         fields: ["id", "name"]   
  163.     });   
  164.     var cmbBook = new Ext.form.ComboBox({   
  165.         hiddenName: "books",   
  166.         fieldLabel: "书籍",   
  167.         store: store3,   
  168.         valueField: "name",   
  169.         displayField: "name",   
  170.         triggerAction: "all",   
  171.         mode: "remote",   
  172.         queryParam: "books",   
  173.         loadingText: "正在装载数据...",   
  174.         width: 180,   
  175.         minChars: 1,   
  176.         editable: false,   
  177.         listWidth: 250,   
  178.         pageSize: 3   
  179.     });   
  180.   
  181.     //HTML标准组件   
  182.     var cmbPass = new Ext.form.ComboBox({   
  183.         hiddenName: "status",   
  184.         fieldLabel: "是否有效",   
  185.         triggerAction: "all",   
  186.         editable: false,   
  187.         width: 100,   
  188.         transform: "isPass",   
  189.         lazyRender: true  
  190.     });   
  191.   
  192.     var cmbTimes = new Ext.form.TimeField({   
  193.         hiddenName: "time",   
  194.         fieldLabel: "时间",   
  195.         minValue: "09:00",   
  196.         minText: "所选时间应大于{0}",   
  197.         maxValue: "18:00",   
  198.         maxText: "所选时间应小于{0}",   
  199.         format: "H时i分",   
  200.         increment: 30,   
  201.         invalidText: "时间格式无效！",   
  202.         maxHeight: 200,   
  203.         width: 100,   
  204.         value: "09时00分",   
  205.         editable: false  
  206.     });   
  207.   
  208.     var cmbMonths = new Ext.ux.MultiSelectCombo({   
  209.         hiddenName: "months",   
  210.         fieldLabel: "月份",   
  211.         maxHeight: 200,   
  212.         editable: false,   
  213.         store: [["201010","201010"], ["201009","201009"], ["201008","201008"], ["201007","201007"], ["201006","201006"]],   
  214.         mode: "local",   
  215.         width: 180,   
  216.         maxItemsCount: 3,   
  217.         maxItemsCountText: "最多只能选择三个选项！"  
  218.     });   
  219.   
  220.     var cmbBirths =  new Ext.form.DateField({   
  221.         name: "births",   
  222.         fieldLabel: "出生日期",   
  223.         disabledDays: [0,6],   
  224.         disabledDaysText: "禁止选择周末！",   
  225.         width: 100,   
  226.         readOnly: true,   
  227.         format: "Y-m-d",   
  228.         invalidText: "不是有效的日期值！"  
  229.     });   
  230.   
  231.     var fieldSet1 = new Ext.form.FieldSet({   
  232.         title: "下拉框",   
  233.         checkboxName: "fieldSet1",   
  234.         checkboxToggle: true,   
  235.         autoHeight: true,   
  236.         layout: "table",   
  237.         layoutConfig: {   
  238.             columns: 3   
  239.         },   
  240.         defaults: {   
  241.             style:"margin-left:8px; margin-top:3px; margin-right:8px; margin-bottom:3px; valign:top",   
  242.             layout:"form",   
  243.             labelAlign: "right"  
  244.         },   
  245.         items: [   
  246.             {rowspan:1, colspan:1, items:[cmbProvince]},   
  247.             {rowspan:1, colspan:1, items:[cmbManager]},   
  248.             {rowspan:1, colspan:1, items:[cmbBook]},   
  249.             {rowspan:1, colspan:1, items:[cmbPass]},   
  250.             {rowspan:1, colspan:1, items:[cmbTimes]},   
  251.             {rowspan:1, colspan:1, items:[cmbMonths]},   
  252.             {rowspan:1, colspan:1, items:[cmbBirths]}]   
  253.     });   
  254.   
  255.     var remarksField = new Ext.form.TextArea({   
  256.         name: "remarks",   
  257.         fieldLabel: "备注",   
  258.         width: 400,   
  259.         height: 80   
  260.     });   
  261.   
  262.     var form = new Ext.form.FormPanel({   
  263.         id: "frmAddUser",   
  264.         title: "新增用户",   
  265.         autoWidth: true,   
  266.         autoHeight: true,   
  267.         frame: true,   
  268.         renderTo: Ext.getBody(),   
  269.         labelWidth: 70,   
  270.         tbar: toolbar,   
  271.         items: [hiddenField, usernameField, pwdField, ageField, loveGroup, sexGroup,    
  272.             fieldSet1, remarksField],   
  273.         url: "../testForm!ajaxSubmitForm.action"  
  274.     });   
  275. });  

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： handanyou > 《ext》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多