`

form panel

    博客分类：
  • Ext
ext frompanel 
阅读更多 
<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.'}}
分享到：
| 构建一个Panel中的工具栏
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ERP.rar_ERP_delphi ERP_delphi erp_form panel_panel

    inprise s delphi form panel

    在Form和Panel中一直显示hint

    在Delphi编程环境中，Form和Panel是常见的组件，用于构建用户界面。Hint功能是一个非常实用的特性，它允许开发者为控件添加额外的信息提示，当鼠标悬停在该控件上时显示。然而，默认情况下，Hint信息只会在首次鼠标...

    C# WinForm 在Panel中添加Form 教程+源码

    本教程将详细介绍如何在Panel中添加Form，并提供相关源码供参考学习。 首先，Panel控件是Windows Forms中的一种容器控件，它允许我们在其内部放置其他控件，包括Form。与MDI窗体相比，Panel控件提供了一个更加灵活...

    C# WinForm窗体控件Panel修改边框颜色以及边框宽度方法

    在C# WinForm开发中，Panel控件是一个非常常用的组件，它可以用来组织其他控件或者作为容器使用。本文将深入探讨如何修改Panel控件的边框颜色和边框宽度，以实现自定义的视觉效果。 首先，我们需要了解Panel控件的...

    C#调用Matlab画图，实现图形嵌入form的panel中

    C#调用Matlab画图，实现图形嵌入form的panel中 C#调用Matlab画图，实现图形嵌入form的panel中 C#调用Matlab画图，实现图形嵌入form的panel中 C#调用Matlab画图，实现图形嵌入form的panel中 C#调用Matlab画图，实现...

    在delphi 11.3 Form窗体的panel 中嵌入 Fmx窗体

    本知识点将详细探讨如何在VCL Form窗体的Panel组件中嵌入一个FMX窗体，以及相关的源代码实现。 首先，理解VCL和FMX的区别是关键。VCL是Delphi早期的UI库，主要针对Windows平台，而FMX则是后来推出的新一代跨平台UI...

    Ext Column+Form布局画复杂页面

    6. 将Grid Panel中的选择与Form Panel的字段关联，实现选中列表项后自动填充表单数据。 7. 添加按钮，如“保存”和“取消”，来处理用户交互。 为了更好地理解和实践，你可以参考给出的“examples”压缩包文件。...

    winform触摸屏事件小例子

    在这个“winform触摸屏事件小例子”中，我们将探讨如何利用.NET Framework的WinForms库，特别是在触摸屏环境中，实现面板（Panel）控件的滚动条自动移动，模拟手指拖动的效果。 首先，我们需要理解WinForms中的触摸...

    ext动态列

    - 动态Window可能是指可以在窗口打开后根据需要动态调整内部组件，包括Grid Panel或Form Panel。 - 文件可能包含一个`DynamicWindow`类，该类在创建窗口时接受参数来决定是否需要动态列或表单。 在实际应用中，...

    C#中winform中panel重叠无法显示问题的解决

    C#中winform中panel重叠无法显示问题： 最近开发一个项目有个需求是需要多个模式来回切换的，本来考虑使用多个窗口来实现这个功能，但是这样做浪费资源，而且工作量大，所以想到使用panel控件来解决这个问题。但是在...

    c# winform panel 流式布局 panel块可自动排列

    1. **创建Panel控件**：在你的窗体（Form）上添加一个Panel控件，这将是放置其他控件的容器。 2. **设置AutoScroll属性**：将Panel的AutoScroll属性设为True，这样当Panel中的控件超出边界时，会出现滚动条，用户...

    qlk.rar_extjs_订餐_餐馆管理_餐馆订餐

    订餐是系统的核心部分，EXTJS的Form Panel可以用于创建订单，Grid Panel用于显示订单列表，用户可以选择菜品，填写订餐信息，提交订单。同时，EXTJS的事件监听机制确保了用户操作的即时反馈。 六、后台接口与数据...

    C#中主窗体Panel中加载其他多个窗体Panel控件

    Panel childFormPanel = form1.Controls[0] as Panel; // 假设ChildForm1只有一个Panel // 将ChildForm1的Panel控件添加到主窗体的Panel childPanel.Controls.Add(childFormPanel); // 设置ChildForm1的Panel...

    ext增删查改demo

    7. Form Panel：Form Panel是EXTJS中用于创建表单的组件，它可以包含各种输入控件，用于用户输入数据。在创建和更新数据的操作中，Form Panel起着关键作用。 8. 数据绑定（Data Binding）：EXTJS支持双向数据绑定，...

    DRP分销系统界面原型(EXT版)

    其次，EXT的Form Panel组件用于收集和验证用户输入的信息，如添加新供应商、创建新的分销计划等。它包含多种表单元素，如文本框、下拉框和日期选择器，且支持验证规则，确保输入数据的准确性和完整性。 再者，EXT的...

    extjs实现增删查改

    在ExtJS中，我们可以利用Grid Panel和Form Panel这两种组件来实现这些操作。Grid Panel用于显示和编辑表格数据，而Form Panel则用于创建和更新单个记录。 1. 创建（Create）：在ExtJS中，可以通过创建一个新的Form ...

    用Extjs做的一个小项目，实现了增删改查

    - **Form Panel**：用于创建和编辑记录，通常包含各种输入字段如文本框、下拉框等，以及用于提交或取消更改的按钮。 - **Toolbar**：可以添加在Grid Panel上方或下方，用于放置操作按钮，如新增、删除、保存、撤销...

    通过ext实现CURD

    在EXT中，我们可以使用Grid Panel、Form Panel等组件来实现这些功能。 **2. 创建（Create）** 在EXT中，可以使用Form Panel创建新记录。首先，定义一个包含所需字段的表单，然后添加按钮来提交表单。当用户填写并...

    ext简单的增删改查

    在EXTJS中，通常通过Form Panel来收集用户输入，然后将这些数据提交给后台（这里是SQLServer）。表单的字段对应Model的属性，提交时会创建一个新的Model实例，并将其添加到Store中。Store会自动触发数据同步，将新...

    delphi 动态创建的panel的位置显示

    procedure TForm1.SetPanelPostion(APanel: TPanel; AColumn, AIndex: integer); var iRow, iColumn: integer; begin iRow := AIndex div AColumn; iColumn := AIndex mod AColumn; APanel.Left := iSpace + ...

Magicbox
Global site tag (gtag.js) - Google Analytics