Рендеринг динамических компонентов, загружаемых через ajax
 

В общем задача такая: на сайте слева стоит дерево ссылок, при клике вызывается событие

itemclick: function(view,rec,item,index,eventObj){
	var rendTo = Ext.getCmp("mainpanel");
	rendTo.removeAll();
	Ext.Ajax.request({
		url: rec.get("id")+".js",
		success: function(r,o){
			rendTo.add(eval(r.responseText));
		},
		failure: function(r,o){
			rendTo.add(errorPage);
		}
	});
}

Таким образом типа создается компонент динамически из файла *.js и добавляется в mainpanel. вот пример файла a.js:

Ext.create('Ext.Panel', {
            title: 'Заголовок',
            width: 300,
            height: 200
        });

а errorPage - это компонент сообщения об ошибке

var errorPage = Ext.create("Ext.Component", {
	html: "Ошибка загрузки",
	style: "padding: 10px;"
});

Вот. А проблема в том, что загрузка компонента запаздывает на 1 нажатие. То есть я нажал на "ссылку", потом нажал на другую и только тогда грузится предыдущий. Где может быть ошибка?
И вообще какие еще пути есть для вот такой организации динамической загрузки компонентов из других файлов?
Не серчайте, изучаю ExtJS только 2-й день:)

В ExtJS4 есть же свой асинхронный загрузчик - Ext.define() Ext.requre или чета в этом духе (сам не работал с четверкой)
Для ExtJS3 нужно подключать что-то стороннее, например require.js.
Именно проблема с запооздалым рендерингом скорее всего из-за того, что add() не обновляет view компонента. Нужно наверно вызвать какой-то метод типа refresh() или наподобие. Смотрите документацию http://docs.sencha.com/ext-js/3-4/ http://docs.sencha.com/ext-js/4-1/

спасибо! попробую сделать одним из ваших способов :)