form panel

最新推荐文章于 2025-05-16 14:12:20 发布

原创最新推荐文章于 2025-05-16 14:12:20 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext frompanel

Ext 专栏收录该内容

9 篇文章

订阅专栏


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ext JS in Action Chapter 06 | Listing 6.4 Implementing a remote combobox</title>
<link rel="stylesheet" type="text/css" href="./ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="./ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext3/ext-all.js"></script>
</head> 
<body> 

<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var remoteJsonStore = new Ext.data.JsonStore({
	root          : 'records',
	totalProperty : 'totalCount',
	baseParams    : {
		column : 'fullName'
	},
	fields     : [
		{
            name    : 'name',
            mapping : 'fullName'
		},
		{
            name    : 'id',
            mapping : 'id'
		}	
	],
	proxy : new Ext.data.ScriptTagProxy({
		url : 'http://extjsinaction.com/dataQuery.php'
	})
});

var combo = {
	xtype          : 'combo',
	fieldLabel     : 'Search by name',
	forceSelection : true,
	displayField   : 'name',
	valueField     : 'id',
	hiddenName     : 'customerId',
	loadingText	   : 'Querying....',
	pageSize	   : 5,
	minChars	   : 1,
	triggerAction  : 'all',
	store		: remoteJsonStore
};

var onSuccessOrFail = function(form, action) {
    var formPanel = Ext.getCmp('myFormPanel');
    formPanel.el.unmask();

    var result = action.result;
    if (result.success) {
        Ext.MessageBox.alert('Success',action.result.msg);
    }
    else {
        Ext.MessageBox.alert('Failure',action.result.msg);
    }
};


 var submitHandler = function() {
        var formPanel = Ext.getCmp('myFormPanel');
        formPanel.el.mask('Please wait', 'x-mask-loading');

        formPanel.getForm().submit({
            url     : 'newbackgroundprograma.action',
            success : onSuccessOrFail,
            failure : onSuccessOrFail
        });

  };

 var buttons = [
     {
         text    : 'Submit',
         handler : submitHandler
     },
     {
         text    : 'load'
     }
 ];

 var fp = new Ext.form.FormPanel({
        renderTo     : Ext.getBody(),
        labelWidth : 100,
		bodyStyle  : 'padding: 5px',
        width        : 600,
        id           : 'myFormPanel',
        title        : 'Our complex form',
        height       : 350,
        frame        : true,
        layout       : 'form',
        layoutConfig : {
            align : 'stretch'
        },
        items        : [
            combo
        ],
        buttons      : buttons
    });

});


</script> 
</body>
</html>
后台action可以用request.getparameter("customerId");取得id的值,这就是hiddenName的作用


{success: true, msg : 'Form submitted successfully'}


{success: false, msg : 'This is an example error message', errors : {firstName : 'Cannot contain "!" characters.',lastName  : 'Must not be blank.'}}