Extjs中常用表单介绍与利用

复制代码 代码如下:

extjs文件

}

form Ext.FormPanel
checkbox Ext.form.Checkbox
combo Ext.form.ComboBox
datefield Ext.form.DateField
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden
htmleditor Ext.form.HtmlEditor
label Ext.form.Label
numberfield Ext.form.NumberField
radio Ext.form.Radio
textarea Ext.form.TextArea
textfield Ext.form.TextField
timefield Ext.form.TimeField
trigger Ext.form.TriggerField

4 运行

<html>
<head>
<title>注册</title>
<link rel=”stylesheet”
type=”text/css教程”
href=”../ext/resources/css/ext-all.css” />
<script type=”text/javascript教程”
src=”../ext/adapter/ext/ext-base.js”></script>
<script type=”text/javascript”
src=”../ext/ext-all.js”></script>
<script type=”text/javascript” src=”register.js”></script>
</head>
<body>
</body>
</html>

复制代码 代码如下:

复制代码 代码如下:

2 建立register.php和save.php
register.php调用ExtJS文件
save.php数据存款和储蓄
register.php=>

数据库教程结构

目标:
驾驭表单面板怎么样创立
刺探表单面板中xtype的品种的施用
精通表单面板怎样验证,绑定,取值
归纳应用表单面板(玩转它)
内容:
先是我们要精晓的是FormPanel也是接二连三panel组件的。所以它装有panel的性质
要创建贰个表单面板其实很简单 var MyformPanel=new Ext.form.formpanel();
表单面板和面板同样只是作为贰个器皿出现的,供给大家选择items加入各控件成分来增添大家的表单面板,
defaults:{},此属性提取了items中各组件项的一道特性

对于表单验证,Extjs提供了老大强劲的支撑,在后面的实例中山高校家能够开采

澳门新萄京 1

<?php教程
if($_POST[‘password’]!=$_POST[‘repassword’])
{
//不奉行存储
exit;
}
$conn=mysql教程_connect(“localhost”,”root”,”123″);
mysql_select_db(“db_register”);
$sql=”insert into
tb_register(reg_loginid,reg_name,reg_id,reg_password,reg_sex,reg_address)
values(‘”.$_POST[‘login’].”‘,'”.$_POST[‘name’].”‘,'”.$_POST[‘id’].”‘,'”.$_POST[‘password’].”‘,'”
.$_POST[‘sex’].”‘,'”.$_POST[‘address’].”‘)”;
if(mysql_query($sql,$conn))
{
echo “注册成功”;
}
else
{
echo “注册战败”;
}
mysql_close($conn);
?>

澳门新萄京 2 
表单面板中挑兖州组件的牵线

累加提交方法:

Ext.onReady(function() {
function registerhandler(){
var values = Ext.getCmp(“form”).getForm().getValues();
//获取form里textfield、radio等值
Ext.Ajax.request({
url: ‘save.php’,
success: function() {Ext.Msg.alert(“success”);},
method: “post”,
failure: function(){Ext.Msg.alert(“failure”);},
params: values
});
}
var form = new Ext.form.FormPanel({
id: ‘form’,
baseCls: ‘x-plain’,
layout:’absolute’,
url:’save-form.php’,
defaultType: ‘textfield’,
items: [{
x: 0,
y: 0,
xtype:’label’,
text: ‘登陆帐户:’
},{
x: 80,
y: 0,
name:’login’,
anchor:’100%’
},{
x: 0,
y: 30,
xtype:’label’,
text: ‘用户姓名:’
},{
x: 80,
y: 30,
name:’name’,
anchor: ‘100%’,
},{
x:0,
y:60,
xtype:’label’,
text:’居民身份证号:’
},{
x:80,
y:60,
name:’id’,
anchor:’100%’,
},{
x:0,
y:90,
xtype:’label’,
text:’用户密码:’
},{
x:80,
y:90,
inputType:’password’,
name:’password’,
anchor:’100%’,
},{
x:0,
y:120,
xtype:’label’,
text:’密码确认:’,
},{
x:80,
y:120,
name:’repassword’,
inputType:’password’,
anchor:’100%’,
},{
x:80,
y:150,
xtype:’radio’,
name:’sex’,
fieldLabel:’性别’,
boxLabel:’男’,
inputValue:’b’ //radio的取值为:b
},{
x:0,
y:152,
xtype:’label’,
text:’性别:’
},{
x:140,
y:150,
xtype:’radio’,
name:’sex’,
fieldLabel:’性别’,
boxLabel:’女’,
inputValue:’g’ //radio的取值为:g
},{
x:0,
y:180,
xtype:’label’,
text:’用户住址’
},{
x:80,
y:180,
name:’address’,
anchor:’100%’
}]
});
var window = new Ext.Window({
title: ‘注册帐户’,
width: 400,
height:300,
minWidth:400,
minHeight: 300,
layout: ‘fit’,
plain:true,
bodyStyle:’padding:5px;’,
buttonAlign:’center’,
items: form,
buttons: [{
text: ‘注册’,
handler:registerhandler
},{
text: ‘取消’
}]
});
window.show();
});

Ext.onReady(function() {
function registerhandler(){
var values = Ext.getCmp(“form”).getForm().getValues();
//获取form里textfield、radio等值
Ext.Ajax.request({
url: ‘save.php’,
success: function() {Ext.Msg.alert(“success”);},
method: “post”,
failure: function(){Ext.Msg.alert(“failure”);},
params: values
澳门新萄京,});
}
var form = new Ext.form.FormPanel({
id: ‘form’,
baseCls: ‘x-plain’,
layout:’absolute’,
url:’save-form.php’,
defaultType: ‘textfield’,
items: [{
x: 0,
y: 0,
xtype:’label’,
text: ‘登入帐户:’
},{
x: 80,
y: 0,
name:’login’,
anchor:’100%’
},{
x: 0,
y: 30,
xtype:’label’,
text: ‘用户姓名:’
},{
x: 80,
y: 30,
name:’name’,
anchor: ‘100%’,
},{
x:0,
y:60,
xtype:’label’,
text:’身份ID号:’
},{
x:80,
y:60,
name:’id’,
anchor:’100%’,
},{
x:0,
y:90,
xtype:’label’,
text:’用户密码:’
},{
x:80,
y:90,
inputType:’password’,
name:’password’,
anchor:’100%’,
},{
x:0,
y:120,
xtype:’label’,
text:’密码确认:’,
},{
x:80,
y:120,
name:’repassword’,
inputType:’password’,
anchor:’100%’,
},{
x:80,
y:150,
xtype:’radio’,
name:’sex’,
fieldLabel:’性别’,
boxLabel:’男’,
inputValue:’b’ //radio的取值为:b
},{
x:0,
y:152,
xtype:’label’,
text:’性别:’
},{
x:140,
y:150,
xtype:’radio’,
name:’sex’,
fieldLabel:’性别’,
boxLabel:’女’,
inputValue:’g’ //radio的取值为:g
},{
x:0,
y:180,
xtype:’label’,
text:’用户住址’
},{
x:80,
y:180,
name:’address’,
anchor:’100%’
}]
});
var window = new Ext.Window({
title: ‘注册帐户’,
width: 400,
height:300,
minWidth:400,
minHeight: 300,
layout: ‘fit’,
plain:true,
bodyStyle:’padding:5px;’,
buttonAlign:’center’,
items: form,
buttons: [{
text: ‘注册’,
handler:registerhandler
},{
text: ‘取消’
}]
});
window.show();
});

],
buttons:[{text:”确定”},{text:”取消”,handler:function(){alert(“事件!”);}}],
buttonAlign:’center’

