2013-08-13 4 views
2

Я работаю над исправлением ошибок после обновления с 4.1.1 до 4.2.1 и некоторое время зациклился на древовидной структуре.ExtJS 4.2.1 Узлы TreeView перепутаны после повторного рендеринга компонента

Как компонент выглядит после того, как приложение запускается в первый раз (или после обновления страницы):

expected look

Описание проблемы: главный экран имеет TreeView слева (категории) и сетка на остальной части экрана (с продуктами). После того, как я впервые открою экран, категории в дереве отображаются как ожидалось. Но когда я нажимаю кнопку перезагрузки, он снова загружает хранилище деревьев и хранилище сетки - и здесь некоторые категории удваиваются (я думаю, что все узлы второго уровня удваиваются). Запрос AJAX возвращает те же данные - по каждому запросу.

subcategories are doubled

И даже страннее случай: если я открою еще один компонент, а затем вернуться к этому экрану, категория может считаться вполне перепуталась.

even more messed up...

Вот ответ JSON (все время то же самое):

{ 
    "user":{}, 
    "data":{ 
     "children":[ 
      { 
       "category_apps":[{"name":"default text", "domain_id":"17"}], 
       "expanded":false, 
       "expandable":false, 
       "id":"category_with_unassigned_products", 
       "logo":"", 
       "children":[]}, 
      { 
       "category_apps":[{"category_id":"8390","domain_id":"17","is_active":"1","name":"main category","name_type":"TEXT","url_path":"\/main-category"}], 
       "category_id":"8390", 
       "level":0, 
       "event_id":"1331", 
       "expanded":true, 
       "expandable":false, 
       "id":"main_category", 
       "logo":"\/media\/\/event\/1331\/categories\/8390_1376315425.jpg", 
       "image":"\/event\/1331\/categories\/8390_1376315425.jpg", 
       "children":[ 
        { 
         "expanded":true, 
         "category_id":"8598", 
         "expandable":false, 
         "logo":"\/media\/\/event\/1331\/categories\/8598_1376315425.jpg", 
         "image":"\/event\/1331\/categories\/8598_1376315425.jpg", 
         "level":"1", 
         "children":[ 
          { 
           "expanded":false, 
           "category_id":"8599", 
           "expandable":false, 
           "logo":"\/media\/\/event\/1331\/categories\/8599_1376315425.jpg", 
           "image":"\/event\/1331\/categories\/8599_1376315425.jpg", 
           "level":"2", 
           "children":[], 
           "category_apps":[{"category_id":"8599","domain_id":"17","is_active":"1","name":"sub subcategory","name_type":"TEXT","url_path":"\/main-category\/main\/sub-subcategory"}] 
          } 
         ], 
         "category_apps":[{"category_id":"8598","domain_id":"17","is_active":"1","name":"main subcategory","name_type":"TEXT","url_path":"\/main-category\/main-subcategory"}] 
        } 
       ] 
      } 
     ] 
    } 
} 

Вот код отвечает за добавление дочерних узлов - но после отладки я знаю, что после второго ребенка корень (см JSON выше) обрабатывается, узлы в дереве немедленно показано в два раза и/или перепутались сразу ...

appendChildToRecord: function(child, record, store) 
{ 
    var data = {}; 
    data[store.proxy.reader.root] = child; 
    var newRecords = store.proxy.reader.read(data).records; 
    record.appendChild(newRecords); 
    return newRecords[0]; 
} 

Любая идея, ты ght и помощь высоко оценены!

UPDATE: Если я переключаю ExtJS назад к версии 4.1.1 дерево всегда загружается должным образом - Поэтому ясно, что проблемы возникли только после перехода на версию 4.2.1. И я не могу даже раскрыть проблему при отладке - в какой-то момент все поддерево узла для main_category оказано сразу и перепутались ...

UPDATE 2: по отладке всего процесса сборки дерева я нашел что при повторной загрузке категорий и его дети обрабатываются в неправильном порядке. По обработке я имею в виду взяты эти шаги:

  1. получить первый уровень первой категории
  2. добавить к корню
  3. процесса children (рекурсивный, начинается в точке 1.)
  4. удалить children из источника для этой категории

В то время как при первой загрузке категории обрабатываются в правильном порядке

  1. категории первого лвл
  2. категории первого лвл
    1. категория 2-й лвл
      1. категория третьего лвл
    2. категория второй лвл
      1. категории 3 лвл
      2. ...

на второй и каждой другой нагрузки (без освежения окно браузера) порядок изменяется - вторая категория первого уровня обрабатывается как последняя, ​​поэтому e снова добавляются категории второго уровня, и поэтому они удваиваются.

Вопрос в следующем: Почему при заказе магазина обновляется список категорий (записей/записей)? Я уверен и проверил, что ответ JSON не изменяется и всегда один и тот же ...

ответ

2

После дополнительных часов действительно глубокой отладки я узнал, что корневой узел (тот, который определен в магазине) сохраняя прежнее состояние, таким образом expanded остается в собственности true в каждой следующей попытке повторной загрузки.

Это вызывало проблемы с категорией первого уровня, поскольку ExtJS считал, что он уже виден (добавлен в расширенный корень) и расширен для обработки непосредственно детей. Поэтому вторая категория первого уровня обрабатывалась как последняя - это не удалено. детей были добавлены (добавлены) снова.

Fix: перед каждым tree.store.load(); я должен установить expanded свойство суперпользователя ложь:

tree.getRootNode().set('expanded', false); 

tree.store.load({ 
    //... 
}); 

Надеется, что это может помочь кому-то, кто может столкнуться с той же проблемой ...

Это исправляет обе проблемы, которые у меня были - одна при перезагрузке магазина с помощью кнопки и одна при перезагрузке всего компонента.

Смежные вопросы