zengshaotao
zengshaotao

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',  //<div id='form'></div>  
  9.             items:[{  
  10.                 xtype : 'textarea',  
  11.                 fieldLabel : '备注',  
  12.                 id:'memo',//字段组件id  
  13.                 labelSeparator :'：',//分隔符  
  14.                 labelWidth : 60,//标签宽度  
  15.                 width:200  
  16.             }],  
  17.             buttons:[{text:'确定',handler:showValue}]  
  18.         })  
  19.         function showValue(){  
  20.             var memo = testForm.getForm().findField('memo');//取得输入控件  
  21.             alert(memo.getValue());//取得控件值  
  22.         }  

 

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',   //<div id='form'></div>  
  7.             frame : true,  
  8.             height:150,  
  9.             width:250,  
  10.             defaultType: 'numberfield',//设置表单字段的默认类型  
  11.             defaults:{//统一设置表单字段默认属性  
  12.                 labelSeparator :'：',//分隔符  
  13.                 labelWidth : 80,//标签宽度  
  14.                 width : 200,//字段宽度  
  15.                 labelAlign : 'left',//标签对齐方式  
  16.                 msgTarget :'side'   //在字段的右边显示一个提示信息  
  17.             },  
  18.             items:[{  
  19.                 fieldLabel:'整数',  
  20.                 hideTrigger : true,//隐藏微调按钮  
  21.                 allowDecimals : false,//不允许输入小数  
  22.                 nanText :'请输入有效的整数'//无效数字提示  
  23.             },{  
  24.                 fieldLabel:'小数',  
  25.                 decimalPrecision : 2,//精确到小数点后两位  
  26.                 allowDecimals : true,//允许输入小数  
  27.                 nanText :'请输入有效的小数'//无效数字提示  
  28.             },{  
  29.                 fieldLabel:'数字限制',  
  30.                 baseChars :'12345'//输入数字范围  
  31.             },{  
  32.                 fieldLabel:'数值限制',  
  33.                 maxValue : 100,//最大值  
  34.                 minValue : 50//最小值  
  35.             }]  
  36.         });  


