PDA

View Full Version : [FIXED-380][3.1+] Ref not working for child panels created outside of the parent



jeffypop13
9 Dec 2009, 1:52 PM
Ext version tested:

Ext 3.0 (works correctly)
Ext 3.1+ (does not work)


Adapter used:

ext


css used:

only default ext-all.css




Browser versions tested against:

IE7
FF3.3.5 (firebug 1.4.5 installed)


Operating System:

WinXP Pro


Description:
When child panels (2+ levels deep) are instantiated outside of the panel they are ultimately contained in, the ref doesn't seem to work. In the test case, refPanel2 cannot be exposed any further up the chain than refPanel1.

The refPanel1 is exposed to vp, but refPanel2 is not. I tested this in Ext 3.0 and it worked fine.

Test Case:



Ext.onReady(function({
var refPanel = new Ext.Panel({
region: 'center',
xtype: 'panel',
ref: 'refPanel1',
title: 'Ref Panel 1',
bodyStyle: 'padding:10px',
items: [{
xtype: 'panel',
ref: '../refPanel2',
title: 'Ref Panel 2',
frame: true,
html: 'this is ref panel 2'
}]
})

var vp = new Ext.Viewport({
layout: 'border',
id: 'vp',
items: [refPanel]
})
});


Steps to reproduce the problem:

view the test case in the browser
execute Ext.getCmp('vp').refPanel2


The result that was expected:

a reference to refPanel2


The result that occurs instead:

undefined


Possible fix:

not provided

evant
12 Dec 2009, 10:17 PM
Thanks, this has been fixed in SVN.

TopKatz
17 Dec 2009, 9:11 AM
This bug made it into 3.1.0. Can we get a patch for this as it breaks quite a bit of my code.

evant
17 Dec 2009, 1:19 PM
It should be included in 3.1, are you saying the test case doesn't work with 3.1?

TopKatz
17 Dec 2009, 4:37 PM
This is what my code looks like, this works in 3.0.3 and 3.0.0, but is not working in 3.1.0



this.dedWin = new Ext.Window({
title:'Change Loan Deduction',
constrain:true,
closeAction:'hide',
modal:true,
height:100,
width:300,
items:[
{
xtype:'form',
frame:true,
border:false,
ref:'../../loanDedForm',
monitorValid:true,
scope:this,
items:[
{xtype:'numberfield',allowBlank:false,fieldLabel:'Amount',name:'loanDeduction'}
],
buttons:[
{text:'Submit',formBind:true,scope:this,handler:function(){
this.dedWin.loanDedForm.form.submit({
...
});
}},
{text:'Cancel',scope:this,handler:function(){...}}]
}
],
listeners:{
hide : function(){
this.dedWin.loanDedForm.form.reset();
},
scope:this
}
});



I get an error that " this.dedWin.loanDedForm" is undefined on submit and close. I get this same type of error every place I used ref in my app with the 3.1 build.

Katz

Animal
18 Dec 2009, 12:20 AM
try ref: 'loadDedForm'

TopKatz
18 Dec 2009, 4:51 AM
Thanks Animal. That makes more sense then the old way it was done.

Katz

rplotkin
18 Dec 2009, 1:11 PM
So we now need to remove two levels (../../) from every ref? What about things that did not have that many levels? A lot of my 3.0.x code is not working in 3.1, and this adjustment does not fix it.

Condor
19 Dec 2009, 1:03 AM
So we now need to remove two levels (../../) from every ref? What about things that did not have that many levels? A lot of my 3.0.x code is not working in 3.1, and this adjustment does not fix it.

No, you should use as many levels as are required. The ref in @TopKatz example only references a container one level up, so the ../../ was already wrong (but Ext 3.0.x ignored it and applied the ref to the toplevel container).

davidsanderson
19 Jan 2010, 8:23 AM
I just downloaded 3.1 and the ref does not work for me. Here's the code. What am I doing wrong?


courseEditor.gridCourseSearch = new Ext.grid.GridPanel({
id : 'courseEditor.gridCourseSearch',
title : 'Find Course',
header : true,
store : courseEditor.storeGetCourses,
frame : true,
border : true,
width : 600,
height : 620,
loadMask: true,
columns : [
{header: 'Course ID', id: 'CourseID', width: 45, dataIndex: 'CourseID', sortable: true, hidden: true},
{header: 'Course Code', id: 'CourseCode', width: 80, dataIndex: 'CourseCode', sortable: true},
{header: 'Course Name', id: 'CourseName', width: 70, dataIndex: 'CourseName', sortable: true},
{header: 'Course Description', id: 'CourseDescripton', width: 70, dataIndex: 'CourseDescripton', sortable: true, hidden: true},
{header: 'Clock Hours', id: 'ClockHours', width: 80, dataIndex: 'ClockHours', sortable: true},
{header: 'Credit Hours', id: 'CreditHours', width: 80, dataIndex: 'CreditHours', sortable: true},
{header: 'Show In LMS', id: 'ShowInLMS', width: 80, dataIndex: 'ShowInLMS', sortable: true, hidden: true},
{header: 'Last Mod', id: 'LastModified', width: 80, dataIndex: 'LastModified', sortable: true, hidden: true}
],
autoExpandColumn: 'CourseName',
selModel: new Ext.grid.RowSelectionModel({
singleSelect : true
}),
// top toolbar for course search
tbar: new Ext.Toolbar({
items: ['Course Code or Name:', {
itemId : 'courseCodeOrName',
ref : '../courseCodeOrName',
xtype : 'textfield',
width : 220,
value : 'anim'
}, {
xtype : 'tbspacer'
}, {
itemId : 'buttonGo',
ref : '../buttonGo',
xtype : 'button', // default for Toolbars, same as 'tbbutton'
text : 'Go',
handler: function() {
courseEditor.storeGetCourses.setDefaultSort('CourseName','ASC'); courseEditor.storeGetCourses.setBaseParam('CourseCodeOrName',courseEditor.gridCourseSearch.courseCodeOrName.getValue());
courseEditor.storeGetCourses.load({params : {start : 0,limit : 50}});
}
}]
}),
// Capture Enter key and force button Click Event
keys: [{
key: [10, 13],
fn: function() {
courseEditor.gridCourseSearch.buttonGo.focus();
courseEditor.gridCourseSearch.buttonGo.fireEvent("click");
}
}],
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize : 50,
store : courseEditor.storeGetCourses,
displayInfo : true,
displayMsg : 'Displaying records {0} - {1} of {2}',
emptyMsg : 'No records to display'
})

});// error "courseEditor.gridCourseSearch.courseCodeOrName is undefined"
console.log(courseEditor.gridCourseSearch.courseCodeOrName.getValue());

guitarking117
8 Mar 2010, 8:14 AM
Can I get more information about when this patch was applied to 3.1? Was it 3.1.1 or 3.1.2? I have 3.1.1 and, using the following code, I get an "accountGrid.editButton is not defined" error. I used this exact same code in 3.0.0 and it worked, but not in 3.1.1. The rest of the grid works, just not the reference to editButton.


var accountGrid = new Ext.grid.GridPanel({
title: 'Accounts',
store: store,
width: 700,
height: 375,
region: 'center',
margins: '0 5 5 5',
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
autoExpandColumn: 'description',
tbar: new Ext.Toolbar({
layout: 'toolbar',
items: [
...
{
ref: '../editButton',
iconCls: 'icon-edit',
text: 'Edit Account',
disabled: true
}...

accountGrid.getSelectionModel().on('selectionchange', function(sm) {
var count = sm.getCount();
var record = accountGrid.getSelectionModel().getSelected();

accountGrid.editButton.setDisabled(count < 1 || record == null);
...
});Thanks,

I have looked through the release notes for several versions but could not find any references to this bug being fixed.

Nick