第四章介绍Extjs的formPanel (入门教程)

最新推荐文章于 2024-03-26 17:18:18 发布

javaPie

最新推荐文章于 2024-03-26 17:18:18 发布

阅读量508

点赞数

分类专栏： ExtJs

ExtJs 专栏收录该内容

246 篇文章 5 订阅

订阅专栏

第四章介绍Extjs的formPanel (入门教程)

博客分类：
EXTJS

EXT

第四章介绍Extjs的formPanel (入门教程)

这章我们主要简单介绍一下Extjs的formPanel——formPanel的创建、formPanel字段数据的取得、xtype属性的使用、ComboBox的使用。

Extjs的formPanel分为两部分：

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

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

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

这些子组件就不一一介绍了，其实创建也很简单的，自己去看看API吧。

formPanel 例子 (详细代码见附件)

一，如何创建一个formPanel？

首先我们打开Extjs 的API，找到Ext.form.FormPanel类。

1，创建一个formPanel其实很简单，如下代码就可以，

代码1：

     Js代码   
     
   
 var form = new Ext.form.FormPanel({  
         title : "我是 FormPanel",  
         width :300,  
         height : 100,  
         frame : true,  
         renderTo : Ext.getBody()  //渲染到页面  
 });  

代码1：运行效果

2，在formPanel中加入子组件：

代码2：

代码2：运行效果

二，formPanel如何取值？

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

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