ext渲染html通过div用viewport很好布局，我现在如何在ext的弹出窗口window里布局那，我在ext window里放了queryform和grid
grid的布局一直搞不好，设置grid的height就没有列拉条。设置viewConfig : {forceFit : true}则数据显示不正确
[b]问题补充：[/b]
弹出子窗口，要在弹出一窗口如何扑获click事件
[b]问题补充：[/b]
我把代码贴出来：
[code="java"]
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var inputPageSize = 8;
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = "<input type='button' id='update-btn' value='分组电文详细信息' class='x-btn-wrap x-btn' onclick='Info();'/>";
return str;
}
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
header : '电文组号',
dataIndex : 'DESTINATION',
sortable : true
}, {
header : '电文条数',
dataIndex : 'CNT',
sortable : true
}, {
header : '发送时间',
dataIndex : 'SENTLOGTIME',
sortable : true
}, {
header : '操作',
dataIndex : 'SENTMESSAGEID',
renderer : renderDescn
}]);
/**
* 声明数据适配器，将数据源与列模型绑定
*/
var MyRecord = Ext.data.Record.create([{
name : 'DESTINATION',
mapping : 'DESTINATION'
}, {
name : 'SENTLOGTIME',
mapping : 'SENTLOGTIME'
}, {
name : 'CNT',
mapping : 'CNT'
}])
var store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : '../sentmessagegroup.do?command=list'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'totalProperty',
root : 'root'
}, MyRecord)
});
/**
* 生成Bbar,用于分页显示
*/
var bbar = new Ext.PagingToolbar({
pageSize : inputPageSize,
store : store,
displayInfo : true,
displayMsg : '显示第{0}条到{1}条记录，一共{2}条',
emptyMsg : '没有记录'
});
/**
* 声明一个Grid，列表显示信息
*/
var grid = new Ext.grid.GridPanel({
el : 'grid',
region : 'center',
title : '发送分组详细信息',
// height : 430,
trackMouseOver : false,
loadMask : {
msg : '正在加载数据，请稍后.....'
},
ds : store,
cm : cm,
sm : new Ext.grid.RowSelectionModel(),
bbar : bbar,
viewConfig : {
forceFit : true
}
// buttons : [{
// text : '添加电文',
// id : 'addbtn',
// handler : function() {
// addclick();
// }
// }]
});
window.Info = function() {
var PageSize = 8;
var selectRecord = grid.getSelectionModel().getSelected();
var data = selectRecord.get("DESTINATION");
//Ext.get("update").on("click", update);
function desc(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = "<input type='button' id='update' value='详细信息' class='x-btn-wrap x-btn' onclick='update();'/>";
return str;
}
//Ext.get("update").on("click", update);
var infocm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
header : '序列号',
dataIndex : 'SENTMESSAGEID',
sortable : true
}, {
header : '电文插入时间',
dataIndex : 'SENTLOGTIME',
sortable : true
}, {
header : '电文号',
dataIndex : 'MESSAGEID',
sortable : true
}, {
header : '电文内容',
dataIndex : 'BUFFERDATA',
sortable : true
}, {
header : '终点代码',
dataIndex : 'DESTINATION',
sortable : true
}, {
header : '长度',
dataIndex : 'LENGTH',
sortable : true
}, {
header : '发送结果',
dataIndex : 'SENDRESULT',
sortable : true
}, {
header : '成功时间',
dataIndex : 'PROCESSLOGTIME',
sortable : true
}, {
header : '重发次数',
dataIndex : 'RESENDNUMBER',
sortable : true
}, {
header : '标注',
dataIndex : 'MEMO',
sortable : true
}, {
header : '操作',
dataIndex : 'SENTMESSAGEID',
renderer : desc
}]);
var infoRecord = Ext.data.Record.create([{
name : 'SENTMESSAGEID',
mapping : 'SENTMESSAGEID'
}, {
name : 'SENTLOGTIME',
mapping : 'SENTLOGTIME'
}, {
name : 'MESSAGEID',
mapping : 'MESSAGEID'
}, {
name : 'BUFFERDATA',
mapping : 'BUFFERDATA'
}, {
name : 'BUFFERCONTENT',
mapping : 'BUFFERCONTENT'
}, {
name : 'DESTINATION',
mapping : 'DESTINATION'
}, {
name : 'LENGTH',
mapping : 'LENGTH'
}, {
name : 'SENDRESULT',
mapping : 'SENDRESULT'
}, {
name : 'PROCESSLOGTIME',
mapping : 'PROCESSLOGTIME'
}, {
name : 'RESENDNUMBER',
mapping : 'RESENDNUMBER'
}, {
name : 'MEMO',
mapping : 'MEMO'
}])
var infostore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : '../sentmessagegroup.do?command=grouplist'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'totalProperty',
root : 'root'
}, infoRecord)
});
infostore.baseParams = {
destination : data
};
var infobbar = new Ext.PagingToolbar({
pageSize : PageSize,
store : infostore,
displayInfo : true,
displayMsg : '显示第{0}条到{1}条记录，一共{2}条',
emptyMsg : '没有记录'
});
var infogrid = new Ext.grid.GridPanel({
region : 'center',
title : '发送电文详细信息',
height : 210,
trackMouseOver : false,
loadMask : {
msg : '正在加载数据，请稍后.....'
},
ds : infostore,
cm : infocm,
sm : new Ext.grid.RowSelectionModel(),
bbar : infobbar
// viewConfig : {
// forceFit : true
// }
// buttons : [{
// text : '添加电文',
// id : 'addbtn',
// handler : function() {
// addclick();
// }
// }]
});
function update() {
alert("update start");
var infowin;
if (!infowin) {
var selectRecord = infogrid.getSelectionModel().getSelected();
var infofrom = new Ext.form.FormPanel({
labelAlign : 'top',
buttonAlign : 'right',
title : '电文详细信息',
bodyStyle : 'padding:5px',
height : 415,
width : 650,
frame : true,
url : '../sentmessage.do?command=again',
items : [{
layout : 'column',
border : false,
items : [{
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
fieldLabel : '序列号',
name : 'SENTMESSAGEID',
readOnly : true,
style : "background: #B9B9C3;",
anchor : '85%'
}]
}, {
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
fieldLabel : '电文插入时间',
name : 'SENTLOGTIME',
minLength : 1,
maxLength : 25,
readOnly : true,
style : "background: #B9B9C3;",
anchor : '85%'
}]
}]
}, {
layout : 'column',
border : false,
items : [{
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
fieldLabel : '电文号',
name : 'MESSAGEID',
readOnly : true,
style : "background: #B9B9C3;",
anchor : '85%'
}]
}, {
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
fieldLabel : '发送方主机代号',
name : 'DESTINATION',
minLength : 0,
maxLength : 17,
readOnly : true,
style : "background: #B9B9C3;",
anchor : '85%'
}]
}]
}, {
layout : 'column',
border : false,
items : [{
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
fieldLabel : '长度',
name : 'LENGTH',
readOnly : true,
style : "background: #B9B9C3;",
anchor : '85%'
}]
}, {
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
xtype : 'textfield',
fieldLabel : '处理标志',
name : 'SENDRESULT',
minLength : 0,
maxLength : 17,
// readOnly : true,
// disabled:true,
anchor : '85%'
}]
}]
}, {
layout : 'column',
border : false,
items : [{
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
fieldLabel : '应用处理时间',
name : 'PROCESSLOGTIME',
minLength : 1,
maxLength : 17,
readOnly : true,
style : "background: #B9B9C3;",
anchor : '85%'
}]
}, {
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
fieldLabel : '重发次数',
name : 'RESENDNUMBER',
minLength : 1,
maxLength : 17,
readOnly : true,
style : "background: #B9B9C3;",
anchor : '85%'
}]
}]
}, {
layout : 'column',
border : false,
items : [{
columnWidth : .93,
layout : 'form',
border : false,
items : [{
xtype : 'textarea',
fieldLabel : '电文内容',
name : 'BUFFERCONTENT',
minLength : 1,
maxLength : 5000,
anchor : '100%'
}]
}]
}, {
layout : 'column',
border : false,
items : [{
columnWidth : .93,
layout : 'form',
border : false,
items : [{
xtype : 'textarea',
fieldLabel : '标注',
name : 'MEMO',
minLength : 1,
maxLength : 500,
anchor : '100%'
}]
}]
}],
buttons : [{
text : '手动重发',
handler : function() {
from.getForm().submit({
success : function(form, action) {
var json = action.response.responseText;
var check = eval("(" + json + ")");
if (check.update == true) {
Ext.MessageBox.alert('信息',
'更发成功，点击返回列表页面');
grid.render();
}
infostore.load({
params : {
start : 0,
limit : inputPageSize
}
});
win.close();
},
failure : function(form, action) {
var json = action.response.responseText;
var check = eval("(" + json + ")");
if (check.check == false) {
Ext.MessageBox
.alert('错误', '抱歉，该用户权限不够');
} else {
Ext.MessageBox.alert('信息',
'添加失败，请与管理员联系!');
}
}
});
}
}]
}
);
infowin = new Ext.Window({
title : 'Window',
closable : true,
width : 660,
height : 435,
// border:false,
plain : true,
draggable : true,
collapsible : true,
closeAction : 'hide',
items : [infofrom]
});
}
// from.findField("BUFFERDATA").setValue("blob test");
//Ext.get('update-btn').get('update').on("click", update);
infowin.show(Ext.get('update'));
/**
* form加载事件
*/
// from.form.findField("BUFFERDATA").setValue(blob.bufferdata);
infofrom.getForm().loadRecord(selectRecord);
// from.form.findField("BUFFERDATA").setValue(blob.bufferdata);
};
var queryform = new Ext.FormPanel({
labelAlign : 'left',
region : 'north',
title : '电文查询',
buttonAlign : 'right',
bodyStyle : 'padding:5px',
// width : 300,
height : 150,
frame : true,
labelWidth : 80,
viewConfig : {
forceFit : true
},
items : [{
layout : 'column',
border : false,
items : [{
columnWidth : .5,
layout : 'form',
border : false,
items : [{
// 用户编号
xtype : 'textfield',
fieldLabel : '电文号',
name : 'messageid',
anchor : '85%'
},
{
// 用户编号
xtype : 'datefield',
fieldLabel : '开始时间',
name : 'startdate',
format : 'Y-m-d',
anchor : '85%'
}
]
}, {
columnWidth : .5,
layout : 'form',
border : false,
items : [{
// 用户名
xtype : 'textfield',
fieldLabel : '发送结果',
name : 'sendresult',
anchor : '85%'
}, {
// 用户名
xtype : 'datefield',
fieldLabel : '结束时间',
name : 'enddate',
format : 'Y-m-d',
anchor : '85%'
}]
}]
}],
buttons : [
{
text : '查询',
handler : function() {
var messageid = queryform.form.findField("messageid")
.getValue();
// alert("messageid:"+messageid);
var sendresult = queryform.form.findField("sendresult")
.getValue();
// alert("destination:"+destination);
var start = queryform.form.findField("startdate")
.getValue();
var startdate;
// alert("start:"+start);
if (start != null && start != "") {
startdate = start.format("Y-m-d");
}
// alert("startdate:"+startdate);
var end = queryform.form.findField("enddate").getValue();
var enddate;
// alert("end:"+end);
if (end != null && end != "") {
enddate = end.format("Y-m-d");
}
// alert("enddate:"+enddate);
infostore.baseParams = {
messageid : messageid,
// destination : data,
startdate : startdate,
sendresult : sendresult,
enddate : enddate
};
infostore.reload({
params : {
start : 0,
limit : inputPageSize
}
});
}
}, {
text : '重置',
handler : function() {
queryform.form.reset();
}
}]
})
var win = new Ext.Window({
title : 'infoWindow',
closable : true,
width : 660,
height : 500,
// border:false,
plain : true,
draggable : true,
collapsible : true,
closeAction : 'hide',
layout : 'border',
items : [queryform, infogrid]
})
// infogrid.render();
infostore.load({
params : {
start : 0,
limit : PageSize
}
})
// infogrid.render();
win.show(Ext.get('update-btn'));
}
// =================================表单提交========================================
/**
* 为Grid的添加按钮编写单击事件
*/
function addclick() {
var win;
if (!win) {
var from = new Ext.form.FormPanel({
labelAlign : 'top',
buttonAlign : 'right',
title : '添加发送电文信息',
bodyStyle : 'padding:5px',
height : 275,
width : 650,
frame : true,
autoScroll : true,
url : '../sentmessage.do?command=add',
items : [{
layout : 'column',
border : false,
items : [{
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
fieldLabel : '序列号',
name : 'MAPPINGMESSAGEID',
anchor : '85%'
}, {
xtype : 'textfield',
fieldLabel : '电文号',
name : 'MESSAGEID',
anchor : '85%'
}, {
xtype : 'textfield',
fieldLabel : '长度',
name : 'LENGTH',
anchor : '85%'
}, {
xtype : 'textfield',
fieldLabel : '重发次数',
name : 'RESENDNUMBER',
minLength : 1,
maxLength : 17,
anchor : '85%'
}]
}, {
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
fieldLabel : '电文方向',
name : 'DIRECTION',
minLength : 1,
maxLength : 17,
anchor : '85%'
},
{
xtype : 'textfield',
fieldLabel : '主机号',
name : 'HOSTDC',
minLength : 0,
maxLength : 17,
anchor : '85%'
}, {
xtype : 'textfield',
fieldLabel : '电文组号',
name : 'MESSAGEGROUPID',
minLength : 0,
maxLength : 17,
anchor : '85%'
}]
}]
}],
buttons : [{
text : '提交',
handler : function() {
if (from.form.isValid()) {
from.getForm().submit({
success : function() {
Ext.MessageBox.alert('信息', '添加成功，点击返回列表页面');
grid.render();
store.load({
params : {
start : 0,
limit : inputPageSize
}
});
win.close();
},
failure : function() {
Ext.MessageBox.alert('信息', '添加失败，请与管理员联系!');
}
});
}
}
}, {
text : '重置',
handler : function() {
from.getForm().reset();
}
}]
});
/**
* 声明一个window,包装FormPanel
*/
win = new Ext.Window({
title : 'InfoWindow',
closable : true,
width : 660,
height : 300,
// border:false,
plain : true,
draggable : true,
collapsible : true,
closeAction : 'hide',
items : [from]
});
}
win.show(Ext.get('addbtn'));
};
window.delInfo = function() {
var sm = grid.getSelectionModel();
var count = sm.getCount();
if (count == 0) {
Ext.MessageBox.alert('信息', '您没有勾选任何记录!');
} else {
Ext.MessageBox.confirm('Message', '确定要删除？', function(btn) {
if (btn == 'yes') {
var record = sm.getSelected();
var str = record.get('MAPPINGMESSAGEID');
Ext.Ajax.request({
url : '../sentmessage.do?command=delete',
params : {
MAPPINGMESSAGEID : str
},
success : function() {
Ext.MessageBox.alert('信息', '删除成功');
store.reload();
},
failure : function() {
Ext.MessageBox.alert('错误', '请与后台服务人员联系');
},
timeout : 30000,
headers : {
'my-header' : 'foo'
}
});
}
});
}
};
window.updateInfo = function() {
alert("parent upadateinfo");
var win;
if (!win) {
var selectRecode = grid.getSelectionModel().getSelected();
var from = new Ext.form.FormPanel({
labelAlign : 'top',
buttonAlign : 'right',
title : '电文详细信息',
bodyStyle : 'padding:5px',
height : 415,
width : 650,
frame : true,
url : '../sentmessage.do?command=again',
items : [{
layout : 'column',
border : false,
items : [{
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
fieldLabel : '序列号',
name : 'SENTMESSAGEID',
readOnly : true,
style : "background: #B9B9C3;",
anchor : '85%'
}]
}, {
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
fieldLabel : '电文插入时间',
name : 'SENTLOGTIME',
minLength : 1,
maxLength : 25,
readOnly : true,
style : "background: #B9B9C3;",
anchor : '85%'
}]
}]
}, {
layout : 'column',
border : false,
items : [{
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
fieldLabel : '电文号',
name : 'MESSAGEID',
readOnly : true,
style : "background: #B9B9C3;",
anchor : '85%'
}]
}, {
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
fieldLabel : '发送方主机代号',
name : 'DESTINATION',
minLength : 0,
maxLength : 17,
readOnly : true,
style : "background: #B9B9C3;",
anchor : '85%'
}]
}]
}, {
layout : 'column',
border : false,
items : [{
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
fieldLabel : '长度',
name : 'LENGTH',
readOnly : true,
style : "background: #B9B9C3;",
anchor : '85%'
}]
}, {
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
xtype : 'textfield',
fieldLabel : '处理标志',
name : 'SENDRESULT',
minLength : 0,
maxLength : 17,
// readOnly : true,
// disabled:true,
anchor : '85%'
}]
}]
}, {
layout : 'column',
border : false,
items : [{
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
fieldLabel : '应用处理时间',
name : 'PROCESSLOGTIME',
minLength : 1,
maxLength : 17,
readOnly : true,
style : "background: #B9B9C3;",
anchor : '85%'
}]
}, {
columnWidth : .5,
layout : 'form',
border : false,
items : [{
xtype : 'textfield',
fieldLabel : '重发次数',
name : 'RESENDNUMBER',
minLength : 1,
maxLength : 17,
readOnly : true,
style : "background: #B9B9C3;",
anchor : '85%'
}]
}]
}, {
layout : 'column',
border : false,
items : [{
columnWidth : .93,
layout : 'form',
border : false,
items : [{
xtype : 'textarea',
fieldLabel : '电文内容',
name : 'BUFFERCONTENT',
minLength : 1,
maxLength : 5000,
anchor : '100%'
}]
}]
}, {
layout : 'column',
border : false,
items : [{
columnWidth : .93,
layout : 'form',
border : false,
items : [{
xtype : 'textarea',
fieldLabel : '标注',
name : 'MEMO',
minLength : 1,
maxLength : 500,
anchor : '100%'
}]
}]
}],
buttons : [{
text : '手动重发',
handler : function() {
from.getForm().submit({
success : function(form, action) {
var json = action.response.responseText;
var check = eval("(" + json + ")");
if (check.update == true) {
Ext.MessageBox.alert('信息', '更发成功，点击返回列表页面');
grid.render();
}
store.load({
params : {
start : 0,
limit : inputPageSize
}
});
win.close();
},
failure : function(form, action) {
var json = action.response.responseText;
var check = eval("(" + json + ")");
if (check.check == false) {
Ext.MessageBox.alert('错误', '抱歉，该用户权限不够');
} else {
Ext.MessageBox.alert('信息', '添加失败，请与管理员联系!');
}
}
});
}
}]
}
);
win = new Ext.Window({
title : 'Window',
closable : true,
width : 660,
height : 435,
// border:false,
plain : true,
draggable : true,
collapsible : true,
closeAction : 'hide',
items : [from]
});
}
// from.findField("BUFFERDATA").setValue("blob test");
win.show(Ext.get('update-btn'));
/**
* form加载事件
*/
// from.form.findField("BUFFERDATA").setValue(blob.bufferdata);
from.getForm().loadRecord(selectRecode);
// from.form.findField("BUFFERDATA").setValue(blob.bufferdata);
};
// =================================渲染呈现========================================
/**
* 渲染呈现Grid，Store初始化
*/
var queryform = new Ext.FormPanel({
labelAlign : 'left',
region : 'north',
title : '电文查询',
buttonAlign : 'right',
bodyStyle : 'padding:5px',
width : 300,
height : 150,
frame : true,
labelWidth : 80,
items : [{
layout : 'column',
border : false,
items : [{
columnWidth : .5,
layout : 'form',
border : false,
items : [{
// 用户编号
xtype : 'textfield',
fieldLabel : '电文号',
name : 'messageid',
anchor : '85%'
},
{
// 用户编号
xtype : 'datefield',
fieldLabel : '开始时间',
name : 'startdate',
format : 'Y-m-d',
anchor : '85%'
}
]
}, {
columnWidth : .5,
layout : 'form',
border : false,
items : [{
// 用户名
xtype : 'textfield',
fieldLabel : '终点代码',
name : 'destination',
anchor : '85%'
}, {
// 用户名
xtype : 'datefield',
fieldLabel : '结束时间',
name : 'enddate',
format : 'Y-m-d',
anchor : '85%'
}]
}]
}],
buttons : [
{
text : '查询',
handler : function() {
var messageid = queryform.form.findField("messageid")
.getValue();
// alert("messageid:"+messageid);
var destination = queryform.form.findField("destination")
.getValue();
// alert("destination:"+destination);
var start = queryform.form.findField("startdate").getValue();
var startdate;
// alert("start:"+start);
if (start != null && start != "") {
startdate = start.format("Y-m-d");
}
// alert("startdate:"+startdate);
var end = queryform.form.findField("enddate").getValue();
var enddate;
// alert("end:"+end);
if (end != null && end != "") {
enddate = end.format("Y-m-d");
}
// alert("enddate:"+enddate);
store.baseParams = {
messageid : messageid,
destination : destination,
startdate : startdate,
enddate : enddate
};
store.reload({
params : {
start : 0,
limit : inputPageSize
}
});
}
}, {
text : '重置',
handler : function() {
queryform.form.reset();
}
}]
})
var viewport = new Ext.Viewport({
layout : 'border',
items : [queryform, grid]
})
grid.render();
store.load({
params : {
start : 0,
limit : inputPageSize
}
});
})
Ext.override(Ext.menu.DateMenu, {
render : function() {
Ext.menu.DateMenu.superclass.render.call(this);
if (Ext.isGecko) {
this.picker.el.dom.childNodes[0].style.width = '178px';
this.picker.el.dom.style.width = '178px';
}
}
});
[/code]
点击主页面的分组详细信息,跳出一个子窗口,显示该组的详细纪录分页及查询,我现在想要的是在点击子窗口的的详细信息在跳出一个窗口,显示该条纪录的详细信息
[b]问题补充：[/b]
to yourgame:我截图贴上来你就明白了，图1是主窗口点击上面的分组电文详细信息，就跳出图2子窗口，我现在就想点击图2的详细信息在跳出一个子窗口图3。图2是渲染到图1的一个div块的id，图2在跳出一个窗口3就没有可渲染的地方，因为图2是一个ext window不包含任何html，我的问题就在这里。
[b]问题补充：[/b]
to yourgame:你还是没理解我要啥，你这只实现我做的工作，我的意思主页面跳出一个ext window，点击这个ext window上的grid在跳出一个ext window
[b]问题补充：[/b]
to yourname:子窗口可以跳出，但是值代不出来，第3个窗口的列信息和主窗口是不一样的
