如何解决 ext js3 中出现的多个文本字段？

Posted 2023-02-26

【中文标题】如何解决 ext js3 中出现的多个文本字段？

【英文标题】：How to solve multiple occuring text fields in ext js3?

【发布时间】：2015-03-04 12:41:17

【问题描述】：

我有一个选项卡面板。我打开一个选项卡并显示一个网格。然后我双击一行并打开一个窗口。在这个窗口中我有一个面板，在这个面板中我有 4 个文本字段。

然后我关闭窗口，然后双击另一行，窗口打开，面板中的字段正确显示如下。

标签            标签       标签      标签 |_______| |______| |______| |______|

当我关闭选项卡并再次打开它并单击行打开窗口时，窗口已打开，但在我的面板的项目中显示了 3 次。我的意思是它看起来像下面这样：

标签            标签       标签       标签 标签            标签       标签        标签 标签                                                                                                                                                                                                                                                                                         标签

而且每次点击的行数都在增加... 我的窗口是;

var win = new Ext.Window(
        width:  680,
        height: 250,
        title: 'Details',
        layout: 'border',
        modal: true,
        closeAction:'hide',
        items: [top,grid]
    );

和我的面板（名字在顶部）

var top = new Ext.FormPanel(
        labelAlign: 'top',
        region  :   'north',
        frame:true,
        bodyStyle:'padding:5px 5px 0',
        width: 680,
        height:75,
        items: [
            layout:'column',
            items:[
                columnWidth:.25,
                layout: 'form',
                items: [
                    xtype:'textfield',
                    id : 'date',
                    fieldLabel: '<font color="red" style="margin-left: 25px" ><b>date</b></font>',
                    labelSeparator: '',
                    style: 'text-align: center;',
                    width:120
                ]
            ,
                columnWidth:.25,
                layout: 'form',
                items: [
                    id : 'xxx',
                    xtype:'textfield',
                    fieldLabel: '<font color="red"style="margin-left: 25px" ><b>xxxx</b></font>',
                    labelSeparator: '',
                    style: 'text-align: center;',
                    width:120
                ]
            ,
                columnWidth:.25,
                layout: 'form',
                items: [
                    id : 'cost',
                    xtype:'textfield',
                    fieldLabel: '<font color="red"style="margin-left: 4px" ><b>cost</b></font>',
                    labelSeparator: '',
                    style: 'text-align: right;',
                    width:120
                ]
            ,
                columnWidth:.25,
                layout: 'form',
                items: [
                    id : 'price',
                    xtype:'textfield',
                    fieldLabel: '<font color="red"style="margin-left: 15px" ><b>price</b></font>',
                    labelSeparator: '',
                    style: 'text-align: right;',
                    width:120
                ]
            ]
        ]
    );

我尝试将窗口的 closeAction 配置“隐藏”更改为“销毁”，但这次如果我不关闭选项卡，我将无法第二次打开窗口。

我该如何解决这个问题。 非常感谢。

var grid = new Ext.grid.GridPanel(
        stripeRows: true,
        frame: false,
        border:false,
        autoScroll: true,
        loadMask: msg : 'loading...',
        trackMouseOver:false,
        store: store,
        bbar: paging,
        region:'center',
        cm: cm,
        sm: sm,
        viewConfig: enableRowBody:true,emptyText: 'empty...',
        listeners: 
            celldblclick: function()
                showDetail();
            
        
    );

和showDetail函数是;

var showDetail = function()
        store.baseParams = 
            Id : sm.getSelected().data['ID']    
        ;
        store.load();
        win.show();

        var d =sm.getSelected().data['date'];
        Ext.getCmp("xxx").setValue(sm.getSelected().data['xxx']);
        Ext.getCmp("date").setValue(d.getDate() + '/' + (d.getMonth()+1) + '/' + d.getFullYear());
        Ext.getCmp("cost").setValue((sm.getSelected().data['cost']));
        Ext.getCmp("price").setValue((sm.getSelected().data['price']));

    ;

【问题讨论】：

你最好分享你的网格代码和你已经实现的行点击处理程序代码。

这可能是因为您每次创建窗口时都使用相同的表单实例 (top)。不要那样做。

@EvanTrimboli 我能做什么？

【参考方案1】：

您需要在每次调用时创建窗口并在关闭时销毁

function createWindow()
  return new Ext.Window(
    width:  680,
    height: 250,
    title: 'Details',
    layout: 'border',
    modal: true,
    closeAction:'destroy',
    items: [top,grid]
  );

然后调用createWindow

var showDetail = function()
    store.baseParams = 
        Id : sm.getSelected().data['ID']    
    ;
    store.load();
    var win = createWindow();
    win.show();

    var d =sm.getSelected().data['date'];
    Ext.getCmp("xxx").setValue(sm.getSelected().data['xxx']);
    Ext.getCmp("date").setValue(d.getDate() + '/' + (d.getMonth()+1) + '/' + d.getFullYear());
    Ext.getCmp("cost").setValue((sm.getSelected().data['cost']));
    Ext.getCmp("price").setValue((sm.getSelected().data['price']));

;

【讨论】：

这不起作用，因为我们在关闭时破坏了窗口，之后我尝试打开窗口第二次窗口没有创建。 J 是未定义的错误返回。如果我关闭标签，它可以工作。如果我不关闭选项卡并单击一行，则不会创建第二次窗口。