lvdong5830
lvdong5830

ExtJS4学习笔记二－－表单控件相关

二、表单部分相关 

Html代码   收藏代码
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>提示信息TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js">script>  
  7.   <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js">script>  
  8.   <script type="text/javascript">  
  9.     Ext.onReady(function(){  
  10.         Ext.QuickTips.init();//初始化信息提示功能  
  11.         var form = new Ext.form.Panel({  
  12.             title:'表单',//表单标题  
  13.             height:120,//表单高度  
  14.             width:200,//表单宽度  
  15.             frame:true,//是否渲染表单  
  16.             renderTo :'form',  
  17.             defaults:{//统一设置表单字段默认属性  
  18.                 //autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度  
  19.                 labelSeparator :'：',//分隔符  
  20.                 labelWidth : 50,//标签宽度  
  21.                 width : 150,//字段宽度  
  22.                 allowBlank : false,//是否允许为空  
  23.                 blankText : '不允许为空',  
  24.                 labelAlign : 'left',//标签对齐方式  
  25.                 msgTarget :'qtip'          //显示一个浮动的提示信息  
  26.                 //msgTarget :'title'       //显示一个浏览器原始的浮动提示信息  
  27.                 //msgTarget :'under'       //在字段下方显示一个提示信息  
  28.                 //msgTarget :'side'        //在字段的右边显示一个提示信息  
  29.                 //msgTarget :'none'        //不显示提示信息  
  30.                 //msgTarget :'errorMsg'    //在errorMsg元素内显示提示信息  
  31.             },  
  32.             items:[{  
  33.                 xtype : 'textfield',  
  34.                 fieldLabel : '姓名'//标签内容  
  35.             },{  
  36.                 xtype : 'numberfield',  
  37.                 fieldLabel : '年龄'  
  38.             }]  
  39.         });  
  40.     });  
  41.   script>  
  42.  HEAD>  
  43.  <BODY STYLE="margin: 10px">  
  44.     <div id='form'>div>  
  45.       
  46.     <div id='errorMsg'>div>  
  47.  BODY>  
  48. HTML>  

Html代码   收藏代码
  1. <div id='form'>div>  

Javascript代码   收藏代码
  1. Ext.QuickTips.init();  
  2.         var loginForm = Ext.create('Ext.form.Panel',{  
  3.             title:'Ext.form.field.Text示例',  
  4.             bodyStyle:'padding:5 5 5 5',//表单边距  
  5.             frame : true,  
  6.             height:120,  
  7.             width:200,  
  8.             renderTo :'form',  
  9.             defaultType: 'textfield',//设置表单字段的默认类型  
  10.             defaults:{//统一设置表单字段默认属性  
  11.                 labelSeparator :'：',//分隔符  
  12.                 labelWidth : 50,//标签宽度  
  13.                 width : 150,//字段宽度  
  14.                 allowBlank : false,//是否允许为空  
  15.                 labelAlign : 'left',//标签对齐方式  
  16.                 msgTarget :'side'   //在字段的右边显示一个提示信息  
  17.             },  
  18.             items:[{  
  19.                     fieldLabel : '用户名',  
  20.                     name : 'userName',  
  21.                     selectOnFocus : true,//得到焦点时自动选择文本  
  22.                     //验证电子邮件格式的正则表达式  
  23.                     regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,  
  24.                     regexText:'格式错误'//验证错误之后的提示信息,  
  25.                 },{  
  26.                     name : 'password',  
  27.                     fieldLabel : '密码',  
  28.                     inputType : 'password'//设置输入类型为password  
  29.                 }  
  30.             ],  
  31.             buttons:[{  
  32.                 text : '登陆',  
  33.                 handler : function(){  
  34.                     loginForm.form.setValues({userName:'user@com',password:'123456'});  
  35.                 }  
  36.             }]  
  37.         });  

