ExtJs学习笔记(第一步)

本文介绍如何使用ExtJs创建包含ComboBox等组件的表单,并实现数据加载及验证功能。通过具体示例展示了如何配置FormPanel、设置验证规则及提交表单。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

学习了一段时间的ExtJs,谈谈自已的理解.
拿例子来说一下吧:(select 的加载)
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
//select准备的数据
var combo = new Ext.data.JsonStore({
url:'/a/Site/selectCate.html',
fields: ['id','name','priority']});

combo.load(); //加载数据
var form1 = new Ext.FormPanel({
labelWidth: 150, // label settings here cascade unless overridden
url:'/a/Site/save.html',
frame:true,
title: '网页内容编辑',
bodyStyle:'padding:5px 5px 0',
width: 800,
defaults: {width: 500},
defaultType: 'textfield',
waitMsgTarget: true,
trackResetOnLoad : true,

reader: new Ext.data.JsonReader(
{root:'data'},
[
{name:'sitePage.id',mapping:'id'},
{name:'sitePage.siteTitle',mapping:'siteTitle'},
{name:'sitePage.priority',mapping:'priority'},
{name:'sitePage.siteContent',mapping:'siteContent'},
{name:'sitePage.siteId',mapping:'siteId'}
]),
items: [
new Ext.form.Hidden({ //hidden
name:'sitePage.id'
}),
new Ext.form.ComboBox({
fieldLabel: '網頁分組',
hiddenName:'sitePage.siteId',
store:combo,
valueField:'id',
displayField:'name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
editable:false,
allowBlank:false,
blankText : "網頁分組是必填項",
width:20
}),
{
fieldLabel: '網頁標題',
name: 'sitePage.siteTitle',
allowBlank:false,
blankText : "網頁標題是必填項"
},{
xtype:'htmleditor',
id:'sitePage.siteContent',
fieldLabel:'網頁內容',
allowBlank:false,
blankText : "網頁內容是必填項"
}
, {
fieldLabel: '自定序號',
name: 'sitePage.priority',
xtype: "numberfield",
type: "int",
width:40
}
],

buttons: [{
text: '儲存',
type:'button',
id:'save',
handler: function(){
//表单验证通过
if (form1.form.isValid()){
//提交form
form1.form.submit({
waitMsg:"正在儲存...",
success: function(form,action){
if (action.result.success) {
//Ext.MessageBox.hide();
Ext.Msg.alert("成功",action.result.data);
} else {
Ext.Msg.alert("错误","儲存失敗");
}
},
failure: function(){
Ext.Msg.alert("错误", "服务器错误,请稍候再试!");
}
});
}
}
},{
text: '取消',
type:'reset',
id:'clear',
handler: function(){
form1.form.reset();
}
}
]
});

form1.render(document.body);
form1.getForm().load({url:'/a/Site/load.html?id='+Ext.getDom("sitePage.id").value,waitMsg:'Loading'});

});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值