触发字段： 

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 : '<b>ExtJS4登场</b>',  
  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('提示','产品简介加载失败<br>失败原因：'+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. %>  

你可能感兴趣的:(extjs4)

  • 2014年4月份第1周51Aspx源码发布详情 weixin_30647065 数据库人工智能测试
    基于Extjs4+MVC4权限管理源码2014-3-31[VS2012]源码描述：20140331更新：修改部门管理中bug20140303更新：增加部门管理模块，主要包含部门添加，编辑，删除，启用，禁用等功能。20140219更新：增加登录人数饼形图图模块。20140128更新信息：登录次数锁定功能及时间限制，修改菜单模块，角色模块，用户模块中的一些小bug。kindeditor网络图片本地化源
  • 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
  • 北风课堂:超过300 门免费IT 课程 ambition_forever 语言基础
    全部免费！！！！（请复制地址浏览器打开）大家抓紧上去看看吧:http://edu.ibeifeng.com/实战：Flex4.X实战在线书店项目初步构建http://edu.ibeifeng.com/view-index-id-134.html深入学习ExtJs4.1的布局及常用控件http://edu.ibeifeng.com/view-index-id-129.html专题-深入JavaOOP
  • ExtJs4 Group 分组如何实现显示分组名称 sword_happy extjsextjs4groupFieldgroup
    ExtJs4store中进行group分组varresourceStore=newSch4.data.ResourceStore({model:"resourceModel",groupField:'DOCK_NO',sorters:['DOCK_NO','Name'],storeId:'CS07_ResourceStore',proxy:{type:'ajax',url:"getResource
  • ExtJS4.2 Ext.grid.panel Store更改后刷新表格 weixin_30697239
    //////Preparestore//////preparefieldsandcolumnsvar__fields=[];var__columns=[];for(varjj=0;jj
  • Extjs4组件学习--Ext.grid.Panel 舒克frz ExtJsextjsemailheaderjsontablefilter
    Ext.grid.Panelxtype:gridpanel,gridGridsareanexcellentwayofshowinglargeamountsoftabulardataontheclientside.Essentiallyasupercharged,GridPanelmakesiteasytofetch,sortandfilterlargeamountsofdata.Gridsarec
  • extjs4 grid 刷新数据时不改变滚动条位置 叹君心 ExtJs界面ExtJs滚动条Grid刷新位置
    每次刷新Grid数据的时候滚动条都会重置到页面首部,这样在去寻找刚才查看的记录很不方便,文档中也没有说明如何配置,查看了很多文件发现他隐藏着这样一个配置,当设置为false时,刷新滚动条的时候就不会改变之前的滚动条位置;配置项如下：invalidateScrollerOnRefresh:false
  • Extjs4动态显示actioncolumn zilanhu
    简单记录一下actioncolumn的动态隐藏，分为两个部分：样式隐藏，使用getClass根据条件返回样式，可以为隐藏this.disabledCls功能隐藏，否则的话actioncolumn虽然样式产生了变化，比如隐藏或者半透明（也就是disable），但是事件依然可以触发。所以需要设置isDisabledcolumns.push({xtype:'actioncolumn',text:'操作'
  • ExtJs4 与MVC E_eric
    BuildinganSencha’sExtJS4.0MVCApplicationWithMicrosoft’sASP.NETMVC3Series/BasicsNovember4,2011ByPeterKellner16CommentsPart1(this)Basics(mostlyserverside)Part2ExtJSClientSideDetails*Forthosewhoareinters
  • ExtJS4学习笔记之window的创建 倾斜的水瓶座 extjsstylesheetfunctionxhtmlhtmlext
    Extjs4,创建Ext组件有了新的方式，就是Ext.create(....)，而且可以使用动态加载JS的方式来加快组件的渲染，我们再也不必一次加载已经达到1MB的ext-all.js了，本文介绍如何在EXTJS4中创建一个window。代码如下：窗口实例Ext.require('Ext.window');Ext.onReady(function(){Ext.create('Ext.Window'
  • 「微前端实践」使用Vue+qiankun微前端方案重构老项目的本地验证 yinmochunCoder
    10月份换了新的工作，参与完一个月的需求迭代后，接到了项目重构的任务。简单来说，需要在短时间内提出方案设想，同时进行本地验证，最终需要拿出一套技术替换方案来。于是，埋头苦干了一个月，总算干了点成绩出来，今天把当时的思考和实践做个简单总结，就当是个复盘吧。一、老项目现状最初接触到的老项目，使用到的前端技术栈主要是（jQuery1.8+layui-v2.5.4+ExtJS4.2.1.883），当时拿到
  • 04.插件之安装Spket插件 胖先森
    支持Extjs4.1.1及jQuery1.8.3spket官网下载最新的jar安装包当前最新的是spket1.6.23,好像不再更新了spket官网下载地址：http://www.spket.com/download.html下载spket的破解补丁spket1.6.23可用的破解补丁的下载地址:包含所有的资料https://yunpan.cn/cS5vTxtYFpcDt访问密码229f安装spk
  • EXTJS4 MVC框架 yangxiaojun9238
    在EXT的SDK中包含有一篇文章写的很好，可以作为广大初学EXT的ITer们的必读文章，因为全文都是英文，读起来非常不方便，所以在这里将该篇文章用本人的语言压缩成以下的博文：（仅供参考）原文地址请参考：https://github.com/sndpl/extjs4_mvc_skel由4楼二胖提供，或者可以直接到ext官网下载SDK.在MVC的布局模式中，所有的类都放置在app文件夹中，这个文件夹还
  • 关于Class中的ConstantPool属性 dengzhao3993 java
    里面的每个项是怎么决定的？转载于:https://www.cnblogs.com/extjs4/p/9268397.html
  • ExtJS4.x Grid导出到Excel(详解) u010968800 uxjavascript
    本人菜鸟一枚，看了网上很多例子，操作均不够具体，且大都用的是同一个源文件（http://blog.csdn.net/lc448986375/article/details/8205362），想来定是受了原博主的毒害不浅^_^。有鉴于此，本人特此做一较为详细的解说，望批评指正，多多交流为善1.下载并解压文件夹ExtToExcel.zip;（csdn资源几次传不上去，开源中国貌似又不支持，无奈用了51
  • Extjs4中的Form之displayfield的使用 Sloan_JCY Extjs4
    只是用来展示，不能对其操作Ext.onReady(function(){Ext.QuickTips.init();Ext.create("Ext.form.Panel",{title:'本地Display实例',renderTo:'formDemo',bodyPadding:'5555',height:100,width:270,frame:true,defaults:{labelSeparato
  • Extjs4中如何获取组件（通过ID或通过Name） Sloan_JCY Extjs4Extjs4从零开始
    Extjs4中如何获取组件（通过ID或通过Name）通过Id方式：Ext.getCmp('my_form')；通过组件名称：this.up('form').getForm()；//获取表单
  • 出现An internal error occurred during: "Building workspace".的解决方法 流水无Qing extjs
    一、当在eclipse中的web工程中增加了extjs4，出现Aninternalerroroccurredduring:"Buildingworkspace".Javaheapspace错误。解决办法：导入ExtJS包，这样会卡死eclipse的。去到工程根目录下，找到.project，用记事本打开，把两处删除掉：第一处：org.eclipse.wst.jsdt.core.javascriptV
  • ExtJS4 ajax请求同步异步问题 hu8471479 Extjs
    今天在写代码过程中遇到一个奇怪的问题，事情是这样的，我写了一个简单的页面用来删除选中的用户，请看下面：因为后台的servlet的代码实现了根据用户名来删除一条记录，所以我在前台的ExtJS代码里面用了循环：functiondeleteUsers(userList){//删除用户varmsgTip=Ext.MessageBox.show({//显示正常删除的信息提示框title:'提示',width
  • Extjs4 设置panel内部的gridpanel的滚动条 莫问初心 Extjs浏览器
    当grid的实际宽度大于其父容器panel的时候，超出的1部分表格被默认隐藏，滚动条不见了。这时候我们一般要做两件事1.把滚动条找回来，2.将滚动条放到panel上，这样子才能最大程度上满足用户使用感受，解决方案如下：其实很简单，只要配置下grid两个属性：1.width:2620,（grid的真实宽度，值一般都比较大）；2.bodyStyle:'overflow-x:hidden;overflo
  • ExtJS4.x Grid导出到Excel(详解) 莫问初心 ExtJS4.xGrid导出到ExGrid导出到Excelext4.2.1Extjs详解
    本人菜鸟一枚，看了网上很多例子，操作均不够具体，且大都用的是同一个源文件（http://blog.csdn.net/lc448986375/article/details/8205362），想来定是受了原博主的毒害不浅^_^。有鉴于此，本人特此做一较为详细的解说，望批评指正，多多交流为善1.下载并解压文件夹ExtToExcel.zip;（csdn资源几次传不上去，开源中国貌似又不支持，无奈用了51
  • extjs4 formpanel 表单布局 无奈的伤城 EXTJS
    /*************formlayout********************/varfield8=Ext.create('Ext.form.field.Date',{fieldLabel:'开始日期*',name:'field8',format:'Y-m-d',anchor:'96%',value:'2015-11-01',allowBlank:false})varfield9=Ext
  • Extjs4之 grid中加入合计行（summary ） 无奈的伤城 EXTJS
    Ext.onReady(function(){Ext.define('TestResult',{extend:'Ext.data.Model',fields:['student',{name:'mark',type:'int'}]});Ext.create('Ext.grid.Panel',{width:200,height:140,renderTo:document.body,features:
  • EXTJS4之MVC架构 Jovic-cai JavaScript世界
    目前我们在构建我的应用程序时，采用的架构也有好多，其中我们最常用的也是最基础就是Model-View-Control(MVC),不管我们在构建什么类型的应用程序，我们都离不开MVC的设计。在EXTJS4中，也提供的MVC的设计思想，下面我们就来看一下，在EXTJS4中如何应用MVC的架构。1、首先我们先简单介绍一下，4中MVC各层的基本概念。Model:Model层，说白了，具体就是指EXT中的E
  • ExtJS 4 MVC架构讲解 – ExtJS4中文教程 Mr.Gu 测试jsonjavascript
    ExtJS4MVC架构讲解–ExtJS4中文教程Postedon2012/07/02byishowshaoExtJSMVC架构讲解本文地址http://www.showframework.com/2012/07/extjs-mvc-architecture/本文PDF下载大规模客户端应用通常不好实现不好组织也不好维护，因为功能和人力的不断增加，这些应用的规模很快就会超出掌控能力，ExtJS4带来了
  • 使用EXtjs6.2构建web项目 weixin_30871701 开发工具javascript
    使用EXtjs6.2构建web项目一、项目简介众所周知ext是一款非常强大的表格控件，尤其是里边的grid为用户提供了非常多的功能，现在主流的还是用extjs4.0—4.2，但是更高一点的版本更加符合人的审美要求。因此，在今天咱们构建一下ext6.2版本的web项目。二、项目准备ExtJS6.2GPL正式版下载地址：https://www.sencha.com/legal/gpl/下载完成之后项目
  • EXTJS4自学手册——EXT基本方法、属性（mixins多继承、statics、require） weixin_30786617 javascript
    1.mixins说明：类似于面向对象中的多继承Ext.onReady(function(){//创建一个类，类名：TextClass，具有两个属性：A、BExt.define('TextClass',{A:'a',B:'b'});//创建一个类，类名：TextClass，具有两个属性：A、BExt.define('TextClass2',{C:'c',write:function(){alert(
  • Extjs的Requiers作用 王一洋 Javascriptweb前端技术
    有的时候项目中要写一些扩展组件，随着扩展组件的增加，会造成有的页面需要使用，而有的页面不需要使用的问题，这对组件的js文件的引用造成了烦恼：如果每个页面都去引用的时候会造成浏览器打开页面的流量的增加而影响资源，如果需要的时候引用管理起来又很麻烦，Extjs4.0帮我们解决了这个问题，那就是Ext.requires。它可以实现根据我们的需要动态加在所需要的组件文件，很灵活也很方便。下面我们用例子进行
  • Extjs4.0 之Ext.Class 属性详解 (alias/mixins /uses/requires/singleton等属性) kunlong0909 Extjs
    Ext.Class属性详解:1,alias:相当于别名一样,可以起多个,可以通过xtype和Ext.widget()创建实例:Js代码Ext.define('SimplePanel',{extend:'Ext.panel.Panel',alias:['widget.simplepanel_007','widget.simplepanel_008'],title:'Yeah!'});//通过Ext.
  • Sencha Cmd 辅助开发ExtJS4 MVC架构项目 jwl_yifeng
    1、环境：SenchaCmd下载地址：http://cdn.sencha.com/cmd/3.1.1.274/SenchaCmd-3.1.1.274-windows.exe.zipExtJS4.1.1a下载地址：http://cdn.sencha.com/ext-4.1.1a-gpl.zipRuby下载地址：http://rubyinstaller.org/downloadsSenchaCmd现在
  • JAVA基础 灵静志远 位运算加载Date字符串池覆盖
    一、类的初始化顺序 1 （静态变量，静态代码块）-->（变量，初始化块）--> 构造器 同一括号里的，根据它们在程序中的顺序来决定。上面所述是同一类中。如果是继承的情况，那就在父类到子类交替初始化。 二、String 1 String a = "abc"; JAVA虚拟机首先在字符串池中查找是否已经存在了值为"abc"的对象，根
  • keepalived实现redis主从高可用 bylijinnan redis
    方案说明 两台机器（称为A和B），以统一的VIP对外提供服务 1.正常情况下，A和B都启动，B会把A的数据同步过来（B is slave of A） 2.当A挂了后，VIP漂移到B；B的keepalived 通知redis 执行：slaveof no one，由B提供服务 3.当A起来后，VIP不切换，仍在B上面；而A的keepalived 通知redis 执行slaveof B，开始
  • java文件操作大全 0624chenhong java
    最近在博客园看到一篇比较全面的文件操作文章，转过来留着。 http://www.cnblogs.com/zhuocheng/archive/2011/12/12/2285290.html 转自http://blog.sina.com.cn/s/blog_4a9f789a0100ik3p.html 一.获得控制台用户输入的信息    &nbs
  • android学习任务 不懂事的小屁孩 工作
    任务 完成情况 搞清楚带箭头的pupupwindows和不带的使用 已完成 熟练使用pupupwindows和alertdialog，并搞清楚两者的区别 已完成 熟练使用android的线程handler,并敲示例代码 进行中 了解游戏2048的流程，并完成其代码工作 进行中-差几个actionbar 研究一下android的动画效果，写一个实例 已完成 复习fragem
  • zoom.js 换个号韩国红果果 oom
    它的基于bootstrap 的 https://raw.github.com/twbs/bootstrap/master/js/transition.js  transition.js模块引用顺序 <link rel="stylesheet" href="style/zoom.css"> <script src=&q
  • 详解Oracle云操作系统Solaris 11.2 蓝儿唯美 Solaris
    当Oracle发布Solaris 11时，它将自己的操作系统称为第一个面向云的操作系统。Oracle在发布Solaris 11.2时继续它以云为中心的基调。但是，这些说法没有告诉我们为什么Solaris是配得上云的。幸好，我们不需要等太久。Solaris11.2有4个重要的技术可以在一个有效的云实现中发挥重要作用：OpenStack、内核域、统一存档（UA）和弹性虚拟交换（EVS）。 
  • spring学习——springmvc（一） a-john springMVC
    Spring MVC基于模型-视图-控制器（Model-View-Controller，MVC）实现，能够帮助我们构建像Spring框架那样灵活和松耦合的Web应用程序。   1，跟踪Spring MVC的请求 请求的第一站是Spring的DispatcherServlet。与大多数基于Java的Web框架一样，Spring MVC所有的请求都会通过一个前端控制器Servlet。前
  • hdu4342 History repeat itself-------多校联合五 aijuans 数论
    水题就不多说什么了。 #include<iostream>#include<cstdlib>#include<stdio.h>#define ll __int64using namespace std;int main(){ int t; ll n; scanf("%d",&t); while(t--)
  • EJB和javabean的区别 asia007 beanejb
    EJB不是一般的JavaBean,EJB是企业级JavaBean,EJB一共分为3种,实体Bean,消息Bean,会话Bean,书写EJB是需要遵循一定的规范的,具体规范你可以参考相关的资料.另外,要运行EJB,你需要相应的EJB容器,比如Weblogic,Jboss等,而JavaBean不需要,只需要安装Tomcat就可以了   1.EJB用于服务端应用开发, 而JavaBeans
  • Struts的action和Result总结 百合不是茶 strutsAction配置Result配置
        一:Action的配置详解:      下面是一个Struts中一个空的Struts.xml的配置文件     <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC &quo
  • 如何带好自已的团队 bijian1013 项目管理团队管理团队
    在网上看到博客" 怎么才能让团队成员好好干活"的评论，觉得写的比较好。 原文如下： 我做团队管理有几年了吧，我和你分享一下我认为带好团队的几点： 1.诚信         对团队内成员，无论是技术研究、交流、问题探讨，要尽可能的保持一种诚信的态度，用心去做好，你的团队会感觉得到。 2.努力提
  • Java代码混淆工具 sunjing ProGuard
    Open Source Obfuscators ProGuard http://java-source.net/open-source/obfuscators/proguardProGuard is a free Java class file shrinker and obfuscator. It can detect and remove unused classes, fields, m
  • 【Redis三】基于Redis sentinel的自动failover主从复制 bit1129 redis
    在第二篇中使用2.8.17搭建了主从复制，但是它存在Master单点问题，为了解决这个问题，Redis从2.6开始引入sentinel，用于监控和管理Redis的主从复制环境，进行自动failover，即Master挂了后，sentinel自动从从服务器选出一个Master使主从复制集群仍然可以工作，如果Master醒来再次加入集群，只能以从服务器的形式工作。   什么是Sentine
  • 使用代理实现Hibernate Dao层自动事务 白糖_ DAOspringAOP框架Hibernate
    都说spring利用AOP实现自动事务处理机制非常好，但在只有hibernate这个框架情况下，我们开启session、管理事务就往往很麻烦。 public void save(Object obj){ Session session = this.getSession(); Transaction tran = session.beginTransaction(); try
  • maven3实战读书笔记 braveCS maven3
    Maven简介 是什么？ Is a software project management and comprehension tool.项目管理工具 是基于POM概念(工程对象模型) [设计重复、编码重复、文档重复、构建重复，maven最大化消除了构建的重复] [与XP：简单、交流与反馈；测试驱动开发、十分钟构建、持续集成、富有信息的工作区]     功能：
  • 编程之美-子数组的最大乘积 bylijinnan 编程之美
    public class MaxProduct { /** * 编程之美 子数组的最大乘积 * 题目: 给定一个长度为N的整数数组，只允许使用乘法，不能用除法，计算任意N-1个数的组合中乘积中最大的一组，并写出算法的时间复杂度。 * 以下程序对应书上两种方法，求得“乘积中最大的一组”的乘积——都是有溢出的可能的。 * 但按题目的意思，是要求得这个子数组，而不
  • 读书笔记-2 chengxuyuancsdn 读书笔记
    1、反射 2、oracle年-月-日 时-分-秒 3、oracle创建有参、无参函数 4、oracle行转列 5、Struts2拦截器 6、Filter过滤器(web.xml) 1、反射 (1)检查类的结构 在java.lang.reflect包里有3个类Field,Method,Constructor分别用于描述类的域、方法和构造器。 2、oracle年月日时分秒 s
  • [求学与房地产]慎重选择IT培训学校 comsci it
          关于培训学校的教学和教师的问题,我们就不讨论了,我主要关心的是这个问题       培训学校的教学楼和宿舍的环境和稳定性问题       我们大家都知道，房子是一个比较昂贵的东西，特别是那种能够当教室的房子... &nb
  • RMAN配置中通道(CHANNEL)相关参数 PARALLELISM 、FILESPERSET的关系 daizj oraclermanfilespersetPARALLELISM
    RMAN配置中通道(CHANNEL)相关参数 PARALLELISM 、FILESPERSET的关系 转 PARALLELISM --- 我们还可以通过parallelism参数来指定同时"自动"创建多少个通道： RMAN > configure device type disk parallelism 3 ; 表示启动三个通道，可以加快备份恢复的速度。
  • 简单排序:冒泡排序 dieslrae 冒泡排序
    public void bubbleSort(int[] array){ for(int i=1;i<array.length;i++){ for(int k=0;k<array.length-i;k++){ if(array[k] > array[k+1]){
  • 初二上学期难记单词三 dcj3sjt126com sciet
    concert 音乐会 tonight 今晚 famous 有名的；著名的 song 歌曲 thousand 千 accident 事故；灾难 careless 粗心的，大意的 break 折断；断裂；破碎 heart 心（脏） happen  偶尔发生，碰巧 tourist 旅游者；观光者 science （自然）科学 marry 结婚 subject 题目；
  • I.安装Memcahce 1. 安装依赖包libevent Memcache需要安装libevent,所以安装前可能需要执行 Shell代码 收藏代码 dcj3sjt126com redis
    wget http://download.redis.io/redis-stable.tar.gz tar xvzf redis-stable.tar.gz cd redis-stable make   前面3步应该没有问题，主要的问题是执行make的时候，出现了异常。 异常一： make[2]: cc: Command not found 异常原因：没有安装g
  • 并发容器 shuizhaosi888 并发容器
       通过并发容器来改善同步容器的性能，同步容器将所有对容器状态的访问都串行化，来实现线程安全，这种方式严重降低并发性，当多个线程访问时，吞吐量严重降低。    并发容器ConcurrentHashMap       替代同步基于散列的Map，通过Lock控制。   &nb
  • Spring Security（12）——Remember-Me功能 234390216 Spring SecurityRemember Me记住我
    Remember-Me功能   目录   1.1     概述 1.2     基于简单加密token的方法 1.3     基于持久化token的方法 1.4     Remember-Me相关接口和实现
  • 位运算 焦志广 位运算
    一、位运算符Ｃ语言提供了六种位运算符： & 按位与 | 按位或 ^ 按位异或 ~ 取反 << 左移 >> 右移 1. 按位与运算 按位与运算符"&"是双目运算符。其功能是参与运算的两数各对应的二进位相与。只有对应的两个二进位均为1时，结果位才为1 ，否则为0。参与运算的数以补码方式出现。 例如：9&am
  • nodejs 数据库连接 mongodb mysql liguangsong mongodbmysqlnode数据库连接
    1.mysql 连接    package.json中dependencies加入     "mysql":"~2.7.0"    执行 npm install      在config 下创建文件 database.js    
  • java动态编译 olive6615 javaHotSpotjvm动态编译
        在HotSpot虚拟机中，有两个技术是至关重要的，即动态编译(Dynamic compilation)和Profiling。     HotSpot是如何动态编译Javad的bytecode呢？Java bytecode是以解释方式被load到虚拟机的。HotSpot里有一个运行监视器，即Profile Monitor,专门监视
  • Storm0.9.5的集群部署配置优化 roadrunners 优化storm.yaml
    nimbus结点配置（storm.yaml）信息： # Licensed to the Apache Software Foundation (ASF) under one # or more contributor license agreements. See the NOTICE file # distributed with this work for additional inf
  • 101个MySQL 的调节和优化的提示 tomcat_oracle mysql
    　1. 拥有足够的物理内存来把整个InnoDB文件加载到内存中——在内存中访问文件时的速度要比在硬盘中访问时快的多。 　　2. 不惜一切代价避免使用Swap交换分区 – 交换时是从硬盘读取的，它的速度很慢。 　　3. 使用电池供电的RAM（注：RAM即随机存储器）。 　　4. 使用高级的RAID（注：Redundant Arrays of Inexpensive Disks，即磁盘阵列
  • zoj 3829 Known Notation(贪心) 阿尔萨斯 ZOJ
    题目链接：zoj 3829 Known Notation 题目大意：给定一个不完整的后缀表达式，要求有2种不同操作，用尽量少的操作使得表达式完整。 解题思路：贪心，数字的个数要要保证比∗的个数多1，不够的话优先补在开头是最优的。然后遍历一遍字符串，碰到数字+1，碰到∗-1,保证数字的个数大于等1，如果不够减的话，可以和最后面的一个数字交换位置（用栈维护十分方便），因为添加和交换代价都是1
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他