Goal: Know how to create the form panel Understand the application of xtype type in the form panel Know how to validate, bind, and get the value of the form panel Comprehensive application of the form panel (play with it) Content: The first thing we need to understand is that FormPanel also inherits the panel component. So it has the attributes of panel It is actually very simple to create a form panel var MyformPanel=new Ext.form.formpanel(); Like the panel, the form panel only appears as a container, and we need to use items to add each Control elements to enrich our form panel, defaults:{}, this attribute extracts the common attributes of each component in items
is very useful for xtype: in the form panel, there is no need to change it every time Use new to create a component, which defines the type of the component and allows the component to be rendered after loading.
function Read2() { Ext.QuickTips.init(); var MyForm=new Ext.form.FormPanel({ title:'Form Application', width:300, x:300, y:50, floating:true, tools:[{id:'close'}], frame:true, bodyStyle:'padding:10px 0px 1px 1px', labelSeparator:':', labelAlign:'right', renderTo:Ext.getBody(),//Why can't it be used here' id1' defaults:{xtype:'textfield',width:150,allowBlank:false,msgTarget:'side'},//Extract common attributes items:[ { fieldLabel:' Username', name:'username', id:'user', emptyText:'Please enter username', blankText:'Please enter username' }, { fieldLabel:'user password', name:'userpassword', id:'password', inputType:'password',//It also includes radiocheck text (default ) filepassword, etc. blankText:'Please enter password'
Note: renderTo:'id1' At this time, the form panel display fails. I have been thinking about it for a long time and I don’t know why.
Second, application instructions for basic form construction ( Usually we use xtype to describe the type of components in items) Application of fieldset
function Read3() { 2 Ext.QuickTips.init();//Initialization tips 3 Ext.apply(Ext.form.VTypes,{ 4 password:function( val,field){//val refers to the text box value here, field refers to this text box component, everyone must understand this meaning 5 if(field.confirmTo){//confirmTo is our custom configuration parameter, generally Used to save the id value of another component 6 var pwd=Ext.get(field.confirmTo);//Get the value of the id of confirmTo 7 return (val==pwd.getValue()); 8 } 9 return true; } }); var MyformPanel=new Ext.form.FormPanel({ title:'fieldset application', renderTo:Ext.getBody(), frame:true, width:550, x:400, y:50, draggable:{ insertProxy: false,/ /Do not display the original position with a dotted line when dragging onDrag: function(e){ var pel = this.proxy.getEl(); this.x = pel.getLeft(true); this.y = pel.getTop(true);//Get the coordinates of the panel when dragging var s = this.panel.getEl().shadow; if (s){ s.realign (this.x, this.y, pel.getWidth(), pel.getHeight()); } }, endDrag : function(e){ this.panel.setPosition( this.x, this.y);//Move to the final position } }, plain:true, floating:true, items:[ { xtype:'fieldset', checkboxToggle:true, checkboxName:'user', title:'user information', collapsible:true, autoHeight:true, autoWidth:true, labelSeparator:':', labelAlign:'right', labelWidth:70, defaults:{width:150,allowBlank:false,xtype:'textfield'}, items:[ { fieldLabel:'username', emptyText:'陈杰强', id:'user', name:'userName', blankText:'Please enter user name', anchor:'95%' }, { fieldLabel:'User password', inputType:'password',// password text checkbox rodio id:'password', name:'userpassword', value:'0717', blankText:'Please enter user password', anchor:'95%' }, { fieldLabel:'Confirm password', id:'password2', name:'userpassword2', inputType:'password', vtype :'password', vtypeText:'The passwords entered twice are inconsistent', confirmTo:'userpassword', anchor:'95%' }, { xtype :"datefield", fieldLabel:"date of birth", anchor:"95%" }, { fieldLabel:'My Blog', value:' http://www.cnblogs.com/chenjq0717', vtype:'url', vtypeText:'Not a valid url', id1:'myblog', name:'myblog ', anchor:'95%' }, { //alpha can only enter letters, not others (such as numbers, special symbols, etc.) //2.alphanum //Only letters and numbers can be entered, others cannot be entered //3.email//email verification, the required format is "langsin@gmail.com" //4.url//url format verification, The required format is http://www.langsin.com fieldLabel:'email', vtype:'email', vtypeText:'not a valid email', name:' email', anchor:'95%' }, { xtype:"panel", layout:"column", fieldLabel:'gender', isFormField:true, items:[{ columnWidth:.5, xtype:"radio", boxLabel:"male", name:"sex" / /inputValue },{ columnWidth:.5, checked:true, xtype:"radio", boxLabel:"female", name:"sex" }] }, { xtype:"panel", layout:"column",//It can also be a table to implement multi-column layout fieldLabel:'hobby' , isFormField:true,//Very important, otherwise the panel will not display fieldLabel by default items:[{ columnWidth:.5,//The width is 50% xtype: "checkbox", boxLabel: "Football", //The text displayed on the right side of the check box name: "" },{ columnWidth:.5, xtype: "checkbox", boxLabel:"Basketball", name:"" }] }, { xtype:'combo', fieldLabel:'User's hometown', name:'family', store:<%=getfamilyData() %>,//Call the background variable emptyText: 'Please select your hometown' }, { xtype :"htmleditor", id:"myinfo", fieldLabel:"Personal description", anchor:"99%" } ] } ] }); }
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn