PDA

View Full Version : [CLOSED-460][3.1] "Ref:" config option not working



davidsanderson
20 Jan 2010, 12:56 PM
I just downloaded 3.1 and the "ref:" config option does not work for me. On the Go button on the toolbar, I have a handler that references the "courseCodeAndName" textfield. The line of code is:
courseEditor.storeGetCourses.setBaseParam('CourseCodeOrName',courseEditor.gridCourseSearch.courseCodeOrName.getValue()); However, I get the error "courseEditor.gridCourseSearch.courseCodeOrName is undefined". This was working fine in Ext 3.0. What has changed?


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}});
}
}]
})

});

evant
20 Jan 2010, 5:50 PM
A simplified version:



Ext.onReady(function(){
var g = new Ext.grid.GridPanel({
width: 400,
height: 400,
renderTo: document.body,
store: [1],
columns: [{
header: 'col', dataIndex: 'field1'
}],
tbar: [{
text: 'Foo',
ref: '../Bar'
}]
});

new Ext.Button({
text: 'Click',
renderTo: document.body,
handler: function(){
console.log(g.Bar);
}
});
});


Have you tried the 3.1.1 beta? There has since been a fix implemented for this.

VinylFox
20 Jan 2010, 6:05 PM
Yeah, I think your problem should be fixed if you try 3.1.1 or the override in the post below.

http://www.extjs.com/forum/showthread.php?t=88830

Some other things to note:

Keep away from dots in your ID's - this will bite you sooner or later.


id : 'courseEditor.gridCourseSearch',

Also, this is redundant, a tbar is going to instantiate a toolbar for you with just an array passed.


tbar: new Ext.Toolbar({ items: ['Course Code or Name:', ...

Could simply be...


tbar: ['Course Code or Name:', ...

davidsanderson
21 Jan 2010, 6:05 AM
Thanks for the quick replies. I'll just revert to 3.0 and wait for 3.1.1 to be released. Does anyone know when 3.1.1 will be out?

@VinylFox: Thanks for the tips. We started to run into problems with our id's not being unique throughout our application and so we started to prefix our id's with the name of the "tool" that's within our app. What's the downside of dots in id's? What is a better way to ensure that all of our id's are unique? I'm going to remove the "new Toolbar" after tbar.

evant
21 Jan 2010, 6:26 PM
Shortly, the beta is out now.

VinylFox
23 Jan 2010, 2:18 AM
The dot has special meaning in JavaScript.

A simple example of how this could cause problems...imagine you have an object with properties named after the id's of your components:


var x = {
'courseEditor.gridCourseSearch': true
};

Now you read that property:


if (!x.courseEditor.gridCourseSearch) {
alert('False');
}

That code would error, forcing you to write your code like the following


if (!x['courseEditor.gridCourseSearch']) {
alert('False');
}