当前位置: 代码迷 >> JavaScript >> ExtJs formPanel(1、基础)
  详细解决方案

ExtJs formPanel(1、基础)

热度:735   发布时间:2012-09-02 21:00:34.0
ExtJs formPanel(一、基础)

转自:http://witcheryne.iteye.com/blog/335577

Extjs的formPanel分为两部分:

1,Ext.form.FormPanel : 这个form我们可以理解为管表现的,就是呈现在界面我们看到的form。

2,Ext.form.BasicForm : 这是管数据的,例如form操作数据一般使用它。


Extjs的formPanel又包含子组件,如:Ext.form.TextField、Ext.form.ComboBox、Ext.form.DateField等。

代码1:

Js代码  收藏代码
  1. var form = new Ext.form.FormPanel({  
  2.         title : "我是 FormPanel",  
  3.         width :300,  
  4.         height : 100,  
  5.         frame : true,  
  6.         renderTo : Ext.getBody()  //渲染到页面  
  7. });  

 

代码2:
                                                                   

效果:

                                                                         
代码2: 运行效果


二,formPanel如何取值?

我们使用上面提到的basicForm来操作数据。

 

Js代码  收藏代码
  1. function getValue(){  
  2.     var name = form.getForm().findField("name").getValue();  
  3.     var sex = form.getForm().findField("sex").getValue();                
  4.     Ext.Msg.alert("提示","name = "+name+"<br/>"+"sex = "+sex);  
  5. }  

 取值我们使用了form.getForm().findField();

在Ext.form.FormPanel里面找到getForm()这个方法,getForm()这个方法其实就是取得basicForm对象

                            

 

然后我们使用Ext.form.BasicForm里面的findField来找到文本框,


                            

最后调用getValue()方法便可取得文本框的值。

 



 取值运行效果

 

 

三,使用xtype。

我们在formPanel中使用了xtype创建textfield等组件,其实我们也可以通过new来创建一个textfield,但使用xtype可以实现组件的延时渲染。

 

在formPanel中如何使用xtype?我们打开API找到Ext.Component类,里面有说明一些字符串具体代表那个类,这些类我们可以通过xtype来创建,如图:

 




  相关解决方案