xiasha5566
2010-02-21 21:04 阅读 483

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

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

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

11条回答 默认 最新

  • 已采纳
    helencabell helencabell 2010-02-23 13:57

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

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

    点赞 评论 复制链接分享
  • noriri noriri 2010-02-22 08:07

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

    点赞 评论 复制链接分享
  • yonglin4605 yonglin4605 2010-02-22 09:01

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

    点赞 评论 复制链接分享
  • xkuff xkuff 2010-02-22 10:06

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

    点赞 评论 复制链接分享
  • helencabell helencabell 2010-02-22 10:25

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

    点击查看详细按钮的时候,获得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,显示滚动条。

    点赞 评论 复制链接分享
  • yonglin4605 yonglin4605 2010-02-22 10:40

    你根据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]

    点赞 评论 复制链接分享
  • helencabell helencabell 2010-02-22 16:50

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

    选中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) {
    }
    });

    红字的部分自己修改一下

    点赞 评论 复制链接分享
  • helencabell helencabell 2010-02-23 09:50

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

    点赞 评论 复制链接分享
  • helencabell helencabell 2010-02-23 10:58

    去掉reader: Userreader,

    点赞 评论 复制链接分享
  • helencabell helencabell 2010-02-23 11:45

    除了数据之外,我这里已经都能正常显示了。
    你的代码我整理了一下,窗口高度我改成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) {
        }
    });
    

    }

    点赞 评论 复制链接分享
  • helencabell helencabell 2010-02-23 13:34

    如果分辨率按照1024*768计算的话,去掉浏览器工具栏等等的高度,大概也就只能设置成550左右,在LookForm里加上autoScroll: true,去掉baseCls: 'x-plain',项目过多的时候就会显示滚动条。

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

    点赞 评论 复制链接分享

相关推荐