chsboy
2009-04-16 14:54 阅读 415

ext的弹出窗口如何布局?

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个窗口的列信息和主窗口是不一样的

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

11条回答 默认 最新

  • 已采纳
    zhoujuan520 zhoujuan520 2009-04-22 11:14

    [quote]to yourname:子窗口可以跳出,但是值代不出来,第3个窗口的列信息和主窗口是不一样的 [/quote]
    无语~~~~~~~~

    思路也给你了.也帮你实现了.总不可能还要我帮你做出来吧??

    第3个窗口的列信息和主窗口是不一样的......我这不是在做个示例嘛!
    你把他换成你想要的数据和格式不就行了.god

    点赞 评论 复制链接分享
  • zhoujuan520 zhoujuan520 2009-04-16 15:15

    哎,官方有示例.研究下吧.不弄明白你就学不到东西

    点赞 评论 复制链接分享
  • zhoujuan520 zhoujuan520 2009-04-16 15:42
  • iteye_18964 iteye_18964 2009-04-16 16:49

    最好是把代码贴出来看看

    点赞 评论 复制链接分享
  • wang609128516 wang609128516 2009-04-16 23:03

    这可能和应用的浏览器有关,或者就是定义布局有些问题把.

    点赞 评论 复制链接分享
  • kc_ren kc_ren 2009-04-18 20:07

    layout:"fit"

    点赞 评论 复制链接分享
  • wang609128516 wang609128516 2009-04-20 10:52

    其实我也遇到过这样的问题,不过有时无意间也就出来了,不过刚加载时没有,这个问题也感到很奇怪!

    点赞 评论 复制链接分享
  • zhoujuan520 zhoujuan520 2009-04-20 11:18

    弹出窗口里面有什么?单击事件,那个组件的单击事件,问题要表述清楚
    最好把你的示例用附件的形式附加在问题里面.这样才可以最快的帮你解决问题.

    你老是一点点挤牙膏.回答问题的人都没有耐性了.真受不了

    点赞 评论 复制链接分享
  • zhoujuan520 zhoujuan520 2009-04-20 19:44

    你给的代码是无法运行的,因为他没有后台数据的支持,可以的话加我3990995远程帮你看

    点赞 评论 复制链接分享
  • zhoujuan520 zhoujuan520 2009-04-21 11:21

    [code="js"]
    var str = ""; //这个是渲染方法里面的代码,你不能为其指定id,因为这里渲染的都是一样的对象,而id是唯一的,并且id在这里也好像没有什么意义
    [/code]
    从你的图2可以看出你弹出的窗体好像有问题.

    我这里按照你的意思大概写了一个例子.希望对你有所帮助
    [code="js"]
    /*

    Ext.onReady(function(){

    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    
    var myData = [
        ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];
    
    // example of custom renderer function
    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }
    
    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }
    
    // create the data store
    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);
    window.info = function(title){//在这个方法里面想放什么东西都可以,参数可以传进来.但是你不能为这个里面的组件指定id
        var win = new Ext.Window({
            width : 300,
            height : 300,
            title : title 
        })
        win.show();
    } 
    
    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
            {header: "按钮",width: 100,dataIndex: 'company',renderer : function(v){
                var title = "\"" + v + "\"";
                return "<input type='button' value='详细信息' class='x-btn-wrap x-btn' onclick='info(" + title + ")'/>";//你可以把参数从这里传递进去,这里最好不要指定id
            }}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height:450,
        width:500,
        title:'Array Grid'
    });
    
    grid.render(document.body);
    
    grid.getSelectionModel().selectFirstRow();
    

    });
    [/code]

    点赞 评论 复制链接分享
  • zhoujuan520 zhoujuan520 2009-04-21 17:20

    我怎么不知道你的意思呢?你就是第一次弹出来有地方渲染,第二次就不知道渲染到什么地方去,其实你压根就不需要渲染到某个id上面,第一次你都知道弹出来了.第二次还不简单,看代码,想弹多少层就多少层,当然这个只是一个示例,正式应用的时候不会这样.

    [code="js"]
    Ext.onReady(function(){
    var myData = [
    ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
    ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
    ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
    ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
    ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
    ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
    ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
    ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
    ];
    function change(val){
    if(val > 0){
    return '' + val + '';
    }else if(val < 0){
    return '' + val + '';
    }
    return val;
    }
    function pctChange(val){
    if(val > 0){
    return '' + val + '%';
    }else if(val < 0){
    return '' + val + '%';
    }
    return val;
    }
    var store = new Ext.data.SimpleStore({
    fields: [
    {name: 'company'},
    {name: 'price', type: 'float'},
    {name: 'change', type: 'float'},
    {name: 'pctChange', type: 'float'},
    {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]
    });
    store.loadData(myData);
    window.info = function(title){//在这个方法里面想放什么东西都可以,参数可以传进来.但是你不能为这个里面的组件指定id
    var win = new Ext.Window({
    width : 300,
    height : 300,
    title : title,
    items : [{
    xtype : 'grid',
    store : new Ext.data.SimpleStore({
    autoLoad:true,
    data : myData,
    fields: [
    {name: 'company'},
    {name: 'price', type: 'float'},
    {name: 'change', type: 'float'},
    {name: 'pctChange', type: 'float'},
    {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]
    }),
    columns: [
    {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
    {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
    {header: "按钮",width: 100,dataIndex: 'company',renderer : function(v){
    var title = "\"" + v + "\"";
    return "";
    }}
    ],
    height:250,
    width:300,
    title:'Array Grid'
    }]
    })
    win.show();
    }
    var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
    {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
    {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
    {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
    {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
    {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
    {header: "按钮",width: 100,dataIndex: 'company',renderer : function(v){
    var title = "\"" + v + "\"";
    return "";//你可以把参数从这里传递进去,这里最好不要指定id
    }}
    ],
    stripeRows: true,
    autoExpandColumn: 'company',
    height:450,
    width:500,
    title:'Array Grid'
    });
    grid.render(document.body);
    grid.getSelectionModel().selectFirstRow();
    });
    [/code]

    点赞 评论 复制链接分享

相关推荐