<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.'}}
分享到：
相关推荐
inprise s delphi form panel
在Delphi编程环境中，Form和Panel是常见的组件，用于构建用户界面。Hint功能是一个非常实用的特性，它允许开发者为控件添加额外的信息提示，当鼠标悬停在该控件上时显示。然而，默认情况下，Hint信息只会在首次鼠标...
本教程将详细介绍如何在Panel中添加Form，并提供相关源码供参考学习。 首先，Panel控件是Windows Forms中的一种容器控件，它允许我们在其内部放置其他控件，包括Form。与MDI窗体相比，Panel控件提供了一个更加灵活...
在C# WinForm开发中，Panel控件是一个非常常用的组件，它可以用来组织其他控件或者作为容器使用。本文将深入探讨如何修改Panel控件的边框颜色和边框宽度，以实现自定义的视觉效果。 首先，我们需要了解Panel控件的...
C#调用Matlab画图，实现图形嵌入form的panel中 C#调用Matlab画图，实现图形嵌入form的panel中 C#调用Matlab画图，实现图形嵌入form的panel中 C#调用Matlab画图，实现图形嵌入form的panel中 C#调用Matlab画图，实现...
本知识点将详细探讨如何在VCL Form窗体的Panel组件中嵌入一个FMX窗体，以及相关的源代码实现。 首先，理解VCL和FMX的区别是关键。VCL是Delphi早期的UI库，主要针对Windows平台，而FMX则是后来推出的新一代跨平台UI...
6. 将Grid Panel中的选择与Form Panel的字段关联，实现选中列表项后自动填充表单数据。 7. 添加按钮，如“保存”和“取消”，来处理用户交互。 为了更好地理解和实践，你可以参考给出的“examples”压缩包文件。...
- 动态Window可能是指可以在窗口打开后根据需要动态调整内部组件，包括Grid Panel或Form Panel。 - 文件可能包含一个`DynamicWindow`类，该类在创建窗口时接受参数来决定是否需要动态列或表单。 在实际应用中，...
1. **创建Panel控件**：在你的窗体（Form）上添加一个Panel控件，这将是放置其他控件的容器。 2. **设置AutoScroll属性**：将Panel的AutoScroll属性设为True，这样当Panel中的控件超出边界时，会出现滚动条，用户...
订餐是系统的核心部分，EXTJS的Form Panel可以用于创建订单，Grid Panel用于显示订单列表，用户可以选择菜品，填写订餐信息，提交订单。同时，EXTJS的事件监听机制确保了用户操作的即时反馈。 六、后台接口与数据...
Panel childFormPanel = form1.Controls[0] as Panel; // 假设ChildForm1只有一个Panel // 将ChildForm1的Panel控件添加到主窗体的Panel childPanel.Controls.Add(childFormPanel); // 设置ChildForm1的Panel...
7. Form Panel：Form Panel是EXTJS中用于创建表单的组件，它可以包含各种输入控件，用于用户输入数据。在创建和更新数据的操作中，Form Panel起着关键作用。 8. 数据绑定（Data Binding）：EXTJS支持双向数据绑定，...
其次，EXT的Form Panel组件用于收集和验证用户输入的信息，如添加新供应商、创建新的分销计划等。它包含多种表单元素，如文本框、下拉框和日期选择器，且支持验证规则，确保输入数据的准确性和完整性。 再者，EXT的...
在ExtJS中，我们可以利用Grid Panel和Form Panel这两种组件来实现这些操作。Grid Panel用于显示和编辑表格数据，而Form Panel则用于创建和更新单个记录。 1. 创建（Create）：在ExtJS中，可以通过创建一个新的Form ...
- **Form Panel**：用于创建和编辑记录，通常包含各种输入字段如文本框、下拉框等，以及用于提交或取消更改的按钮。 - **Toolbar**：可以添加在Grid Panel上方或下方，用于放置操作按钮，如新增、删除、保存、撤销...
在EXT中，我们可以使用Grid Panel、Form Panel等组件来实现这些功能。 **2. 创建（Create）** 在EXT中，可以使用Form Panel创建新记录。首先，定义一个包含所需字段的表单，然后添加按钮来提交表单。当用户填写并...
在EXTJS中，通常通过Form Panel来收集用户输入，然后将这些数据提交给后台（这里是SQLServer）。表单的字段对应Model的属性，提交时会创建一个新的Model实例，并将其添加到Store中。Store会自动触发数据同步，将新...
procedure TForm1.SetPanelPostion(APanel: TPanel; AColumn, AIndex: integer); var iRow, iColumn: integer; begin iRow := AIndex div AColumn; iColumn := AIndex mod AColumn; APanel.Left := iSpace + ...
本教程可能涵盖了Ext2.1中的核心组件，如Grid Panel（表格面板）、Form Panel（表单面板）、Tree Panel（树形面板）等。Grid Panel用于展示大量数据，支持排序、分页和过滤。Form Panel则用于创建复杂的表单，可以...
这些窗体通常继承自System.Windows.Forms.Form类，并且可以包含各种自定义控件，如按钮、文本框、标签等。 为了实现窗口切换，我们需要编写事件处理代码。例如，当用户点击Panel上的按钮或者使用菜单项时，触发切换...