2 u010484594 u010484594 于 2014.05.06 11:05 提问

Extjs4 tabpanel 一个页面关闭后再打开报错

去年毕业,在公司一直做C/S的软件,最近工作不是很忙,就自己学习了下Extjs4

问题如标题所示。报错信息:
TypeError: Argument 1 of Node.insertBefore is not an object.

我是用的desktop + Extjs提供的mvc 做的。

下面贴出部分代码

controller

init:function(){ 
    var self=this;
    coreApp=self;
    this.addFunItem=function(funInfo){//动态加载controller并渲染它的主窗体
        if(funInfo){
            var mainView=funInfo.mainView;
            //var funPanel=mainView.down(funInfo.funViewXtype);
            var funPanel=Ext.ComponentQuery.query(funInfo.funViewXtype)[0];
            if(!funPanel){
                this.application.getController(funInfo.funController).init();
                funPanel=Ext.create(funInfo.funViewName);
                mainView.add(funPanel);
                mainView.setActiveTab(funPanel);
            }else{                                  
                mainView.setActiveTab(funPanel);
            }
        }
    },      
    this.control({          
        'menuView treepanel[id="Clgl30000"]':{//查询   菜单树  添加单击事件
            itemclick:function(tree,record,item,index,e,options){   
                var mainView=Ext.getCmp("centerpanel");//得到中间的 tabpanel 组件
                if('Clgl30300'==record.data["fmenubh"]){// 单据查询
                    this.addFunItem({
                        mainView:mainView,
                        funViewXtype:'djQueryView',
                        funController:'core.app.controller.DjQueryController',
                        funViewName:'core.app.view.DjQueryView'
                    });
                }
            }
        }
    });

view

/**
  • */

    Ext.define('core.app.view.DjQueryView',{
    extend:'Ext.panel.Panel',
    closable:true,
    alias:'widget.djQueryView',
    id:'DjQueryView',
    title:'单据查询',
    layout:'border',
    defaults: {
    // collapsible: true,
    // split: true,
    bodyStyle: 'padding:0px'
    },
    tbar: [

    {text:'查询',id:'query',iconCls:'dept_table'},
    {text:'导出',id:'export',iconCls:'table_add'},
    {text:'打印',id:'print',iconCls:'table_remove'},
    {text:'退出',id:'exit',iconCls:'table_remove',handler:function(btn){
    btn.ownerCt.ownerCt.destroy( );
    }}
    ],
    items:[
    {
    xtype: 'container',
    height:90,
    region: 'north',
    layout:'absolute',
    // style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
    defaults: {
    labelWidth: 60,
    flex: 1,
    style: {
    padding: '5px'
    }
    },
    items: [
    {

    xtype:'fieldset',
    title: '查询范围选择',
    frame:true,
    collapsible: true,
    defaults: {anchor: '100%'},
    layout: 'anchor',
    width:180,
    height:80,
    items :[
    {

    fieldLabel:'仓库',labelWidth:30,
    width:150,
    xtype:'combobox',id:'fckbh',
    store:'TclckStore', displayField: 'fmc',
    valueField: 'fckbh',value:'10001',//默认选择10001仓库
    editable : false// 是否可编辑

    }
    ],
    x:0,
    y:0

            },
            {
                xtype:'fieldset',
                title: '日期区间选择',
                collapsible: true,
                defaultType: 'datefield',
                defaults: {
                    labelWidth:55,
                    labelSeparator:':',
                    labelAlign:'left'
                },
                width:200,
                height:80,
                layout: 'absolute',
                items :[{
                    fieldLabel: '开始日期',
                    format:'Y-m-d',
                    name: 'begDate',
                    autoFitErrors:false, 
                    x:0,
                    y:0,
                    width:180,
                    value:Ext.Date.format(new Date(),'Y-m-d')
                }, {
                    fieldLabel: '结束日期',
                    format:'Y-m-d',
                    name: 'endDate',
                    autoFitErrors:false, 
                    x:0,
                    y:30,
                    width:180,
                    value:Ext.Date.format(new Date(),'Y-m-d')
                }],
                x:190,
                y:0
            }
            ]
    },{
        xtype:'djQueryTable',
        frame:true,
        region: 'center',
        autoScroll:true
        //style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'}
        //title:'panel'
    } 
    ],
    initComponent: function() {   //初始化组件函数           
        this.callParent(arguments)//调用父类构造函数
    
        var com=Ext.ComponentQuery.query('combobox',this)[0];
    
    var store=com.store;
    store.load(function(records, operation, success) {
            com.select(store.getAt(0));
    });     
    
    }
    

    });

view 中包含的 grid

/**
  • */
    Ext.define('core.app.view.DjQueryTable',{
    extend:'Ext.grid.Panel',
    alias:'widget.djQueryTable',
    columnLines:true,
    autoScroll:true,
    columns:[
    {header:'单据id',dataIndex:'fdjid'},
    {header:'单据编号',dataIndex:'fdjbh'},
    {header:'材料编号',dataIndex:'fclbh'},
    {header:'仓库编号',dataIndex:'fckbh'},

    {header:'基本数量',dataIndex:'fjbsl'},
    {header:'入库批号',dataIndex:'frkph'},
    {header:'进货单价',dataIndex:'fjhdj'},
    {header:'零售单价',dataIndex:'flsdj'},
    {header:'进货金额',dataIndex:'fjhje'},
    {header:'零售金额',dataIndex:'flsje'}
    ],
    store:'DjQueryStore',

    initComponent: function() { //初始化组件函数
    this.paging={//依靠父类构造 生成组件 所以写在 callParent 之前
    xtype:'pagingtoolbar',
    store:'DjQueryStore',
    dock:'bottom',
    displayInfo:true
    }
    this.dockedItems=[this.paging];

    var arr=[
            Ext.create('Ext.grid.RowNumberer',{
                header:'序号',
                renderer: function(value,metadata,record,rowIndex){
                    return '<font color="red">'+rowIndex+'</font>';
                }
            })
            ];
    Ext.Array.insert(this.columns,0,arr);
    
    this.callParent(arguments);//调用父类构造函数
    

    }
    });

问题就出在 grid 中,不知道为什么,
我刚开始将分页插件 配置在dockedItems 运行之后就出现 页面关闭后再打开报这个错

然后我将 分页插件放到 构造方法里面就好了。

但是我在columns添加RowNumberer 就又出现了,
换到构造函数始终添加也不行。

求各路大神帮看下,很是困惑啊。

1个回答

u010484594
u010484594   2014.05.06 11:35

刚试了下
在grid 的columns 中重新配置成

columns:[
    {xtype:'rownumberer',
        header:'序号',
        renderer: function(value,metadata,record,rowIndex){
                return '<font color="red">'+rowIndex+'</font>';
    }},
    {header:'单据id',dataIndex:'fdjid'},
    {header:'单据编号',dataIndex:'fdjbh'},
    {header:'材料编号',dataIndex:'fclbh'},
    {header:'仓库编号',dataIndex:'fckbh'},      
    {header:'基本数量',dataIndex:'fjbsl'},
    {header:'入库批号',dataIndex:'frkph'},
    {header:'进货单价',dataIndex:'fjhdj'},
    {header:'零售单价',dataIndex:'flsdj'},
    {header:'进货金额',dataIndex:'fjhje'},
    {header:'零售金额',dataIndex:'flsje'}
],

这样就 OK了。

但是 我在构造方法中

var arr=[
            /*Ext.create('Ext.grid.RowNumberer',{
                header:'序号',
                renderer: function(value,metadata,record,rowIndex){
                    return '<font color="red">'+rowIndex+'</font>';
                }
            })*/
            {
                xtype:'rownumberer',
                header:'序号',
                renderer: function(value,metadata,record,rowIndex){
                    return '<font color="red">'+rowIndex+'</font>';
                }
            }
            ];

    Ext.Array.insert(this.columns,0,arr);

这样 每次关闭后再打开 就会多加一列序号。
我在 view 中的 CloseAction 没有设置 API中说 默认应该是 destory才对的啊
销毁后再构造 多一列 说明之前没有销毁啊

还是满困惑。。。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!