From Learn About the Ext JavaScript Library

在这篇小小的教程中，我们试着创建一种Ext表单，正正好像普通表单那样子地提交（submit）至服务器。

引子

作为程序员，你或许已了解PHP（或ASP，或其它服务端语言），大致知道传统方式下怎么处理用户界面的工作。你用某一种服务端语言构建表单，再以明文html的方式输出到最终用户。你有可能在用模板引擎，却是在后台，这样就可方便生成html给用户。

Ext中，实在是很轻松就创建好漂漂亮亮的表单界面，让用户感觉不错。但面临的情况是，你已开发出大量运行良好的代码，这代码你是不想费太大功夫就可转化为JSON的那种数据格式提交。

至少，这也是我面临的遭遇之一。

开始了：HTML页面

对于怎么引入Ext的源码到你的页面，想必你已经很了解，但我想再啰嗦一次，（在这些代码放到html文档的head标签中）。接着，在页面中我们需要某个位置放置表单（放在body的标签中）以便渲染。

<title>A tradional form</title>
<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
 
<!-- Include your own Javascript file here - adapt the filename to your filename-->
<script type="text/javascript" src="ext/mytestscript.js"></script>  
 
 
<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">

对于怎么引入Ext的源码到你的页面，想必你已经很了解，但我想再啰嗦一次，（在这些代码放到html文档的head标签中）。接着，在页面中我们需要某个位置放置表单（放在body的标签中）以便渲染。

<div id="mytraditionalform"></div>

差不多了，html部分。可保存为普通html文件（如form，html），或结合你的服务器语言，无关紧要。

JavaScript代码

接着开始JS部分，把JS代码写进一份单独的文件是一个不错的想法这里只我管它“my testscript.js”（见上面的html）。文件叫什么不紧要，只要能无误的引用文件便可。看看下面的源码：

Ext.onReady(function(){
 
	var simple = new Ext.form.FormPanel({
 
 
        standardSubmit: true,
 
 
        frame:true,
        title: 'Register',
 
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',
		items: [{
                fieldLabel: 'Username',
                name: 'username',
                allowBlank:false
            },
			{
                inputType: 'hidden',
                id: 'submitbutton',
                name: 'myhiddenbutton',
                value: 'hiddenvalue'
            }
 
        ],
        buttons: [{
            text: 'Submit',
            handler: function() {
		simple.getForm().getEl().dom.action = 'test.php';
	        simple.getForm().getEl().dom.method = 'POST';
                simple.getForm().submit();
            }
        }]
 
 
    });
 
 
 
    simple.render('mytraditionalform');
 
 
 
});

此脚步的重点：

• “standard Submit：true”的那行，保证是透过标准方式提交表单。
• 提交按钮的事件。开始我认为有“standard Submit：true”就可以的了，但其实不是。
• Simple. render()指定了表单渲染在哪个元素上，若修改
  元素id也要连同这里的id一并修改。 </ul>