Javascript代码   收藏代码
  1. Ext.QuickTips.init();  
  2.         var testForm = Ext.create('Ext.form.Panel',{  
  3.             title:'Ext.form.field.TextArea示例',  
  4.             bodyStyle:'padding:5 5 5 5',//表单边距  
  5.             frame : true,  
  6.             height:150,  
  7.             width:250,  
  8.             renderTo :'form',  //
  
  •             items:[{  
  •                 xtype : 'textarea',  
  •                 fieldLabel : '备注',  
  •                 id:'memo',//字段组件id  
  •                 labelSeparator :'：',//分隔符  
  •                 labelWidth : 60,//标签宽度  
  •                 width:200  
  •             }],  
  •             buttons:[{text:'确定',handler:showValue}]  
  •         })  
  •         function showValue(){  
  •             var memo = testForm.getForm().findField('memo');//取得输入控件  
  •             alert(memo.getValue());//取得控件值  
  •         }  

    • Javascript代码   收藏代码
    1. //Ext.form.field.Number示例  
    2.         Ext.QuickTips.init();  
    3.         var form = Ext.create('Ext.form.FormPanel',{  
    4.             title:'Ext.form.field.Number示例',  
    5.             bodyStyle:'padding:5 5 5 5',//表单边距  
    6.             renderTo :'form',   //
      
  •             frame : true,  
  •             height:150,  
  •             width:250,  
  •             defaultType: 'numberfield',//设置表单字段的默认类型  
  •             defaults:{//统一设置表单字段默认属性  
  •                 labelSeparator :'：',//分隔符  
  •                 labelWidth : 80,//标签宽度  
  •                 width : 200,//字段宽度  
  •                 labelAlign : 'left',//标签对齐方式  
  •                 msgTarget :'side'   //在字段的右边显示一个提示信息  
  •             },  
  •             items:[{  
  •                 fieldLabel:'整数',  
  •                 hideTrigger : true,//隐藏微调按钮  
  •                 allowDecimals : false,//不允许输入小数  
  •                 nanText :'请输入有效的整数'//无效数字提示  
  •             },{  
  •                 fieldLabel:'小数',  
  •                 decimalPrecision : 2,//精确到小数点后两位  
  •                 allowDecimals : true,//允许输入小数  
  •                 nanText :'请输入有效的小数'//无效数字提示  
  •             },{  
  •                 fieldLabel:'数字限制',  
  •                 baseChars :'12345'//输入数字范围  
  •             },{  
  •                 fieldLabel:'数值限制',  
  •                 maxValue : 100,//最大值  
  •                 minValue : 50//最小值  
  •             }]  
  •         });  

    • 触发字段： 
    Javascript代码   收藏代码
    1. //Ext.form.field.Trigger示例  
    2.         var testForm = Ext.create('Ext.form.Panel',{  
    3.             title:'Ext.form.field.Trigger示例',  
    4.             bodyStyle:'padding:5 5 5 5',//表单边距  
    5.             frame : true,  
    6.             height:100,  
    7.             width:270,  
    8.             renderTo :'form',  
    9.             defaults:{//统一设置表单字段默认属性  
    10.                 labelSeparator :'：',//分隔符  
    11.                 labelWidth : 70,//标签宽度  
    12.                 width : 200,//字段宽度  
    13.                 labelAlign : 'left'//标签对齐方式  
    14.             },  
    15.             items:[{  
    16.                 xtype : 'triggerfield',  
    17.                 id:'memo',  
    18.                 fieldLabel:'触发字段',  
    19.                 hideTrigger : false,//不隐藏触发按钮  
    20.                 onTriggerClick : function(){  
    21.                     var memo = testForm.getForm().findField('memo');//取得输入控件  
    22.                     alert(memo.getValue());//取得控件值  
    23.                     Ext.getCmp('memo').setValue('test');  
    24.                 }  
    25.             }]  
    26.         });  

    微调字段 
    Javascript代码   收藏代码
    1. //Ext.form.field.Spinner示例  
    2.         Ext.create('Ext.form.Panel',{  
    3.             title:'Ext.form.field.Spinner示例',  
    4.             bodyStyle:'padding:5 5 5 5',//表单边距  
    5.             frame : true,  
    6.             height:70,  
    7.             width:250,  
    8.             renderTo :'form',  
    9.             defaults:{//统一设置表单字段默认属性  
    10.                 labelSeparator :'：',//分隔符  
    11.                 labelWidth : 70,//标签宽度  
    12.                 width : 200,//字段宽度  
    13.                 labelAlign : 'left'//标签对齐方式  
    14.             },  
    15.             items:[{  
    16.                 xtype : 'spinnerfield',  
    17.                 fieldLabel:'微调字段',  
    18.                 id : 'salary',//组件id  
    19.                 value : 100,//初始化字段值  
    20.                 onSpinUp : function(){  
    21.                     var salaryCmp = Ext.getCmp('salary');//通过组件id获取组件对象  
    22.                     //增加默认值  
    23.                     salaryCmp.setValue(Number(salaryCmp.getValue()) + 1);  
    24.                 },  
    25.                 onSpinDown : function(){  
    26.                     var salaryCmp = Ext.getCmp('salary');  
    27.                     //减小默认值  
    28.                     salaryCmp.setValue(Number(salaryCmp.getValue()) - 1);  
    29.                 }  
    30.             }]  
    31.         });  

    ComboBox本地数据源示例 
    Javascript代码   收藏代码
    1. //Ext.form.field.ComboBox本地数据源示例  
    2.         //创建数据模型  
    3.         Ext.regModel('PostInfo', {  
    4.             fields: [{name: 'province'},{name: 'post'}]  
    5.         });  
    6.         //定义组合框中显示的数据源  
    7.         var postStore = Ext.create('Ext.data.Store',{  
    8.             model : 'PostInfo',  
    9.             data : [  
    10.                 {province:'北京',post:'100000'},  
    11.                 {province:'通县',post:'101100'},  
    12.                 {province:'昌平',post:'102200'},  
    13.                 {province:'大兴',post:'102600'},  
    14.                 {province:'密云',post:'101500'},  
    15.                 {province:'延庆',post:'102100'},  
    16.                 {province:'顺义',post:'101300'},  
    17.                 {province:'怀柔',post:'101400'}  
    18.             ]  
    19.         });  
    20.         //创建表单  
    21.         Ext.create('Ext.form.Panel',{  
    22.             title:'Ext.form.field.ComboBox本地数据源示例',  
    23.             renderTo: Ext.getBody(),  
    24.             bodyPadding: 5,  
    25.             frame : true,  
    26.             height:100,  
    27.             width:270,  
    28.             defaults:{//统一设置表单字段默认属性  
    29.                 labelSeparator :'：',//分隔符  
    30.                 labelWidth : 70,//标签宽度  
    31.                 width : 200,//字段宽度  
    32.                 labelAlign : 'left'//标签对齐方式  
    33.             },  
    34.             items:[{  
    35.                 xtype : 'combo',  
    36.                 listConfig : {  
    37.                     emptyText : '未找到匹配值',//当值不在列表是的提示信息  
    38.                     maxHeight : 60//设置下拉列表的最大高度为60像素  
    39.                 },  
    40.                 name:'post',  
    41.                 autoSelect : true,  
    42.                 fieldLabel:'邮政编码',  
    43.                 triggerAction: 'all',//单击触发按钮显示全部数据  
    44.                 store : postStore,//设置数据源  
    45.                 displayField:'province',//定义要显示的字段  
    46.                 valueField:'post',//定义值字段  
    47.                 queryMode: 'local',//本地模式  
    48.                 forceSelection : true,//要求输入值必须在列表中存在  
    49.                 typeAhead : true,//允许自动选择匹配的剩余部分文本  
    50.                 value:'102600'//默认选择大兴  
    51.             }]  
    52.         });  

    Ext.form.field.Time示例： 
    Javascript代码   收藏代码
    1. Ext.create('Ext.form.Panel',{  
    2.             title:'Ext.form.field.Time示例',  
    3.             renderTo: Ext.getBody(),  
    4.             bodyPadding: 5,  
    5.             frame : true,  
    6.             height:100,  
    7.             width:300,  
    8.             items:[{  
    9.                 fieldLabel:'时间选择框',  
    10.                 xtype : 'timefield',  
    11.                 width : 220,  
    12.                 labelSeparator :'：',//分隔符  
    13.                 msgTarget :'side',//在字段的右边显示一个提示信息  
    14.                 autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度  
    15.                 maxValue : '18:00',//最大时间  
    16.                 maxText : '时间应小于{0}',//大于最大时间的提示信息  
    17.                 minValue : '10:00',//最小时间  
    18.                 minText : '时间应大于{0}',//小于最小时间的提示信息  
    19.                 pickerMaxHeight : 70,//下拉列表的最大高度  
    20.                 increment : 60,//时间间隔为60分钟  
    21.                 format : 'G时i分s秒 ',//G标示为24时计时法  
    22.                 invalidText :'时间格式无效'  
    23.             }]  
    24.         });  

    Ext.form.field.Date示例： 
    Javascript代码   收藏代码
    1. Ext.create('Ext.form.Panel',{  
    2.             title:'Ext.form.field.Time示例',  
    3.             renderTo: Ext.getBody(),  
    4.             bodyPadding: 5,  
    5.             frame : true,  
    6.             height:100,  
    7.             width:300,  
    8.             items:[{  
    9.                 fieldLabel:'时间选择框',  
    10.                 xtype : 'timefield',  
    11.                 width : 220,  
    12.                 labelSeparator :'：',//分隔符  
    13.                 msgTarget :'side',//在字段的右边显示一个提示信息  
    14.                 autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度  
    15.                 maxValue : '18:00',//最大时间  
    16.                 maxText : '时间应小于{0}',//大于最大时间的提示信息  
    17.                 minValue : '10:00',//最小时间  
    18.                 minText : '时间应大于{0}',//小于最小时间的提示信息  
    19.                 pickerMaxHeight : 70,//下拉列表的最大高度  
    20.                 increment : 60,//时间间隔为60分钟  
    21.                 format : 'G时i分s秒 ',//G标示为24时计时法  
    22.                 invalidText :'时间格式无效'  
    23.             }]  
    24.         });  

    Ext.form.field.Hidden示例： 
    Javascript代码   收藏代码
    1. Ext.create('Ext.form.Panel',{  
    2.             title:'Ext.form.field.Hidden示例',  
    3.             frame : true,  
    4.             height:100,  
    5.             width:300,  
    6.             renderTo: Ext.getBody(),  
    7.             bodyPadding: 5,  
    8.             defaultType: 'textfield',//设置表单字段的默认类型  
    9.             defaults:{//统一设置表单字段默认属性  
    10.                 labelSeparator :'：',//分隔符  
    11.                 labelWidth : 70,//标签宽度  
    12.                 width : 200,//字段宽度  
    13.                 labelAlign : 'left'//标签对齐方式  
    14.             },  
    15.             items:[{  
    16.                 name:'userName',  
    17.                 fieldLabel:'姓名'  
    18.             },{//隐藏域  
    19.                 name:'age',  
    20.                 xtype : 'hidden'  
    21.             },{  
    22.                 name:'sex',  
    23.                 fieldLabel:'性别'  
    24.             }]  
    25.         });  

    Ext.form.field.HtmlEditor示例： 
    Javascript代码   收藏代码
    1. Ext.create('Ext.form.Panel',{  
    2.             title:'Ext.form.field.HtmlEditor示例',  
    3.             width : 630,  
    4.             frame : true,  
    5.             renderTo: Ext.getBody(),  
    6.             bodyPadding: 5,  
    7.             items:[{  
    8.                 fieldLabel:'HTML字段',  
    9.                 xtype : 'htmleditor',  
    10.                 height:150,  
    11.                 width : 600,  
    12.                 value : 'ExtJS4登场',  
    13.                 labelWidth : 70,//标签宽度  
    14.                 labelSeparator :'：',//分隔符  
    15.                 createLinkText : '创建超链接',//创建连接的提示信息  
    16.                 defaultLinkValue : "http://www.",//连接的默认格式  
    17.                 enableAlignments : true,//起用左、中、右对齐按钮  
    18.                 enableColors : true,//起用前景色、背景色选择按钮  
    19.                 enableFont : true,//起用字体选择按钮  
    20.                 enableFontSize : true,//起用字体增大和缩写按钮  
    21.                 enableFormat : true,//起用粗体、斜体、下划线按钮  
    22.                 enableLinks : true,//起用创建连接按钮  
    23.                 enableLists : true,//起用列表按钮  
    24.                 enableSourceEdit : true,//起用源代码编辑按钮  
    25.                 fontFamilies:['宋体','隶书','黑体'],//字体列表  
    26.                 buttonTips :{  
    27.                     bold : {  
    28.                         title: 'Bold (Ctrl+B)',  
    29.                         text: '粗体'  
    30.                     },  
    31.                     italic : {  
    32.                         title: 'Italic (Ctrl+I)',  
    33.                         text: '斜体'  
    34.                     },  
    35.                     underline : {  
    36.                         title: 'Underline (Ctrl+U)',  
    37.                         text: '下划线'  
    38.                     },  
    39.                     increasefontsize : {  
    40.                         title: 'Grow Text',  
    41.                         text: '增大字体'  
    42.                     },  
    43.                     decreasefontsize : {  
    44.                         title: 'Shrink Text',  
    45.                         text: '缩小字体'  
    46.                     },  
    47.                     backcolor : {  
    48.                         title: 'Text Highlight Color',  
    49.                         text: '背景色'  
    50.                     },  
    51.                     forecolor : {  
    52.                         title: 'Font Color',  
    53.                         text: '前景色'  
    54.                     },  
    55.                     justifyleft : {  
    56.                         title: 'Align Text Left',  
    57.                         text: '左对齐'  
    58.                     },  
    59.                     justifycenter : {  
    60.                         title: 'Center Text',  
    61.                         text: '居中对齐'  
    62.                     },  
    63.                     justifyright : {  
    64.                         title: 'Align Text Right',  
    65.                         text: '右对齐'  
    66.                     },  
    67.                     insertunorderedlist : {  
    68.                         title: 'Bullet List',  
    69.                         text: '项目符号'  
    70.                     },  
    71.                     insertorderedlist : {  
    72.                         title: 'Numbered List',  
    73.                         text: '数字编号'  
    74.                     },  
    75.                     createlink : {  
    76.                         title: 'Hyperlink',  
    77.                         text: '超连接'  
    78.                     },  
    79.                     sourceedit : {  
    80.                         title: 'Source Edit',  
    81.                         text: '切换源代码编辑模式'  
    82.                     }  
    83.                 }  
    84.             }]  
    85.         });  

    Ext.form.field.Display示例： 
    Javascript代码   收藏代码
    1. Ext.create('Ext.form.Panel',{  
    2.             title:'Ext.form.field.Display示例',  
    3.             width : 200,  
    4.             frame : true,  
    5.             renderTo: Ext.getBody(),  
    6.             bodyPadding: 5,  
    7.             items:[{  
    8.                 fieldLabel:'展示字段',  
    9.                 xtype : 'displayfield',  
    10.                 value : 'ExtJS4登场',  
    11.                 labelWidth : 70,//标签宽度  
    12.                 labelSeparator :'：'//分隔符  
    13.             }]  
    14.         });  

    Ext.form.Label示例： 
    Javascript代码   收藏代码
    1. Ext.create('Ext.form.Panel',{  
    2.             title:'Ext.form.Label示例',  
    3.             width : 200,  
    4.             frame : true,  
    5.             renderTo: Ext.getBody(),  
    6.             bodyPadding: 5,  
    7.             items:[ {  
    8.                 xtype: 'label',  
    9.                 forId: 'userName',//关联inputId为userName的表单字段  
    10.                 text: '用户名'  
    11.             },{  
    12.                 name:'userName',  
    13.                 xtype : 'textfield',  
    14.                 inputId : 'userName',  
    15.                 hideLabel : true //隐藏字段标签  
    16.             }]  
    17.         });  

    Ext.form.FieldSet示例： 
    Javascript代码   收藏代码
    1. Ext.create('Ext.form.Panel',{  
    2.             title:'Ext.form.FieldSet示例',  
    3.             labelWidth : 40,//标签宽度  
    4.             width : 220,  
    5.             frame : true,  
    6.             renderTo: Ext.getBody(),  
    7.             bodyPadding: 5,  
    8.             items:[{  
    9.                 title:'产品信息',  
    10.                 xtype : 'fieldset',  
    11.                 collapsible : true,//显示切换展开收缩状态的切换按钮  
    12.                 bodyPadding: 5,  
    13.                 defaults:{//统一设置表单字段默认属性  
    14.                     labelSeparator :'：',//分隔符  
    15.                     labelWidth : 50,//标签宽度  
    16.                     width : 160//字段宽度  
    17.                 },  
    18.                 defaultType: 'textfield',//设置表单字段的默认类型  
    19.                 items:[{  
    20.                     fieldLabel:'产地'  
    21.                 },{  
    22.                     fieldLabel:'售价'  
    23.                 }]  
    24.             },{  
    25.                 title:'产品描述',  
    26.                 xtype : 'fieldset',  
    27.                 bodyPadding: 5,  
    28.                 checkboxToggle : true,//显示切换展开收缩状态的复选框  
    29.                 checkboxName : 'description',//提交数据时复选框对应的name  
    30.                 labelSeparator :'：',//分隔符  
    31.                 items:[{  
    32.                     fieldLabel:'简介',  
    33.                     labelSeparator :'：',//分隔符  
    34.                     labelWidth : 50,//标签宽度  
    35.                     width : 160,//字段宽度  
    36.                     xtype : 'textarea'  
    37.                 }]  
    38.             }]  
    39.         });  

    Ext.form.FieldContainer示例： 
    Javascript代码   收藏代码
    1. Ext.create('Ext.form.Panel',{  
    2.             title:'Ext.form.FieldContainer示例',  
    3.             width : 300,  
    4.             frame : true,  
    5.             renderTo: Ext.getBody(),  
    6.             bodyPadding: 5,  
    7.             fieldDefaults:{//统一设置表单字段默认属性  
    8.                 labelSeparator :'：',//分隔符  
    9.                 labelWidth : 60,//标签宽度  
    10.                 width : 260,//字段宽度  
    11.                 msgTarget : 'side'  
    12.             },  
    13.             defaultType: 'textfield',//设置表单字段的默认类型  
    14.             items:[{  
    15.                 fieldLabel:'商品名称'  
    16.             },{  
    17.                 xtype: 'fieldcontainer',  
    18.                 fieldLabel: '生产日期',  
    19.                 layout: {//设置容器字段布局  
    20.                     type: 'hbox',  
    21.                     align: 'middle'//垂直居中  
    22.                 },  
    23.                 combineErrors : true,//合并展示错误信息  
    24.                 fieldDefaults: {  
    25.                     hideLabel: true,//隐藏字段标签  
    26.                     allowBlank : false//设置字段值不允许为空  
    27.                 },  
    28.                 defaultType: 'textfield',//设置表单字段的默认类型  
    29.                 items: [{  
    30.                     fieldLabel: '年',  
    31.                     flex: 1,  
    32.                     inputId : 'yearId'  
    33.                 },{  
    34.                     xtype: 'label',  
    35.                     forId : 'yearId',  
    36.                     text: '年'  
    37.                 },{  
    38.                     fieldLabel: '月',  
    39.                     flex: 1,  
    40.                     inputId : 'monthId'  
    41.                 },{  
    42.                     xtype: 'label',  
    43.                     forId : 'monthId',  
    44.                     text: '月'  
    45.                 },{  
    46.                     fieldLabel: '日',  
    47.                     flex: 1,  
    48.                     inputId : 'dayId'  
    49.                 },{  
    50.                     xtype: 'label',  
    51.                     forId : 'dayId',  
    52.                     text: '日'  
    53.                 }]  
    54.             },{  
    55.                 fieldLabel:'产地来源'  
    56.             }]  
    57.         });  

    vtype示例： 
    Javascript代码   收藏代码
    1. Ext.create('Ext.form.Panel',{  
    2.             title:'vtype示例',  
    3.             width : 300,  
    4.             frame : true,  
    5.             renderTo: Ext.getBody(),  
    6.             bodyPadding: 5,  
    7.             defaultType: 'textfield',//设置表单字段的默认类型  
    8.             fieldDefaults:{//统一设置表单字段默认属性  
    9.                 labelSeparator :'：',//分隔符  
    10.                 labelWidth : 80,//标签宽度  
    11.                 width : 270,//字段宽度  
    12.                 msgTarget : 'side'  
    13.             },  
    14.             items:[{  
    15.                 fieldLabel:'电子邮件',  
    16.                 vtype:'email'  
    17.             },{  
    18.                 fieldLabel:'网址',  
    19.                 vtype:'url'  
    20.             },{  
    21.                 fieldLabel:'字母',  
    22.                 vtype:'alpha'  
    23.             },{  
    24.                 fieldLabel:'字母和数字',  
    25.                 vtype:'alphanum'  
    26.             }]  
    27.         });  

    自定义电话号码验证示例： 
    Javascript代码   收藏代码
    1. //自定义电话号码的vtype验证  
    2.         Ext.apply(Ext.form.field.VTypes, {  
    3.             phone:  function(v) {  
    4.                 //规则区号（3-4位数字）-电话号码（7-8位数字）  
    5.                 return /^(\d{3}-|\d{4}-)?(\d{8}|\d{7})$/.test(v);  
    6.             },  
    7.             phoneText: '请输入有效的电话号码',  
    8.             phoneMask: /[\d-]/i//只允许输入数字和-号  
    9.         });  
    10.         Ext.QuickTips.init();  
    11.         Ext.create('Ext.form.Panel',{  
    12.             title:'自定义电话号码验证示例',  
    13.             width : 300,  
    14.             frame : true,  
    15.             renderTo: Ext.getBody(),  
    16.             bodyPadding: 5,  
    17.             defaultType: 'textfield',//设置表单字段的默认类型  
    18.             fieldDefaults:{//统一设置表单字段默认属性  
    19.                 labelSeparator :'：',//分隔符  
    20.                 labelWidth : 80,//标签宽度  
    21.                 width : 270,//字段宽度  
    22.                 msgTarget : 'side'  
    23.             },  
    24.             items:[{  
    25.                 fieldLabel:'住宅号码',  
    26.                 vtype:'phone'//使用电话类型验证  
    27.             },{  
    28.                 fieldLabel:'办公号码',  
    29.                 vtype:'phone'//使用电话类型验证  
    30.             }]  
    31.         });  

    自定义日期范围验证示例： 
    Javascript代码   收藏代码
    1. //自定义VType类型，验证日期选择范围  
    2.         Ext.apply(Ext.form.field.VTypes, {  
    3.             //验证方法  
    4.             dateRange : function(val, field) {  
    5.                 var beginDate = null,//开始日期  
    6.                     beginDateCmp = null,//开始日期组件  
    7.                     endDate = null,//结束日期  
    8.                     endDateCmp = null,//结束日期组件  
    9.                     validStatus = true;//验证状态  
    10.                 if(field.dateRange){  
    11.                     //获取开始时间  
    12.                     if(!Ext.isEmpty(field.dateRange.begin)){  
    13.                         beginDateCmp = Ext.getCmp(field.dateRange.begin);  
    14.                         beginDate = beginDateCmp.getValue();  
    15.                     }  
    16.                     //获取结束时间  
    17.                     if(!Ext.isEmpty(field.dateRange.end)){  
    18.                         endDateCmp = Ext.getCmp(field.dateRange.end);  
    19.                         endDate = endDateCmp.getValue();  
    20.                     }  
    21.                 }  
    22.                 //如果开始日期或结束日期有一个为空则校验通过  
    23.                 if(!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)){  
    24.                     validStatus =  beginDate <= endDate;  
    25.                 }  
    26.                   
    27.                 return validStatus;  
    28.             },  
    29.             //验证提示信息  
    30.             dateRangeText : '开始日期不能大于结束日期，请重新选择。'  
    31.         });  
    32.         Ext.QuickTips.init();//初始化提示;  
    33.         var dateForm = Ext.create('Ext.form.Panel',{  
    34.             title:'自定义日期范围验证示例',  
    35.             frame : true,  
    36.             width:250,  
    37.             renderTo: Ext.getBody(),  
    38.             bodyPadding: 5,  
    39.             fieldDefaults:{//统一设置表单字段默认属性  
    40.                 autoFitErrors : false,//不自动调整字段宽度  
    41.                 labelSeparator :'：',//分隔符  
    42.                 labelWidth : 90,//标签宽度  
    43.                 width : 210,//字段宽度  
    44.                 format:'Y年n月j日',//显示日期的格式  
    45.                 editable : false,//设置只读  
    46.                 allowBlank : false,//不允许为空  
    47.                 msgTarget : 'side'//设置提示信息展示位置  
    48.             },  
    49.             defaultType: 'datefield',//设置表单字段的默认类型  
    50.             items:[{  
    51.                 id:'beginDate1',  
    52.                 fieldLabel:'入学开始日期',  
    53.                 dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange  
    54.                 vtype:'dateRange'  
    55.             },{  
    56.                 id:'endDate1',  
    57.                 fieldLabel:'入学结束日期',  
    58.                 dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange  
    59.                 vtype:'dateRange'  
    60.             },{  
    61.                 id:'beginDate2',  
    62.                 fieldLabel:'毕业开始日期',  
    63.                 dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange  
    64.                 vtype:'dateRange'  
    65.             },{  
    66.                 id:'endDate2',  
    67.                 fieldLabel:'毕业结束日期',  
    68.                 dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange  
    69.                 vtype:'dateRange'  
    70.             }]  
    71.         });  

    Ajax模式的表单数据加载： 
    Html代码   收藏代码
    1. <HTML>  
    2.  <HEAD>  
    3.   <TITLE>Ajax模式的表单数据加载TITLE>  
    4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    5.   <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />  
    6.   <script type="text/javascript" src="extjs4/bootstrap.js">script>  
    7.   <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js">script>  
    8.   <script type="text/javascript">  
    9.     Ext.onReady(function(){  
    10.         Ext.QuickTips.init();//初始化提示;  
    11.         var productForm = Ext.create('Ext.form.Panel',{  
    12.             title:'表单加载示例',  
    13.             width : 300,  
    14.             frame : true,  
    15.             fieldDefaults:{//统一设置表单字段默认属性  
    16.                 labelSeparator :'：',//分隔符  
    17.                 labelWidth : 80,//标签宽度  
    18.                 width : 200  
    19.             },  
    20.             renderTo: Ext.getBody(),  
    21.             items:[{  
    22.                 fieldLabel:'产品名称',  
    23.                 xtype : 'textfield',  
    24.                 name : 'productName',  
    25.                 value:'U盘'//同步加载数据  
    26.             },{  
    27.                 fieldLabel:'金额',  
    28.                 xtype : 'numberfield',  
    29.                 name : 'price',  
    30.                 value : 100//同步加载数据  
    31.             },{  
    32.                 fieldLabel:'生产日期',  
    33.                 xtype : 'datefield',  
    34.                 format:'Y年m月d日',//显示日期的格式  
    35.                 name : 'date',  
    36.                 value : new Date()//同步加载数据  
    37.             },{  
    38.                 xtype : 'hidden',  
    39.                 name : 'productId',  
    40.                 value:'001'//产品id  
    41.             },{  
    42.                 fieldLabel:'产品简介',  
    43.                 name : 'introduction',  
    44.                 xtype : 'textarea'  
    45.             }],  
    46.             buttons:[{  
    47.                 text : '加载简介',  
    48.                 handler : loadIntroduction  
    49.             }]  
    50.         });  
    51.         //表单加载数据的回调函数  
    52.         function loadIntroduction(){  
    53.             var params = productForm.getForm().getValues();  
    54.             productForm.getForm().load({  
    55.                 params : params,//传递参数  
    56.                 url : 'productServer.jsp',//请求的url地址  
    57.                 method:'GET',//请求方式  
    58.                 success:function(form,action){//加载成功的处理函数  
    59.                     Ext.Msg.alert('提示','产品简介加载成功');  
    60.                 },  
    61.                 failure:function(form,action){//加载失败的处理函数  
    62.                     Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+action.result.errorMessage);  
    63.                 }  
    64.             });  
    65.         }  
    66.     });  
    67.   script>  
    68.  HEAD>  
    69.  <BODY STYLE="margin: 10px">BODY>  
    70. HTML>  
    Jsp代码   收藏代码
    1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>  
    2. <%  
    3. //获取产品id  
    4. String productId = request.getParameter("productId");  
    5. if("001".equals(productId)){  
    6.     String msg = "{success:true,data:{introduction:'本产品美观实用，售后服务优秀。'}}";  
    7.     response.getWriter().write(msg);  
    8. }else{  
    9.     String msg = "{success:false,errorMessage:'数据不存在'}";  
    10.     response.getWriter().write(msg);  
    11. }  
    12. %>  


    另外一种方式： 
    Java代码   收藏代码
    1. public String getProductInfo(String productId)  
    2.     {  
    3.         String msg = "";  
    4.         if("001".equals(productId)){  
    5.             msg = "1本产品美观实用，售后服务优秀。";  
    6.         }else{  
    7.             msg = "0数据不存在";  
    8.         }  
    9.         return msg;  
    10.     }  

    Javascript代码   收藏代码
    1. //表单加载数据的回调函数  
    2.         function loadIntroduction(){  
    3.             var params = productForm.getForm().getValues();  
    4.             testdwr.getProductInfo(params.productId,function(ret){  
    5.                 if(ret.substring(0,1) == '1')  
    6.                 {  
    7.                     Ext.getCmp('introduction').setValue(ret.substring(1,ret.length-1));  
    8.                     Ext.Msg.alert('提示','产品简介加载成功');  
    9.                 }  
    10.                 else  
    11.                 {  
    12.                     Ext.Msg.alert('提示','产品简介加载失败
      失败原因：'      +ret.substring(1,ret.length-1));  
    13.                 }  
    14.             });  
    15.         }  

    登录简单处理： 
    Html代码   收藏代码
    1. <HTML>  
    2.  <HEAD>  
    3.   <TITLE>Ajax模式的表单数据提交TITLE>  
    4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    5.   <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />  
    6.   <script type="text/javascript" src="extjs4/bootstrap.js">script>  
    7.   <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js">script>  
    8.   <script type="text/javascript">  
    9.     Ext.onReady(function(){  
    10.         Ext.QuickTips.init();//初始化提示;  
    11.         var loginForm = Ext.create('Ext.form.Panel',{  
    12.             title:'表单提交示例',  
    13.             width : 230,  
    14.             frame : true,  
    15.             fieldDefaults:{//统一设置表单字段默认属性  
    16.                 labelSeparator :'：',//分隔符  
    17.                 labelWidth : 50,//标签宽度  
    18.                 msgTarget : 'side',  
    19.                 width : 200  
    20.             },  
    21.             renderTo: Ext.getBody(),  
    22.             bodyPadding: 5,  
    23.             defaultType: 'textfield',//设置表单字段的默认类型  
    24.             items:[{  
    25.                 fieldLabel:'用户名',  
    26.                 name : 'userName',  
    27.                 allowBlank : false,  
    28.                 vtype:'email'  
    29.             },{  
    30.                 fieldLabel:'密码',  
    31.                 name : 'password',  
    32.                 inputType : 'password',  
    33.                 allowBlank : false  
    34.             }],  
    35.             buttons:[{  
    36.                 text : '登陆',  
    37.                 handler : login  
    38.             },{  
    39.                 text : '重置',  
    40.                 handler : reset  
    41.             }]  
    42.         });  
    43.         function login(){//提交表单  
    44.             loginForm.getForm().submit({  
    45.                 clientValidation:true,//进行客户端验证  
    46.                 url : 'loginServer.jsp',//请求的url地址  
    47.                 method:'GET',//请求方式  
    48.                 success:function(form,action){//加载成功的处理函数  
    49.                     Ext.Msg.alert('提示','系统登陆成功');  
    50.                 },  
    51.                 failure:function(form,action){//加载失败的处理函数  
    52.                     Ext.Msg.alert('提示','系统登陆失败，原因：'+action.failureType);  
    53.                 }  
    54.             });  
    55.         }  
    56.         function reset(){//重置表单  
    57.             loginForm.form.reset();  
    58.         }  
    59.     });  
    60.   script>  
    61.  HEAD>  
    62.  <BODY  STYLE="margin: 10px">BODY>  
    63. HTML>  
    Jsp代码   收藏代码
    1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>  
    2. <%  
    3.     String password = request.getParameter("password");  
    4.     String msg = "";  
    5.     if(password.length() < 6){//密码不足6位验证失败  
    6.         msg = "{success:false,errors:{password:'密码不得小于六位数字'}}";  
    7.     }else{//验证成功  
    8.         msg = "{success:true}";  
    9.     }  
    10.     response.getWriter().write(msg);  
    11. %>  

    你可能感兴趣的:(Ext4.0)

    • Ext4.0学习笔记（4~9章 MVC、高级组件、布局以及图表） guangneng521 WebTechnology测试uxjson
      第四章MVC学习从这个图中我们可以很清楚的看到M、V、C在ExtJS4.0里面所对应数据类型。靠右边是对应的代码结构。下描述一下这model、store、view、controller以及application这几者之间的关系。（1）application：它是MVC的入口，用来告诉ExtJS到那里去找对应js文件以及启动加载controller与view连个模块的代码。//打开动态加载js功能E
    • ext4.0绘制chart（柱状图，条形图） phantomes jsextjs4java其他
      Jsp代码ext-4.0/resources/css/ext-all.css"/>ext-4.0/bootstrap.js">ext-4.0/locale/ext-lang-zh_CN.js">js/ligerUI/skins/Aqua/css/ligerui-all.css"rel="stylesheet"type="text/css"/>css/core.css"rel="stylesheet
    • 关于Ext4.2中Grid的行背景色问题已经得到解决 zdlly617 ext
      关于Ext中Grid的背景色在各个版本中的实现方式，如果你的应用中不引用用ext自己提供的css的话，那么以下解决方式部分对你起作用：在Ext4.0以下可以使用的方式：http://www.sencha.com/forum/showthread.php?253998-Grid-row-color-with-getRowClass-is-not-workinghttp://skirtlesden.c
    • Ext 3.3 数据透视表、日历组件、Ext4.0之前最重要的升级 sp42a ext日历数据结构table扩展
      数据透视表Grid是Ext的重头戏，每次发布新版本都会对Grid加入新元素。这一次发布也不例外。3.3加入了“数据透视表PivotGrid”。前一个版本3.2已加入了“多层表头”，这一次在左边的一列定义leftAxis。如图就是一个员工销售业绩表的例子。使用PivotGrid比较关键的是其数据结构，我们可以看看官方的例子其中的Store。varpivotGrid=newExt.grid.Pivot
    • ext 4.0 学习笔记（1）Array Grid li988761048007
      今天刚开始接触EXT，直接跳过2.2等较旧版本；由于网上的中文资料几乎都是2.2，并且我也是刚开始接触EXT，所以用笔记的方式记录我学习的历程，顺便作为一种中文资料的共享；这套笔记讲解每一种对象的属性未必是完全的，主要是讲解EXT4.0自带demo，要深入学习的可以去查看API，我的资源有EXT3.0的中文API今天学习的是：ArrayGrid，效果如下：首先先讲新手入门最头痛的问题，就是环境配置
    • Ext4.0学习笔记（1~3章 基础类） guangneng521 WebTechnology
      一直感觉Ext在前台方面效果做的比较酷，最近想抽时间学习一下，应用到自己的项目中；下面是在学习各种Ext相关文档、博客以及论坛过程中汇总的一些知识点以及解惑。（如有侵权请留言）概念：（1）ExtJS是一个面向开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。（以前是基于YAHOO-UI,现在已经完全独立了）（2
    • extjs Ext.window.Window窗口如何获取右上角关闭按钮添加监听事件 哓两々
      在公司我负责的项目是使用ext4.0版本的Ext框架，没人带，全是自学更着项目做，我也跟着项目做了大半年，我对ext4.0版本的不能说很熟悉，但做项目还是没问题的，因为搜索资料有限，出现问题，搜索都是12年的。今天遇到一个问题，后台说我提出关闭窗体前需要加验证，具体什么内容就不说了，关于项目保密问题。百度搜到了，但也有不对的，我就试试了，发现这个挺好用的，就记录一下，分享给大家。Ext.creat
    • JAVA视频资料百度网盘分享 nuc2015 Java
      1、javascript视频教程链接:点击打开链接密码:d9ei2、JPA视频教程链接:点击打开链接密码:fwwd3、马士兵hibernate视频教程链接：http://pan.baidu.com/s/1dFILSYH密码：nuwz4、JAVA电子书链接:http://pan.baidu.com/s/1o6xlV9w密码:347e5、ext4.0视频教程链接:http://pan.baidu.co
    • ext4.0绘制chart（柱状图，条形图） chart
        Jsp代码  <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>   <%   Stri
    • 项目建立和Ext结构说明 ext
      一、Ext4.0目录结构说明       1.Docs：说明文档       2.examples：例子       3.新建一个项目需要应用的单元和目录：      首先选中这些单元
    • 解读sencha touch移动框架的核心架构(二) Sencha Touch
      本来这行要详解Ext.extend的，但是发现网站有很详细的，那么就跳过去吧 为保持一个系列的分析，还是先搬过来吧，下章开始分析Ext4.0的新架构   在Java中，我们在实现继承的时候存在下面几个事实： 1， 准备两个类，他们用extends关键字链接起来 2， 如果超类没有默认构造函数，需要在子类构造函数中显式的super并传参，如果都是默认构造函数也可以super，不
    • ExtJs4基础概念总结 dreamsunday applicationextjs4configmixins
      Ext.application代表一个ExtJs富客户端的应用程序的入口点。从Ext4.0开始提出一个新的概念：ExtMVCapplicationArchitecture。这个概念用于帮助开发者以最快的速度组织起一个高效、稳定的的Ext前端。定义Ext.application的文件脚本一般起名为app.js。将这个文件加载到index.html中。app.js文件的作用如下：指定ExtFramew
    • Ext4.0的UI系统继承结构图 大漠穷秋 JavaScriptUI
             Ext4.0在UI的结构方面变化不是特别大，比较大规模的变化在于类的定义方式和mixin机制。      绿色的是form系组件，跟之前的版本一样，量比较多。      粉红色是toolbar系组件。      紫色是tip。      灰色是button。      快过年，有空来讨论一下这套机制，可用的eap工程见【附件】。 
    • ext4.0绘制chart（柱状图，条形图） phantome
       Jsp代码                   ext-4.0/resources/css/ext-all.css" />    ext-4.0/bootstrap.js">    ext-4.0/locale/ext-lang-zh_CN.js">    js/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text
    • Ext4.0中window窗体使用详解(常用属性) xmt1139057136 javahtml框架layoutext4
      先看看效果图首先在jsp中导入一下文件/extJs/resources/css/ext-all.css">/extJs/ext-all.js">下面看源码，源码中有注释，有看不懂的请联系博主。 Ext.onReady(function(){ Ext.create('Ext.window.Window',{ title:'Hello',//标题 titleAlign:'center',//标题显示位
    • EXT4.0 (4~9章)学习资料 赵小宾 extJs基础
      第四章MVC学习 从这个图中我们可以很清楚的看到M、V、C在ExtJS4.0里面所对应数据类型。 靠右边是对应的代码结构。 下描述一下这model、store、view、controller以及application这几者之间的关系。（1）application：它是MVC的入口，用来告诉ExtJS到那里去找对应js文件以及启动加载controller与view连个模块的代码。//打开动态加载js
    • ExtJs基础 赵小宾 ExtJs基础1
      EXT4.0(1~3章)学习资料概念：   （1）ExtJS是一个面向开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。（以前是基于YAHOO-UI,现在已经完全独立了）   （2）之所以说是框架，因为它能够帮助我们在页面上快速而简单构建各种各样的控件，简化我们自己去写庞大js实现；它是一种纯面向对象的JS框架
    • ext4.0绘制chart（柱状图，条形图） jackjobs chart
      Jsp代码ext-4.0/resources/css/ext-all.css"/>ext-4.0/bootstrap.js">ext-4.0/locale/ext-lang-zh_CN.js">js/ligerUI/skins/Aqua/css/ligerui-all.css"rel="stylesheet"type="text/css"/>css/core.css"rel="stylesheet
    • ext4.0绘制chart（柱状图，条形图） jackjobs chart
      Jsp代码ext-4.0/resources/css/ext-all.css"/>ext-4.0/bootstrap.js">ext-4.0/locale/ext-lang-zh_CN.js">js/ligerUI/skins/Aqua/css/ligerui-all.css"rel="stylesheet"type="text/css"/>css/core.css"rel="stylesheet
    • ext4.0绘制chart（柱状图，条形图） jackjobs chart
        ext-4.0/resources/css/ext-all.css"/> ext-4.0/bootstrap.js"> ext-4.0/locale/ext-lang-zh_CN.js"> js/ligerUI/skins/Aqua/css/ligerui-all.css"rel="stylesheet"type="text/css"/> css/core.c
    • ext4.0绘制chart（柱状图，条形图） jackjobs chart
        ext-4.0/resources/css/ext-all.css"/> ext-4.0/bootstrap.js"> ext-4.0/locale/ext-lang-zh_CN.js"> js/ligerUI/skins/Aqua/css/ligerui-all.css"rel="stylesheet"type="text/css"/> css/core.c
    • ext4.0绘制chart（柱状图，条形图） jackjobs chart
        ext-4.0/resources/css/ext-all.css"/> ext-4.0/bootstrap.js"> ext-4.0/locale/ext-lang-zh_CN.js"> js/ligerUI/skins/Aqua/css/ligerui-all.css"rel="stylesheet"type="text/css"/> css/core.c
    • ext4.0绘制chart（柱状图，条形图） jackjobs chart
        ext-4.0/resources/css/ext-all.css"/> ext-4.0/bootstrap.js"> ext-4.0/locale/ext-lang-zh_CN.js"> js/ligerUI/skins/Aqua/css/ligerui-all.css"rel="stylesheet"type="text/css"/> css/core.c
    • 关于Ext4.2中Grid的行背景色问题已经得到解决 zdlly617 JavaScriptcssext
         关于Ext中Grid的背景色在各个版本中的实现方式，如果你的应用中不引用用ext自己提供的css的话，那么以下解决方式部分对你起作用：   在Ext4.0以下可以使用的方式：   http://www.sencha.com/forum/showthread.php?253998-Grid-row-color-with-getRowClass-i
    • ext4.0学习 wanghaibing extjavaext
      阅读更多概念：（1）ExtJS是一个面向开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。（以前是基于YAHOO-UI,现在已经完全独立了）（2）之所以说是框架，因为它能够帮助我们在页面上快速而简单构建各种各样的控件，简化我们自己去写庞大js实现；它是一种纯面向对象的JS框架。扩展性相当的好，可以自己写扩展，自
    • ext4.0学习 wanghaibing extext java
      概念：    （1）ExtJS是一个面向开发RIA也即富客户端 的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。（以前是基于YAHOO-UI ,现在已经完全独立了）    （2）之所以说是框架，因为它能够帮助我们在页面上快速而简单构建各种各样的控件，简化我们自己去
    • struts2.18整合json和ExtJs4.0实例 yaorongzhen123
      struts2.18整合json和ExtJs4.0实例博客分类： ext4.0用到的jar包有：commons-beanutils-1.7.0.jar、commons-collections-3.2.jar、commons-fileupload-1.2.1.jar、commons-io-1.3.2.jar、commons-lang-2.3.jar、commons-logging-1.0.4.jar
    • ext4.0简单表格-Ext.grid.Panel whuissaxl 表格ext4.0Ext.grid.Panel
      Ext.require(["Ext.grid.*", "Ext.data.*"]);  Ext.onReady(function() {      Ext.QuickTips.init();        Ext.define("MyData", {          extend : "Ext.data.Model",          fields : ["id", {
    • Ext4.0 Checkbox的Grid需要选中后的分页保存 梦鱼丫丫 checkbox
      问题：    在grid里实现跨页选中，也就是当在第一页选中的checkbox，在Load到第二页时返回第一页时，已经选中的不能被显示为选中    解决思路：    1. 首选考虑，使用数组或者map等保存我们选中的记录          
    • Ext4.0 writer和reader详解 crazy123456789
      /** *  Reader:主要是将proxy数据代理，读取的数据按照不同的规则进行解析，将解析好的数据保存在Model中结构图 *   Ext.data.reader.Reader读取器跟类 *        Ext.data.reader.Jsonjson格式读取器 *       Ext.data.reader.Array扩展JSON的Array读取器 *       Ext.data.re
    • Js函数返回值 _wy_ jsreturn
      一、返回控制与函数结果，语法为：return 表达式;作用: 结束函数执行，返回调用函数，而且把表达式的值作为函数的结果 二、返回控制语法为：return;作用: 结束函数执行，返回调用函数，而且把undefined作为函数的结果 在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性
    • MySQL 的 char 与 varchar bylijinnan mysql
      今天发现，create table 时，MySQL 4.1有时会把 char 自动转换成 varchar 测试举例： CREATE TABLE `varcharLessThan4` ( `lastName` varchar(3) ) ; mysql> desc varcharLessThan4; +----------+---------+------+-
    • Quartz——TriggerListener和JobListener eksliang TriggerListenerJobListenerquartz
      转载请出自出处：http://eksliang.iteye.com/blog/2208624 一.概述 listener是一个监听器对象，用于监听scheduler中发生的事件，然后执行相应的操作；你可能已经猜到了，TriggerListeners接受与trigger相关的事件，JobListeners接受与jobs相关的事件。   二.JobListener监听器  j
    • oracle层次查询 18289753290 oracle；层次查询；树查询
      .oracle层次查询(connect  by) oracle的emp表中包含了一列mgr指出谁是雇员的经理，由于经理也是雇员，所以经理的信息也存储在emp表中。这样emp表就是一个自引用表，表中的mgr列是一个自引用列，它指向emp表中的empno列，mgr表示一个员工的管理者， select   empno,mgr,ename,sal  from e
    • 通过反射把map中的属性赋值到实体类bean对象中 酷的飞上天空 javaee泛型类型转换
      使用过struts2后感觉最方便的就是这个框架能自动把表单的参数赋值到action里面的对象中 但现在主要使用Spring框架的MVC，虽然也有@ModelAttribute可以使用但是明显感觉不方便。 好吧，那就自己再造一个轮子吧。 原理都知道，就是利用反射进行字段的赋值，下面贴代码 主要类如下：   import java.lang.reflect.Field; imp
    • SAP HANA数据存储：传统硬盘的瓶颈问题 蓝儿唯美 HANA
      SAPHANA平台有各种各样的应用场景，这也意味着客户的实施方法有许多种选择，关键是如何挑选最适合他们需求的实施方案。 在 《Implementing SAP HANA》这本书中，介绍了SAP平台在现实场景中的运作原理，并给出了实施建议和成功案例供参考。本系列文章节选自《Implementing SAP HANA》，介绍了行存储和列存储的各自特点，以及SAP HANA的数据存储方式如何提升空间压
    • Java Socket 多线程实现文件传输 随便小屋 javasocket
              高级操作系统作业，让用Socket实现文件传输，有些代码也是在网上找的，写的不好，如果大家能用就用上。 客户端类：   package edu.logic.client; import java.io.BufferedInputStream; import java.io.Buffered
    • java初学者路径 aijuans java
      学习Java有没有什么捷径?要想学好Java，首先要知道Java的大致分类。自从Sun推出Java以来，就力图使之无所不包，所以Java发展到现在，按应用来分主要分为三大块：J2SE,J2ME和J2EE,这也就是Sun ONE(Open Net Environment)体系。J2SE就是Java2的标准版，主要用于桌面应用软件的编程；J2ME主要应用于嵌入是系统开发，如手机和PDA的编程；J2EE
    • APP推广 aoyouzi APP推广
      一，免费篇 1，APP推荐类网站自主推荐 最美应用、酷安网、DEMO8、木蚂蚁发现频道等,如果产品独特新颖，还能获取最美应用的评测推荐。PS：推荐简单。只要产品有趣好玩，用户会自主分享传播。例如足迹APP在最美应用推荐一次，几天用户暴增将服务器击垮。 2，各大应用商店首发合作 老实盯着排期，多给应用市场官方负责人献殷勤。 3，论坛贴吧推广 百度知道，百度贴吧，猫扑论坛，天涯社区，豆瓣（
    • JSP转发与重定向 百合不是茶 jspservletJava Webjsp转发
        在servlet和jsp中我们经常需要请求,这时就需要用到转发和重定向;   转发包括;forward和include     例子;forwrad转发;  将请求装法给reg.html页面   关键代码;    req.getRequestDispatcher("reg.html
    • web.xml之jsp-config bijian1013 javaweb.xmlservletjsp-config
      1.作用：主要用于设定JSP页面的相关配置。 2.常见定义： <jsp-config> <taglib> <taglib-uri>URI(定义TLD文件的URI,JSP页面的tablib命令可以经由此URI获取到TLD文件)</tablib-uri> <taglib-location> TLD文件所在的位置
    • JSF2.2 ViewScoped Using CDI sunjing CDIJSF 2.2ViewScoped
      JSF 2.0 introduced annotation @ViewScoped; A bean annotated with this scope maintained its state as long as the user stays on the same view(reloads or navigation - no intervening views). One problem w
    • 【分布式数据一致性二】Zookeeper数据读写一致性 bit1129 zookeeper
      很多文档说Zookeeper是强一致性保证，事实不然。关于一致性模型请参考http://bit1129.iteye.com/blog/2155336    Zookeeper的数据同步协议 Zookeeper采用称为Quorum Based Protocol的数据同步协议。假如Zookeeper集群有N台Zookeeper服务器(N通常取奇数，3台能够满足数据可靠性同时
    • Java开发笔记 白糖_ java开发
      1、Map<key,value>的remove方法只能识别相同类型的key值   Map<Integer,String> map = new HashMap<Integer,String>(); map.put(1,"a"); map.put(2,"b"); map.put(3,"c"
    • 图片黑色阴影 bozch 图片
       .event{ padding:0;    width:460px;    min-width: 460px;    border:0px solid #e4e4e4;    height: 350px;    min-heig
    • 编程之美-饮料供货-动态规划 bylijinnan 动态规划
      import java.util.Arrays; import java.util.Random; public class BeverageSupply { /** * 编程之美 饮料供货 * 设Opt（V’，i）表示从i到n-1种饮料中，总容量为V’的方案中，满意度之和的最大值。 * 那么递归式就应该是：Opt（V’，i）=max{ k * Hi+Op
    • ajax大参数（大数据）提交性能分析 chenbowen00 WebAjax框架浏览器prototype
      近期在项目中发现如下一个问题 项目中有个提交现场事件的功能，该功能主要是在web客户端保存现场数据（主要有截屏，终端日志等信息）然后提交到服务器上方便我们分析定位问题。客户在使用该功能的过程中反应点击提交后反应很慢，大概要等10到20秒的时间浏览器才能操作，期间页面不响应事件。 根据客户描述分析了下的代码流程，很简单，主要通过OCX控件截屏，在将前端的日志等文件使用OCX控件打包，在将之转换为
    • [宇宙与天文]在太空采矿,在太空建造 comsci
           我们在太空进行工业活动...但是不太可能把太空工业产品又运回到地面上进行加工,而一般是在哪里开采,就在哪里加工,太空的微重力环境,可能会使我们的工业产品的制造尺度非常巨大....      地球上制造的最大工业机器是超级油轮和航空母舰,再大些就会遇到困难了,但是在空间船坞中,制造的最大工业机器,可能就没
    • ORACLE中CONSTRAINT的四对属性 daizj oracleCONSTRAINT
      ORACLE中CONSTRAINT的四对属性 summary:在data migrate时,某些表的约束总是困扰着我们,让我们的migratet举步维艰,如何利用约束本身的属性来处理这些问题呢?本文详细介绍了约束的四对属性: Deferrable/not deferrable, Deferred/immediate, enalbe/disable, validate/novalidate,以及如
    • Gradle入门教程 dengkane gradle
      一、寻找gradle的历程 一开始的时候，我们只有一个工程，所有要用到的jar包都放到工程目录下面，时间长了，工程越来越大，使用到的jar包也越来越多，难以理解jar之间的依赖关系。再后来我们把旧的工程拆分到不同的工程里，靠ide来管理工程之间的依赖关系，各工程下的jar包依赖是杂乱的。一段时间后，我们发现用ide来管理项程很不方便，比如不方便脱离ide自动构建，于是我们写自己的ant脚本。再后
    • C语言简单循环示例 dcj3sjt126com c
      # include <stdio.h> int main(void) { int i; int count = 0; int sum = 0; float avg; for (i=1; i<=100; i++) { if (i%2==0) { count++; sum += i; } } avg
    • presentModalViewController 的动画效果 dcj3sjt126com controller
      系统自带(四种效果)： presentModalViewController模态的动画效果设置：     [cpp]  view plain copy   UIViewController *detailViewController = [[UIViewController al
    • java 二分查找 shuizhaosi888 二分查找java二分查找
      需求：在排好顺序的一串数字中，找到数字T   一般解法：从左到右扫描数据，其运行花费线性时间O(N)。然而这个算法并没有用到该表已经排序的事实。 /** * * @param array * 顺序数组 * @param t * 要查找对象 * @return */ public stati
    • Spring Security（07）——缓存UserDetails 234390216 ehcache缓存Spring Security
             Spring Security提供了一个实现了可以缓存UserDetails的UserDetailsService实现类，CachingUserDetailsService。该类的构造接收一个用于真正加载UserDetails的UserDetailsService实现类。当需要加载UserDetails时，其首先会从缓存中获取，如果缓存中没
    • Dozer 深层次复制 jayluns VOmavenpo
      最近在做项目上遇到了一些小问题，因为架构在做设计的时候web前段展示用到了vo层，而在后台进行与数据库层操作的时候用到的是Po层。这样在业务层返回vo到控制层，每一次都需要从po-->转化到vo层，用到BeanUtils.copyProperties(source, target)只能复制简单的属性，因为实体类都配置了hibernate那些关联关系，所以它满足不了现在的需求，但后发现还有个很
    • CSS规范整理（摘自懒人图库） a409435341 htmlUIcss浏览器
         刚没事闲着在网上瞎逛，找了一篇CSS规范整理，粗略看了一下后还蛮有一定的道理，并自问是否有这样的规范，这也是初入前端开发的人一个很好的规范吧。 一、文件规范 1、文件均归档至约定的目录中。 具体要求通过豆瓣的CSS规范进行讲解： 所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中： 基本样式库 /css/core
    • C++动态链接库创建与使用 你不认识的休道人 C++dll
      一、创建动态链接库 1.新建工程test中选择”MFC [dll]”dll类型选择第二项"Regular DLL With MFC shared linked"，完成 2.在test.h中添加 extern “C” 返回类型 _declspec(dllexport)函数名(参数列表); 3.在test.cpp中最后写 extern “C” 返回类型 _decls
    • Android代码混淆之ProGuard rensanning ProGuard
      Android应用的Java代码，通过反编译apk文件（dex2jar、apktool）很容易得到源代码，所以在release版本的apk中一定要混淆一下一些关键的Java源码。 ProGuard是一个开源的Java代码混淆器（obfuscation）。ADT r8开始它被默认集成到了Android SDK中。 官网： http://proguard.sourceforge.net/
    • 程序员在编程中遇到的奇葩弱智问题 tomcat_oracle jquery编程ide
      　　现在收集一下：       　　排名不分先后，按照发言顺序来的。   1、Jquery插件一个通用函数一直报错，尤其是很明显是存在的函数，很有可能就是你没有引入jquery。。。或者版本不对 2、调试半天没变化：不在同一个文件中调试。这个很可怕，我们很多时候会备份好几个项目，改完发现改错了。有个群友说的好：   在汤匙
    • 解决maven-dependency-plugin (goals "copy-dependencies","unpack") is not supported xp9802 dependency
      解决办法：在plugins之前添加如下pluginManagement，二者前后顺序如下：   [html]  view plain copy   <build>           <pluginManagement
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他