понедельник, 18 апреля 2011 г.

ExtJS проблемы в Internet Explorer

ExtJS, как гласит официальный сайт, является кроссплатформенным фреймворком для построения Rich Internet Application - "богатых интернет приложений", то есть, приложений, обладающих функциональностью обычных настольных программ. И это действительно так.

Однако, нередко при работе с ExtJS некоторые проблемы с кроссбраузерностью все-таки наблюдаются. Тем не менее, стоит отдать должное разработчикам фреймворка, эти проблемы обусловлены в первую очередь разными реализациями Javascript в разных браузерах и для их устранения следует всего лишь следовать хорошему тону программирования.

Нередко наблюдается, когда интерфейс отлично функционирует в Firefox, но даже не отрисовывается в Internet Explorer и браузер выдает многочисленные сообщения об ошибках.
Как правило, причина такого поведения заключается в разной реализации массивов Javascript. Известно, что в ExtJS для конфигурирования элементов используются исключительно объекты и массивы объектов, например:

vp = new Ext.Viewport({
    layout: 'border',
    renderTo: Ext.getBody(),
    items: [
        firstElement,
        secondElement,
        thirdElement
    ]
});

Здесь создается Viewport, элементами которого являются firstElement, secondElement и thirdElement - и этот код будет работать одинаково во всех заявленных разработчиками ExtJS реализациях браузеров. Однако, попробуйте выполнить этот код:

vp = new Ext.Viewport({
    layout: 'border',
    renderTo: Ext.getBody(),
    items: [
        firstElement,
        secondElement,
        thirdElement, // запятая
    ]
});

Internet Explorer выдаст ошибку. Проблема в реализации массивов Javascript: если после последнего элемента стоит запятая, IE считает, что в конце массива присутствует еще один, пустой, элемент. ExtJS пытается обработать этот элемент, но, так как он фактически пуст, генерируется ошибка.

Другие реализации Javascript (в Firefox, например) на запятую после последнего элемента массива внимания не обращают, однако завершать последний элемент запятой считается дурным тоном программирования.

Приведенная ошибка - наиболее часто встречающаяся при разработке на ExtJS, и ее необходимо всегда иметь в виду. Будьте внимательны к последним элементам массивов и объектов, и это упростит вам жизнь при последующем тестировании кроссбраузерности ваших интерфейсов.

Вторая проблема - использование в коде конструкции console.log() для вывода сообщений в консоль Firebug или Chrome. Internet Explorer, к сожалению, не имеет консоли как таковой, поэтому попытки ее использования генерируют ошибку; необходимо помнить, что после окончания тестирования и отладки интерфейса, если вы использовали вывод сообщений в консоль, их необходимо удалить или закомментировать. Впрочем, эта ошибка, в отличие от вышеописанной, легко определяется.

5 комментариев:

  1. ))) я тоже на это натыкался и писал в своем блоге

    ОтветитьУдалить
  2. Да, это важная тема, одна запятая и вся поддержка IE и некоторых версий Chrome идет лесом:).

    ОтветитьУдалить
  3. это все игрушки, по сравнению с работой с store.ajax. Ошибок нет, то работает, то не работает (как будто подвисает содеинение) на таймауты не реагирует.

    в Opera, Chrome, Firefox все отлично и быстро работает.

    ОтветитьУдалить
  4. Приведите небольшой пример проблемного кода.
    Store не имеет метода или свойства ajax.

    ОтветитьУдалить
  5. А о проблеме rowEditing в internet explorer слышали?оно там просто не работает..

    ОтветитьУдалить