xml-form.js

着重用css实现页面显示功能,实现简单数据库连接,是很好的入门教程

/*
 * Ext JS Library 1.1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * [e-mail]
 * 
 * http://www.extjs.com/license
 */

Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'under';

    var fs = new Ext.form.Form({
        labelAlign: 'center',
        labelWidth: 110,
		url:'info_save.jsp',
        waitMsgTarget: 'box-bd'
    });

    fs.fieldset(
        {legend:'添加相关信息'},
        new Ext.form.ComboBox({
            fieldLabel: '选择发布版块：',
            hiddenName:'Board',
            store: new Ext.data.SimpleStore({
                fields: ['abbr', 'Board'],
                data : Ext.exampledata.states // from states.js
            }),
            valueField:'abbr',
            displayField:'Board',
            typeAhead: true,
            mode: 'local',
            triggerAction: 'all',
            emptyText:'请填写或选择发布版块',
            selectOnFocus:true,
			blankText:'请填写或选择发布版块！',
            width:190
        }),

	        new Ext.form.DateField({
            fieldLabel: '选择发布日期：',
            name: 'IssuanceDate',
            width:190,
			format:'Y-m-d',
			blankText:'发布日期不能为空！',
			//value:'2007-4-9',
            allowBlank:false
        }),
        new Ext.form.TextField({
            fieldLabel: '链接地址名称：',
            name: 'LinkName',
			allowBlank:false,
		    blankText:'链接地址名不能为空！',
            width:205
        }),

        new Ext.form.TextField({
            fieldLabel: '完整链接地址：',
            allowBlank:false,
			name:'Url',
		    blankText:'链接地址不能为空！',
            vtype:'url',
            width:205
        }),

        new Ext.form.TextArea({
            fieldLabel: '相关链接备注：',
            name: 'Memo',
            width:205
        })
    );

    // simple button add
    fs.addButton('保存', function(){
		//fs.addKeyListener(27, fs.hide, fs);
		if(fs.isValid()){
			 fs.submit({
				      method:'POST',clientValidation:true,
				      waitMsg:'Loading....'
				    });
			Ext.MessageBox.alert('状态','数据保存成功!',function(){location.href('infomanager.jsp');});
			//window.location.href('infomanager.jsp');
		}
    });

    // explicit add
    fs.addButton('重置', function(){
			 fs.reset();
    });

    fs.render('form-ct');

});