浏览 402 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
时间：2008-07-04
ext中，如果我动态创建表单，比如用户点击“添加”，则弹出悬浮的添加表单
一般是一个window里边嵌套一个formPanel，里边再嵌套若干TextField等 但这样有时候打开的时候布局都是乱的,多打开几次就好了 怎么回事？ 我的代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
//取得单条记录值
function getId(gridInfo) {
var s = gridInfo.getSelectionModel().getSelected();
if (s) {
return s.id;
}
return 0;
}
//取得多选框值
function getIds(gridInfo) {
var s = gridInfo.getSelectionModel().getSelections();
if (s.length==0) {
return null;
}
var ids = [];
for (i=0;i<s.length;i++) {
ids.push(s[i].id);
}
ids = ids.join(',');
return ids;
}
Ext.onReady(function(){
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({url:'/listUser.do'}),
reader: new Ext.data.JsonReader({
root: 'userlist',
totalProperty: 'totalCount',
id: 'loginname'
},[
'loginname','username','department','zhiwei','email'
])
});
var csm = new Ext.grid.CheckboxSelectionModel();
var colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
csm,
{header:'用户名',width:150,sortable:true,dataIndex:'loginname'},
{header:'姓名', width:200,sortable:true,dataIndex:'username'},
{header:'部门', width:200,sortable:true,dataIndex:'department'},
{header:'职位',width:200,sortable:true,dataIndex:'zhiwei'},
{header:'电子邮件',width:200,sortable:true,dataIndex:'email'}
]);
ds.load({params:{start:0, limit:20}});
var grid = new Ext.grid.GridPanel({
border:false,
layout:'column',
buttonAlign :'left',
autoHeight:true,
loadMask: true,
store:ds,
autoExpandColumn:6,
cm: colModel,
sm: csm,
autoHeight:true,
tbar: [
'输入关键词：',
{xtype:'textfield',width:200,id:'title',name:'title'},
{
text:'搜索',
iconCls:'search',
handler:function(){
ds.load({
params:{start:0, limit:20,
loginname:Ext.get('title').dom.value//取得搜索表单文本域的值，发送到服务端
}
})
}
},{xtype:'tbseparator'},
{text:'添加',iconCls:'add-icon',handler:newUser},{xtype:'tbseparator'},
{text:'修改',iconCls:'edit',handler:editUser},{xtype:'tbseparator'},
//{text:'刷新',iconCls:'refresh',handler:function (){ds.reload();}},{xtype:'tbseparator'},
//{text:'回复',iconCls:'post',handler:searchInfo},{xtype:'tbseparator'},
{text:'删除',iconCls:'del',handler:del},{xtype:'tbseparator'},{text:'高级搜索',iconCls:'advsearch',handler:advSearch}
],
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: ds,
afterPageText:'页',
beforePageText:'第',
firstText:'第一页',
lastText:'最末页',
nextText:'下一页',
prevText:'上一页',
refreshText:'刷新',
displayInfo: true,
displayMsg: '第{0} 到 {1} 条数据 共{2}条',
emptyMsg: '没有数据'
})
});
ds.on('beforeload',function(){
Ext.apply(
this.baseParams,
{
title:Ext.get('title').dom.value
});
});
grid.render('system-userlist');
//删除用户
function del() {
var ids = getIds(grid);
if (ids) {
var dialog = Ext.Msg.show({
title:'删除信息', msg: '你确认要删除选定信息？',
icon:Ext.MessageBox.QUESTION, width:300,
fn:function(btn) {
if (btn =='ok') {
//删除开始
Ext.Ajax.request({
url: '/deleteUser.do?ids='+ids,
success: function(result){
Ext.Msg.alert('操作成功','信息已成功删除');
ds.reload();
}
});
//删除结束
}
},
buttons:{
ok:'确定',cancel:'取消'
}
});
} else {
Ext.Msg.alert('错误','请至少选择一条信息删除！');
}
}
function newUser () {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var boardForm = new Ext.FormPanel({
width: 350,
baseCls: 'x-plain',
labelWidth: 55,
buttonAlign:'center',
bodyStyle : 'padding-top:5px;padding-left:20px;',
defaultType: 'textfield',
defaultWidth: '175',
loadMask: true,
//autoHeight:true,
items: [{
fieldLabel: '用户名',
id:'loginname',
name:'loginname',
allowBlank:false,
blankText:'用户名不能为空',
anchor: '60%'
},{
fieldLabel: '密码',
inputType:'password',
id:'password',
name:'password',
allowBlank:false,
blankText:'密码不能为空',
anchor: '60%'
},{
fieldLabel: '姓名',
id:'username',
name:'username',
allowBlank:false,
blankText:'姓名不能为空',
anchor: '60%'
},{
fieldLabel: '部门',
id:'department',
name:'department',
anchor: '70%'
},{
fieldLabel: '职位',
id:'zhiwei',
name:'zhiwei',
anchor: '60%'
},{
fieldLabel: '电子邮件',
id:'email',
name:'email',
vtype:'email',
vtypeText:'电子邮件地址必须为user@domain.com的形式',
anchor: '80%'
}],
buttons: [{
text:'发表',
//发布函数开始
handler:function(){
if(boardForm.form.isValid()){
Ext.MessageBox.show({
msg: '正在保存，请稍等...',
progressText: 'Saving...',
width:300,
wait:true,
waitConfig: {interval:200},
icon:'download',
animEl: 'saving'
});
setTimeout(function(){}, 10000);
boardForm.form.doAction('submit',{
url:'/editUser.do?act=add',
method:'post',
params:'',
success:function(form,action){
if (action.result.msg=='ok') {
Ext.MessageBox.hide();
Ext.Msg.alert('恭喜','添加用户成功');
postWindow.close();
ds.reload();
} else {
Ext.Msg.alert('错误',action.result.msg);
}
},
failure:function(){
Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
}
});
}
}
//发布函数结束
},{
text:'取消',
handler:function(){boardForm.form.reset();}
}]
});
var postWindow = new Ext.Window({
title: '添加用户',
width: 400,
autoHeight:true,
collapsible:true,
maximizable:true,
layout: 'column',
plain:true,
bodyStyle:'padding:5px;',
modal:true,
items:boardForm
});
postWindow.show();
}
//编辑用户
function editUser () {
var id = getId(grid);
if (!id) {
Ext.Msg.alert('错误', '请选择一条信息修改！');
} else {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var boardForm = new Ext.FormPanel({
width: 350,
baseCls: 'x-plain',
labelWidth: 55,
//labelAlign: 'left',
buttonAlign:'center',
bodyStyle : 'padding-top:5px;padding-left:20px;',
defaultType: 'textfield',
defaultWidth: '175',
loadMask: true,
//autoHeight:true,
items: [{
fieldLabel: '用户名',
id:'loginname',
name:'loginname',
readOnly:true,
allowBlank:false,
blankText:'用户名不能为空',
anchor: '60%'
},{
fieldLabel: '密码',
inputType:'password',
id:'password',
name:'password',
allowBlank:false,
blankText:'密码不能为空',
anchor: '60%'
},{
fieldLabel: '姓名',
id:'username',
name:'username',
allowBlank:false,
blankText:'姓名不能为空',
anchor: '60%'
},{
fieldLabel: '部门',
id:'department',
name:'department',
anchor: '70%'
},{
fieldLabel: '职位',
id:'zhiwei',
name:'zhiwei',
anchor: '60%'
},{
fieldLabel: '电子邮件',
id:'email',
name:'email',
vtype:'email',
vtypeText:'电子邮件地址必须为user@domain.com的形式',
anchor: '80%'
}],
buttons: [{
text:'发表',
//发布函数开始
handler:function(){
if(boardForm.form.isValid()){
Ext.MessageBox.show({
msg: '正在保存，请稍等...',
progressText: 'Saving...',
width:300,
wait:true,
waitConfig: {interval:200},
icon:'download',
animEl: 'saving'
});
setTimeout(function(){}, 10000);
boardForm.form.doAction('submit',{
url:'/editUser.do',
method:'post',
params:'',
success:function(form,action){
if (action.result.msg=='ok') {
Ext.MessageBox.hide();
Ext.Msg.alert('恭喜','修改用户成功');
postWindow.close();
ds.reload();
} else {
Ext.Msg.alert('错误',action.result.msg);
}
},
failure:function(){
Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
}
});
}
}
//发布函数结束
},{
text:'取消',
handler:function(){boardForm.form.reset();}
}]
});
boardForm.load({
url:'/listUser.do?act=edit&loginname='+id,
//root:'userlist',
waitMsg:'正在载入数据',
success:function (){
//Ext.Msg.alert('恭喜','载入数据成功!');
},
failure:function(){
Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
}
});
var postWindow = new Ext.Window({
title: '修改用户',
width: 400,
height:400,
//height:260,
autoHeight:true,
collapsible:true,
maximizable:true,
//layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
modal:true,
items:boardForm
});
postWindow.show();
}
}
function advSearch () {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var boardForm = new Ext.FormPanel({
width: 350,
baseCls: 'x-plain',
labelWidth: 55,
//labelAlign: 'left',
buttonAlign:'center',
bodyStyle : 'padding-top:5px;padding-left:20px;',
defaultType: 'textfield',
defaultWidth: '175',
loadMask: true,
//autoHeight:true,
items: [{
fieldLabel: '用户名',
id:'loginname',
name:'loginname',
anchor: '60%'
},{
fieldLabel: '姓名',
id:'username',
name:'username',
anchor: '60%'
},{
fieldLabel: '部门',
id:'department',
name:'department',
anchor: '70%'
},{
fieldLabel: '职位',
id:'zhiwei',
name:'zhiwei',
anchor: '60%'
},{
fieldLabel: '电子邮件',
id:'email',
name:'email',
vtype:'email',
vtypeText:'电子邮件地址必须为user@domain.com的形式',
anchor: '80%'
}],
buttons: [{
text:'搜索',
//发布函数开始
handler:function(){
ds.load({
params:{start:0, limit:20,
loginname:Ext.get('loginname').dom.value,
username:Ext.get('username').dom.value,
department:Ext.get('department').dom.value,
zhiwei:Ext.get('zhiwei').dom.value,
email:Ext.get('email').dom.value
}
})
postWindow.close();
}
},{
text:'取消',
handler:function(){boardForm.form.reset();}
}]
});
var postWindow = new Ext.Window({
title: '高级搜索',
width: 400,
height:400,
//height:260,
autoHeight:true,
collapsible:true,
maximizable:true,
//layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
modal:true,
items:boardForm
});
postWindow.show();
}
});
function searchInfo() {
//这里是关键，重新载入数据源，并把搜索表单值提交
ds.load({
params:{start:0, limit:20,
title:Ext.get('title').dom.value//取得搜索表单文本域的值，发送到服务端
}
})
}
</script>
<div id="system-userlist"></div>
</body>
</html>
声明：JavaEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
|
| 返回顶楼 | |
|
时间：2008-07-07
我怎么没发现变形呢
|
| 返回顶楼 | |
