В чем причина того, что JQuery имеет доступ к DOM, но не к ExtJS? - PullRequest
Новая
       1

В чем причина того, что JQuery имеет доступ к DOM, но не к ExtJS?

0 голосов
/ 30 ноября 2010

У меня есть инфраструктура Kohana, которая создает объекты ExtJS в одном представлении, которое, в свою очередь, загружает (через JQuery AJAX) другие представления внутри него с помощью функции this: 

function replaceContentOnClick(id, route) {
    $('body').delegate(('#' + id), 'click', function(){
        $.get(route, function(data) {
            $('#region_center .x-panel-body').html(data);
        });
    });
}

Это работает нормально, но только когда эти дочерние представления являются просто HTML / Javascript / JQuery, но в дочерних представлениях я не могу отобразить какие-либо объекты ExtJS, даже если я рендеринг их в существующие элементы DOM и с которыми я могу успешно добавить элементы JQuery. Как будто DOM не существует для ExtJS в этот момент.

Основная проблема: код JQuery успешно заполняет элемент: 

<script type="text/javascript">
$('#region_center .x-panel-body').html('this is from jquery...');
</script>

, но код ExtJS не может заполнить тот же элемент (на панели Firebug / Net не сообщается об ошибке): 

<script type="text/javascript">
    var region_center = new Ext.Panel({
        id: 'region_center',
        region: 'center',
        renderTo: '#region_center .x-panel-body',
        margins:'10 10 10 10',
        padding:'10 10 10 10',
        autoScroll:true,
        html: 'this is from ExtJS...'
    });
</script>

Что мне нужно сделать, чтобы ExtJS мог получить доступ к элементу DOM, как JQuery?

1 Ответ

1 голос
/ 01 декабря 2010

Эти два бита кода делают разные вещи.Этот код: 

<script type="text/javascript">
$('#region_center .x-panel-body').html('this is from jquery...');
</script>

... обращается к узлу DOM по адресу "#region_center .x-panel-body" и вводит новое значение innerHTML.Этот код: 

<script type="text/javascript">
    var region_center = new Ext.Panel({
        id: 'region_center',
        region: 'center',
        renderTo: '#region_center .x-panel-body',
        margins:'10 10 10 10',
        padding:'10 10 10 10',
        autoScroll:true,
        html: 'this is from ExtJS...'
    });
</script>

... пытается преобразовать полный компонент Panel в себя (т. Е. Конфигурация renderTo указывает на панель с идентификатором 'region_center',которая сама панель).Это не имеет смысла и не будет работать.Вы можете визуализировать компоненты только на существующем узле DOM - в этом примере не существует существующего узла DOM с идентификатором 'region_center', потому что панель еще не (и не может быть) отображена.

Эквивалентный код длясделать в точности то, что вы делаете в jQuery, было бы так: 

<script type="text/javascript">
Ext.get('#region_center').child('.x-panel-body').update('this is from Ext...');
</script>

Предполагая, что при DOM все вещи равны в DOM, он должен выполняться точно так же, как ваш код jQuery.

Теперь, предполагая, что ваш BorderLayout правильно отрисован, и на самом деле он имеет центральную область с идентификатором 'region_center', вы сможете динамически добавлять в него новую панель (убедитесь, что идентификатор новой панели уникален).Обратите внимание, что для этого было бы предпочтительнее использовать API-интерфейс компонента (а не DOM-API), поскольку в этом случае для вас будет использоваться макет.Например, вы хотите сделать что-то вроде: 

// assuming myCenterPanel is a valid *component* ref (NOT a DOM element):
myCenterPanel.add(new Ext.Panel(...));
myCenterPanel.doLayout();

Вы также хотели бы убедиться, что центральной панели назначен соответствующий макет (через конфигурацию макета).Если вместо этого вы просто визуализируете новую панель непосредственно в базовый узел DOM (как вы пытаетесь это сделать выше), она может работать , но в долгосрочной перспективе, вероятно, вызовет другие проблемы (опять же, посколькув этом случае вы обходите менеджер компоновки Ext).

...