PDA

View Full Version : the "el is undefined" error occurs when I create a Ext.window with bbar



bill_chuang
22 May 2012, 9:31 AM
I defined a window extends Ext.window like this:


Ext.define('MyExtView.view.MySymptomSelectWindow',
{
extend:'Ext.Window',
alias:'widget.SymptomSelectWindow',
title:'????',
width:400,
height:400,
layout:'fit',
closeAction:'hide',
id:'SymptomSelectWindow',
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype:'checkbox',
boxLabel:'?????????',
inputValue: '0',
id : 'DeterminateSymp'
},
'->',
{
xtype:'button',
text: '??',
id:'SelectOK',
},
{
xtype:'button',
text: '??',
id :'SelectCancel'
}]
}],
initComponent:function()
{
this.items = [
{
xtype:'form',
autoScroll:true,
border:0,
items:[
{
xtype:'SymptomSelectList',
id : 'SymptomSelectList'
}]
}];
this.callParent(arguments);
}
})

I add a gridpanel in the window,the gridpanel defined like this:


Ext.define('MyExtView.view.MySymptomSelectList' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.SymptomSelectList',
store:'SymptomStore',
border:0,
id:'SymptomSelectList',
layout:'auto',
autoScroll:true,
frame:true,
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})
],
initComponent: function() {
this.selModel = Ext.create('Ext.selection.CheckboxModel');
this.columns = [{
header: '??',
dataIndex: 'symptom_id',
flex: 1
},
{
header: '????',
dataIndex: 'selectable_symptom',
flex: 1
},
{
header: '?????',
dataIndex:'symptom_similarity',
flex:1,
field:{
xtype:'textfield',
allowBlank:false
}
}];
this.callParent(arguments);
}
});

and the clause of my creating the window is like this:


function showWin()
{
selSymptomWin = Ext.widget('SymptomSelectWindow');
Ext.getCmp('SymptomSelectList').store.loadData(symptomList,false);
selSymptomWin.show();
}

I create a button to triggle the "showWin" function.The problem is when I click the button first,the window shows OK and then I close the window.When I click the button,the error occurs in the firebug:
"el is undefined"
"out = (v = el.style[prop]) ? v :..." in the ext-debug.js
When I remove the dockedItems,the window shows all OK.
I'm so confused so that I have to add the item "closeAction:hide" to hide the window temporarily.
Any one can help me?

vietits
22 May 2012, 6:03 PM
Because you use ids in defining your window and other components, so you should set closeAction to 'destroy' to avoid the conflict of duplicating ids when re-creating windows. Or you can hide the window with closeAction set to 'hide' and then show that window again without re-creating it.

bill_chuang
22 May 2012, 8:25 PM
Thanks,it works.