ext 查看某条记录的详细信息,我想另外弹出一个页面显示,该如何写

ext gird 列的某一列,根据编号 显示详细信息;

在windows 里 套用一个ext.from.frompanel 时,当表单大时,显示不全,是因为焦点的问题?还是什么呢
如图1,2

所以我想新建一个也页面显示 ,专门 用来显示 详细信息。
不知道该怎么做了,请指教,谢谢

11个回答

fieldset的宽度也控制一下,就不会有横向滚动条了。

var LookForm = new Ext.FormPanel({
reader: Userreader,
autoScroll: true,
[color=red]defaults: {
width: 740
},[/color]
// baseCls: 'x-plain',
...
});

估计是你windows的大小,form的大小,textfield的大小的问题,

那你就用 来弹出页面显示就好了啊。

试试window里面fieldset控件使用fit布局,然后里面的textfield使用anchor来控件宽度。

你要实现的功能是这样吗?

点击查看详细按钮的时候,获得grid中选中行的数据,创建一个formpanel,然后把它放到window中,显示窗口。

大体的代码是:
var win = new Ext.Window({
id: "xxx",
title: "xxx",
layout: 'fit',
width: 350, // 指定窗口宽度,根据表单项目自己修改
height: 280, // 指定窗口高度,根据表单项目自己修改
resizable: false,
modal: true, // 以模态方式显示
items: formpanel
});
win.show();

是我写得这样,没错吧!
从你的抓图2来看,formpanel被查询客户的tabpanel挡住了,这个层的关系应该是不正确的,formpanel所在的窗口应该是在最上层的。
至于表单项目很多,显示不下时,应该指定Window的大小,并在formpanel的配置选项中使用autoScroll: true,显示滚动条。

你根据ID拼出一个url来啊

你应该是用grid了,给你参考一下
[code="js"]
{header:'操作',dataIndex:'operate',renderer:function(value,metadata,record){
var name=record.get("name");
var id=record.get('id');
return '弹出';
}}
[/code]

按我刚才说的那样写得话,就不会有层的问题。

选中grid行,点击"查看详细"按钮,在按钮的点击事件里这么写:
var grid = Ext.getCmp([color=red]gridId[/color]);
var selRecord = grid.getSelectionModel().getSelected();
if (selRecord == null || selRecord == '') {
return;
}
var id = selRecord.data["[color=red]id[/color]"];

Ext.Ajax.request({
method: 'POST',
url: "[color=red]xxx[/color]",// 查询数据的URL
params: {
id: id
},
success: function(response, option) {
// 创建[color=red]formpanel[/color]...
var win = new Ext.Window({
id: "[color=red]xxx[/color]",
title: "[color=red]xxx[/color]",
layout: 'fit',
width: [color=red]350[/color],

height: [color=red]280[/color],

resizable: false,
modal: true,
items: formpanel
});
win.show();
},
failure: function(response, option) {
}
});

红字的部分自己修改一下

能把你那部分代码贴出来吗?我看看

去掉reader: Userreader,

除了数据之外,我这里已经都能正常显示了。
你的代码我整理了一下,窗口高度我改成550了,把Userreader的定义加上,取id的部分你再修改一下就可以了。

var selectedKeys = grid.selModel.selections.keys;
var id = grid.selModel.selections.keys;// id取得不正确

if (selectedKeys.length != 1) {
Ext.Msg.alert('提示', '请选择一条记录!');
} else {
Ext.Ajax.request({
method: 'POST',
url: "/PJYD/jsp/customer/customer_manager.jsp",// 查询数据的URL ?id=+id,[color=red]既然用POST了,就没有必要再用问号传值了,用下面的params就可以[/color]
params: {
id: id
},
success: function(response, option) {
// var Userreader;
var LookForm = new Ext.FormPanel({
reader: Userreader,
baseCls: 'x-plain',
labelWidth: 55,
defaultType: 'textfield',
labelAlign: 'left',
frame: true,
bodyStyle: 'padding: 5px 5px 0',
items: [{
xtype: 'fieldset',
title: '客户自身情况',
collapsible: true,
height: 180,
items: [{
layout: 'column',
border: false,
items: [{
columnWidth: .5,
layout: 'form',
labelSeparator: ' ',
labelStyle: 'text-align: right;width: 60;',
border: false,
items: [{
cls: 'key',
xtype: 'textfield',
fieldLabel: '客户名称',
name: 'name',
editable: false,
anchor: '90%'
}]
}, {
columnWidth: .5,
layout: 'form',
labelSeparator: ' ',
labelStyle: 'text-align: right;width: 60;',
border: false,
items: [{
cls: 'key',
xtype: 'textfield',
fieldLabel: '客户地址',
name: 'addr',
anchor: '90%'
}]
}]
}, {
layout: 'column',
border: false,
items: [{
columnWidth: .5,
layout: 'form',
labelSeparator: ' ',
labelStyle: 'text-align: right;width: 60;',
border: false,
items: [{
cls: 'key',
xtype: 'textfield',
fieldLabel: '客户性质',
name: 'property',
anchor: '90%'
}]
}, {
columnWidth: .5,
layout: 'form',
labelSeparator: ' ',
labelStyle: 'text-align: right;width: 60;',
border: false,
items: [{
cls: 'key',
xtype: 'textfield',
fieldLabel: '所属行业',
name: 'belong',
anchor: '90%'
}]
}]
}, {
layout: 'column',
border: false,
items: [{
columnWidth: .5,
layout: 'form',
labelSeparator: ' ',
labelStyle: 'text-align: right;width: 60;',
border: false,
items: [{
cls: 'key',
xtype: 'textfield',
fieldLabel: '客户规模',
name: 'size',
anchor: '90%'
}]
}, {
columnWidth: .5,
layout: 'form',
labelSeparator: ' ',
labelStyle: 'text-align: right;width: 60;',
border: false,
items: [{
cls: 'key',
xtype: 'textfield',
fieldLabel: '经营状况',
name: 'status',
anchor: '90%'
}]
}]
}, {
layout: 'column',
border: false,
items: [{
columnWidth: 1,
layout: 'form',
labelSeparator: ' ',
labelStyle: 'text-align: right;width: 60;',
border: false,
items: [{
cls: 'key',
xtype: 'textfield',
fieldLabel: '经营范围',
name: 'scope',
anchor: '95%'
}]
}]
}, {
layout: 'column',
border: false,
items: [{
columnWidth: 1,
layout: 'form',
labelSeparator: ' ',
labelStyle: 'text-align: right;width: 60;',
border: false,
items: [{
cls: 'key',
xtype: 'textfield',
fieldLabel: '主营项目',
name: 'main_item',
anchor: '95%'
}]
}]
}, {
layout: 'column',
border: false,
items: [{
columnWidth: 1,
layout: 'form',
labelSeparator: ' ',
labelStyle: 'text-align: right;width: 60;',
border: false,
items: [{
cls: 'key',
xtype: 'textfield',
fieldLabel: '业务流程',
name: 'flow',
anchor: '95%'
}]
}]
}]
}],
buttons: [{
text: '关闭',
handler: function(){
LookForm.getForm().reset();
win.close();
}
}]
});

        var win = new Ext.Window({
            layout: 'fit',
            width: 800,
            height: 550,
            resizable: false,
            modal: true,
            title: '查看客户详细信息',
            items: LookForm
        });
        win.show();
    },
    failure: function(response, option) {
    }
});

}

共11条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