二,基本表单创设的行使于表达 (平日情况下大家都以应用xtype来注脚items中组件的体系)
fieldset的应用

<?php
if($_POST[‘password’]!=$_POST[‘repassword’])
{
//不执行存款和储蓄
exit;
}
$conn=mysql_connect(“localhost”,”root”,”123″);
mysql_select_db(“db_register”);
$sql=”insert into
tb_register(reg_loginid,reg_name,reg_id,reg_password,reg_sex,reg_address)
values(‘”.$_POST[‘login’].”‘,'”.$_POST[‘name’].”‘,'”.$_POST[‘id’].”‘,'”.$_POST[‘password’].”‘,'”
.$_POST[‘sex’].”‘,'”.$_POST[‘address’].”‘)”;
if(mysql_query($sql,$conn))
{
echo “注册成功”;
}
else
{
echo “注册失利”;
}
mysql_close($conn);
?>

create database db_register;
create table db_register.tb_register(
reg_loginid varchar(20) primary key,
reg_name varchar(20) not null,
reg_id int not null,
reg_password varchar(20) not null,
reg_sex varchar(2),
reg_address varchar(50)
);

二,基本表单创设的使用于表明 (日常状态下大家都以运用xtype来声明items中组件的品类)
fieldset的应用

复制代码 代码如下:

复制代码 代码如下:

function Read3() {
var MyformPanel=new Ext.form.FormPanel({
title:’fieldset的应用’,
renderTo:Ext.getBody(),
frame:true,
width:350,
x:400,
y:50,
floating:true,
items:[
{
xtype:’fieldset’,
title:’用户新闻’,
collapsible:true,
autoHeight:true,
autoWidth:true,
defaults:{width:150,allowBlank:false,xtype:’textfield’},
items:[
{
田野同志Label:’用户名称’,
emptyText:’陈建强’,
blankText:’请输入用户名称’
},
{
田野Label:’用户密码’,
inputType:’password’,
blankText:’请输入用户密码’
}
]
}
]
});
}

澳门新萄京 3

澳门新萄京 4

function login(){
MyformPanel.form.submit();//提交
}
function reset(){
MyformPanel.form.reset();//取消
}

对于xtype:在表单面板中格外有用,没有要求每一回都用new
来成立二个零部件,它定义了组件的类型,同一时候让组件在加载后渲染。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图