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

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.load({params : {start : 0,limit : 50}});


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

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(){

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

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.


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:', ...

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.

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

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) {

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

if (!x['courseEditor.gridCourseSearch']) {