发新话题
打印

学习EXT第九日:表单入门

学习EXT第九日:表单入门

摘要: 本教程教你如何入手去创建一个基本的表单。
Author: Shea Frederick
Translater:Hegz
Published: May 05, 2007
Translated:May 14,2007
出处:http://www.fleaphp.org.cn/bbs/vi ... ra=page%3D1#pid4736

我建议下载用于这个例子的一段程序,这样可能对你有一些帮助。你也可以找一个有效的例子。

表单体
首先要做的第一件事就是创建一个表单体,这相当于在HTML中书写一个
标识。


var form_employee = new Ext.form.Form({
        labelAlign: 'right',
        labelWidth: 175,
        buttonAlign: 'right'
});
        创建表单字段
表单示例由name、title、hire_date和active四个表单字段构成。开头的两个表单字段name和title,只是简单的文本字段,我们会用TextField方法来创建它们。

重要的配置选项是name,定义该选项与HTML中定义一个表单字段名几乎一样。


var employee_name = new Ext.form.TextField({
        fieldLabel: 'Name',
        name: 'name',
        width:190
});

var employee_title = new Ext.form.TextField({
        fieldLabel: 'Title',
        name: 'title',
        width:190
});
        跟着的hire_date字段是一个日期字段,我们会用DateField方法来创建,它会为我们弹出一个别致的日期选择器来让我们选择日期。

format配置选项被用来为PHP指定日期格式标准(PHP的日期格式)。日期格式字符串的调整须与你所用的日期格式相匹配。



var employee_hire_date = new Ext.form.DateField({
        fieldLabel: 'Hire Date',
        name: 'hire_date',
        width:90,
        allowBlank:false,
        format:'m-d-Y'
});
        最后一个表单元素active是一个布尔值,我们使用Checkbox方法来创建。


var employee_active = new Ext.form.Checkbox({
        fieldLabel: 'Active',
        name: 'active'
});
        完成表单
现在,我们把表单里的所有表单字段加入到fieldset中去。当然了,如果你想在fieldset的外面进行,可以选择使用add方法。


form_employee.fieldset(
        {legend:'Employee Edit'},
        employee_name,
        employee_title,
        employee_hire_date,
        employee_active
)
        最后,最不能少的就是submit按钮,它与一小段的错误检测代码块一起被addButton方法加进来。当该按钮被点击,就会调用render方法,传入div标识的“id”,然后在网页的div里把表单显示出来。


form_employee.addButton('Save', function(){
        if (form_employee.isValid()) {
                Ext.MessageBox.alert('Success', 'You have filled out the form correctly.');       
        }else{
                Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
        }
}, form_employee);

form_employee.render('employee-form');
        下一步

虽然本教程让你懂得了如何去创建一个表单,但创建出来的表单什么事情也干不了。就像一部没有引擎的小汽车——它看起来可能很漂亮,但不能让你走得更远。
我的博客
大家好才是真的好

TOP

学习EXT第九日(B):为一个表单填充或提交数据

摘要:这个教程将指导你如何获取数据到你的表单并将这些数据提交。
Author: Shea Frederick
Translater: pplboy
Published: May 22, 2007
Translater Date:May 30.2007

这个教程使用了在getting started tutorial教程中使用过的 雇员信息编辑表单。如果你仍然不熟悉如何创建一个表单,你可以首先看一下这个例子。我建议下载用于这个例子的一段程序,这样可能对你有一些帮助。你也可以找一个有效的例子。

我们将经历使用表单的整个过程,从最初的从服务器获取数据填入表单,到将数据返回给服务器。在后端我使用PHP和MySQL, 然而这个例子对于PHP和MySQL来说并不是特殊的,而是只要求你能够从你的服务器读取和输出JSON数据。

让我们开始吧
首先我们必须设置表单的url, 这是一个能获得POST数据并将其写进我们的数据库的PHP脚本.


var form_employee = new Ext.form.Form({
        ...
        url:'forms-submit-process.php',
        ...
});
        我们的数据包含5个字段:id, name, title, hire_date和active,这些字段可以被取回并放置到一个数据存储对象(Store)中。

以下的程序构造了一个数据存储对象,在这个时候没有数据被取回,我们的数据代理(Proxy)对象提交到一个PHP脚本,用来取回数据库id为14的行 并将它转换成一个JSON字符串。


employee_data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'forms-submit-getdata.php?id=14'}),
reader: new Ext.data.JsonReader({},[ 'id', 'name', 'title', 'hire_date', 'active']),
remoteSort: false
});


接下来要做的是设定我们的事件监听者来监察什么时候数据被载入, 这个将保证我们不会在数据被载入之前填入表单。


employee_data.on('load', function() {
       
        // data loaded, do something with it here...
                       
});
        当数据被载入后,我们可以取回数据并用setValue方法将其填入表单。这里我们用getAt(0) 从我们的数据存储对象里重新取回第一行数据(行zero)。


注意:这里使用的表单和表单字段在getting started tutorial中有定义和解释。


employee_name.setValue(employee_data.getAt(0).data.name);
employee_title.setValue(employee_data.getAt(0).data.title);
employee_hire_date.setValue(employee_data.getAt(0).data.hire_date);
employee_active.setValue(Ext.util.Format.boolean(employee_data.getAt(0).data.active));
        我们将要创建提交按钮并添加到表单,记得给来源于表单字段的POST数据设定扩展参数。你将会发现通过行确定字段(id)对于让php脚本找到需要更新的行非常有用,同时为了更好的判断,还需要一个action判定。


我还使用isValid参数来保证表单在提交前符合每一个字段的要求。


form_employee.addButton('Save', function(){
        if (form_employee.isValid()) {
                form_employee.submit({
                        params:{
                                action:'submit',
                                id:employee_data.getAt(0).data.id
                        },
                        waitMsg:'Saving...'
                });       
        }else{
                Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
        }
}, form_employee);

form_employee.render('employee-form');
        读取我们的数据
现在我们来读取数据


employee_data.load();
        这样真的能够惊人简单的创建一个可用的表单,与成对的服务器段脚本接合,就能够将数据从数据库获取并写入修改后的数据。这些服务端脚本可以简单到只需几行而已。
我的博客
大家好才是真的好

TOP

法兰

新人报道,前辈多多关照!!!支持!!呵呵













法兰-您是在寻找专业法兰制造商吗?定襄县法拉瑞法兰机械有限公司致力于研究不锈钢法兰,到底什么是法兰?法兰不锈钢又有哪些法兰标准?

TOP