今天我们要看看强大的FormPanel,也是继承panel组件的使用。
首先弄清楚这个问题,创建的时候: 
ExtJS学习笔记(2)-From的类型,Ext.FormPanel//查看源代码便知,两种方法是一样的
ExtJS学习笔记(2)-From的类型,Ext.FormPanel
Ext.form.FormPanel = Ext.FormPanel;
我们还是从最简单的代码实例开始吧:
ExtJS学习笔记(2)-From的类型,Ext.FormPanel<!--html代码-->
ExtJS学习笔记(2)-From的类型,Ext.FormPanel
<body>
ExtJS学习笔记(2)-From的类型,Ext.FormPanel
<div id="form1"></div>
ExtJS学习笔记(2)-From的类型,Ext.FormPanel
</body>

ExtJS学习笔记(2)-From的类型,Ext.FormPanel
ExtJS学习笔记(2)-From的类型,Ext.FormPanel//js代码
ExtJS学习笔记(2)-From的类型,Ext.FormPanel);

都是通过items属性参数把表单元素添加到这个表单中。
我们发现两个文本框的类型和狂度是一样的,我们还可以把items里面的相同项提取出来,以简化代码:
ExtJS学习笔记(2)-From的类型,Ext.FormPanel//简化代码,和上面的代码效果一样
ExtJS学习笔记(2)-From的类型,Ext.FormPanel);

关于inputType,参数如下:
//input的各种类型(这个大家都知道,就只列了几个典型的)
ExtJS学习笔记(2)-From的类型,Ext.FormPanel
radio
ExtJS学习笔记(2)-From的类型,Ext.FormPanelcheck
ExtJS学习笔记(2)-From的类型,Ext.FormPaneltext(默认)
ExtJS学习笔记(2)-From的类型,Ext.FormPanelfile
ExtJS学习笔记(2)-From的类型,Ext.FormPanelpassword等等

关于FormPanel的配置参数,请主要参考panel的参数,这里列举另外两个:
ExtJS学习笔记(2)-From的类型,Ext.FormPanel1.labelAlign:fieldlabel的排列位置,默认为"left",其他两个枚举值是"center","right"
ExtJS学习笔记(2)-From的类型,Ext.FormPanel
2.labelWidth:fieldlabel的占位宽
ExtJS学习笔记(2)-From的类型,Ext.FormPanel
3.method:"get""post"
ExtJS学习笔记(2)-From的类型,Ext.FormPanel
4.url:"提交的地址"
ExtJS学习笔记(2)-From的类型,Ext.FormPanel
5.submit:提交函数 //稍后我们一起详细分析

1.FormPanel的fieldset应用
ExtJS学习笔记(2)-From的类型,Ext.FormPanel//把前面代码重写items属性
ExtJS学习笔记(2)-From的类型,Ext.FormPanel
items:[
ExtJS学习笔记(2)-From的类型,Ext.FormPanel       ]

ExtJS学习笔记(2)-From的类型,Ext.FormPanel
这里的combox组件只是简单的演示,具体还是要深入了解,我们会在以后的内容中详细探讨。
2.关于xtype的类型,在extjs的form表单(其他的请参考api)中已经定义的有:
ExtJS学习笔记(2)-From的类型,Ext.FormPanelForm components
ExtJS学习笔记(2)-From的类型,Ext.FormPanel
---------------------------------------
ExtJS学习笔记(2)-From的类型,Ext.FormPanelform             Ext.FormPanel
ExtJS学习笔记(2)-From的类型,Ext.FormPanelcheckbox         Ext.form.Checkbox
ExtJS学习笔记(2)-From的类型,Ext.FormPanelcombo            Ext.form.ComboBox
ExtJS学习笔记(2)-From的类型,Ext.FormPaneldatefield        Ext.form.DateField
ExtJS学习笔记(2)-From的类型,Ext.FormPanelfield            Ext.form.Field
ExtJS学习笔记(2)-From的类型,Ext.FormPanelfieldset         Ext.form.FieldSet
ExtJS学习笔记(2)-From的类型,Ext.FormPanelhidden           Ext.form.Hidden
ExtJS学习笔记(2)-From的类型,Ext.FormPanelhtmleditor       Ext.form.HtmlEditor
ExtJS学习笔记(2)-From的类型,Ext.FormPanellabel            Ext.form.Label
ExtJS学习笔记(2)-From的类型,Ext.FormPanelnumberfield      Ext.form.NumberField
ExtJS学习笔记(2)-From的类型,Ext.FormPanelradio            Ext.form.Radio
ExtJS学习笔记(2)-From的类型,Ext.FormPaneltextarea         Ext.form.TextArea
ExtJS学习笔记(2)-From的类型,Ext.FormPaneltextfield        Ext.form.TextField
ExtJS学习笔记(2)-From的类型,Ext.FormPaneltimefield        Ext.form.TimeField
ExtJS学习笔记(2)-From的类型,Ext.FormPaneltrigger          Ext.form.TriggerField

相关文章:

  • 2021-05-25
  • 2022-12-23
  • 2021-07-16
  • 2021-06-09
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-02-04
  • 2022-12-23
  • 2022-12-23
  • 2021-09-12
相关资源
相似解决方案