Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.08.2012, 10:16
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

Проблемы совместимости при использовании ExtJS в браузерах IE & Opera
Проблемы совместимости при использовании ExtJS в браузерах IE & Opera.

Запрос в на ExtJS-овском форуме в Q&A отправил, но молчат буржуины... Может тут помогут :-)

ExtJS: 4.1.1, build date: 2012-07-04 21:11:01

В IE 9 (32bit, 9.0.8112.16421): ошибка "Unable to get value of the property 'split': object is null or undefined..." (Controller.js?_dc=1343896993844, line 335 character 13).

В Opera - дерево не отображает элементы (в консоли как всегда много прогнозируемых ошибок насчет ext-all.css).

В FireFox 14.0.1 и Google Chrome 20.0.1132.57m все работает замечательно.

Во всех браузерах кроме Opera - проблема с позиционированием изображения сертификата (начинает работать корректно только при изменении размеров окна браузера).

app.js:
Ext.application({
    name: 'ECS2',
    appFolder: 'app',
    launch: function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items: [
            {
                xtype: 'box',
                region: 'north',
                height: 30
            },{
                xtype: 'view_invoices_list',
                region: 'west',
                width: 450
            },{
                xtype: 'view_certs_preview_area',
                region: 'center'
            }]
        });
    },
    controllers: ['controller_invoices', 'controller_certs_preview']
});


controller_certs_preview.js:
Ext.define('ECS2.controller.controller_certs_preview', {
    extend: 'Ext.app.Controller',
    views: 'view_certs_preview_area',
    init: function () {
        this.control({
            'viewport > view_certs_preview_area': {
                resize: this.onPanelRendered
            }
        });
    },
    onPanelRendered: function() {
        Ext.getCmp('certs_image').setHeight(Ext.getCmp('certs_panel').getHeight() - 100);
    }
});


controller_invoices.js:
Ext.define('ECS2.controller.controller_invoices', {
    extend: 'Ext.app.Controller',
    views: 'view_invoices_list',
    stores: ['treestore_invoices'],
    models: ['model_treestore_invoices']
});


model_treestore_invoices.js:
Ext.define('ECS2.model.model_treestore_invoices', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'text', type: 'string'},
        {name: 'invoice_date', type: 'string'},
        {name: 'invoice_number', type: 'string'},
        {name: 'invoice_item', type: 'string'},
        {name: 'invoice_item_series', type: 'string'},
        {name: 'invoice_item_file', type: 'string'}
    ]
});


treestore_invoices.js:
Ext.define('ECS2.store.treestore_invoices', {
    extend: 'Ext.data.TreeStore',
    rootVisible: false,
    model: 'ECS2.model.model_treestore_invoices',
    proxy: {
        type: 'ajax',
        url: 'load_invoices.php'
    },
    autoLoad: true
});


view_certs_preview_area.js:
Ext.define( 'ECS2.view.view_certs_preview_area', {
    id: 'certs_panel',
    extend: 'Ext.panel.Panel',
    alias : 'widget.view_certs_preview_area',
    title: 'Certificates',
    layout: {
        type: 'hbox',
        align: 'middle',
        pack: 'center'
    },
    items: {
        id : 'certs_image',
        xtype: 'image',
        src: 'images/test.png'
    }
});


view_invoices_list.js:
Ext.define('ECS2.view.view_invoices_list' ,{
    id: 'invoices_list',
    extend: 'Ext.tree.Panel',
    alias : 'widget.view_invoices_list',
    title: 'Invoices',
    store: 'treestore_invoices',
    rootVisible: false,
    collapsible: true,
    singleExpand: true,
    listeners: {
        itemclick: function(view, record, item, index, e, obj) {
            if (record.getDepth('text') == 4) {
                var oldstr = record.get('invoice_item_file');
                Ext.getCmp('certs_image').setSrc('load_image.php?file_name=' + record.get('invoice_item_file'));
                console.log(Ext.getCmp('certs_image').src);
            }
        }
    }
});
Ответить с цитированием
  #2 (permalink)  
Старый 13.08.2012, 15:11
Новичок на форуме
Отправить личное сообщение для progrmax Посмотреть профиль Найти все сообщения от progrmax
 
Регистрация: 13.08.2012
Сообщений: 4

Здравствуйте, я человек новый в JS и ExtJS, решения проблемы не знаю, но когда прочитал
Цитата:
ошибка "Unable to get value of the property 'split': object is null or undefined..."
и посмотрел что у вас везде используется Ext.getCmp, то сразу вспомнил статью на хабре http://habrahabr.ru/post/132923/ где говорится что нужно стараться избегать использовать Ext.getCmp. Может и не в этом дело, просто хочу помочь
Ответить с цитированием
  #3 (permalink)  
Старый 13.08.2012, 16:10
Аспирант
Отправить личное сообщение для Eugent Посмотреть профиль Найти все сообщения от Eugent
 
Регистрация: 28.02.2012
Сообщений: 55

Здравствуйте. Вы пишите что ошибка в Controller.js - но его кода я не наблюдаю...

Насчет Ext.getCmp - действительно использовать желательно реже - я обычно стараюсь по иерархии компонентов двигаться, т.е. при помощи методов up и down. Использование идентификаторов считаю слишком неоправданным с 4 ExtJS, так как в 4-й версии есть ComponentQuery при помощи которого можно получить любой компонент, например Ext.ComponentQuery.query('mygrid[region=center][name=users]');
А по поводу свойства split - оно если не ошибаюсь отвечает за вывод ресайзера для региона - можно попробовать задать для viewPort -
Ext.create('Ext.container.Viewport', {
...
defaults: {
    split: false
}
...
});
Ответить с цитированием
  #4 (permalink)  
Старый 14.08.2012, 13:21
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

getCmp там используется исключительно для авторесайза компонента img.
Если это убрать - ошибка остается.

Controller.js - файл фреймворка ExtJS...

Ошибка возникает лишь при использовании в качестве xtype в регионах вьюпорта в app.js:

xtype: 'view_invoices_list'
xtype: 'view_certs_preview_area',

Последний раз редактировалось Allan Stark, 14.08.2012 в 13:29.
Ответить с цитированием
  #5 (permalink)  
Старый 18.09.2012, 09:28
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

Решение проблемы...
IE оказался очень чувствителен в некоторых случаях к типизации (либо где-то в движке ExtJS ошибка при обработке для разных браузеров).

Потому для всех свойств компонентов и классов, оканчивающихся на *s - необходимо явно указывать принадлежность данных к массиву.

Вот это будет работать (смотрим на views: ['view_invoices_list']):

Ext.define('ECS2.controller.controller_invoices', {
    extend: 'Ext.app.Controller',
    views: ['view_invoices_list'],
    stores: ['treestore_invoices'],
    models: ['model_treestore_invoices']
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Срабатывание скрипта в разные моменты при загрузки в разных браузерах VitalikPro Javascript под браузер 10 29.12.2011 16:24
Проблемы с событием onmouseover в разных браузерах jsuse Общие вопросы Javascript 4 29.11.2011 16:30
Кодировка при использовании Ajax Nichloas AJAX и COMET 9 17.09.2009 15:06
Проблемы с кодировкой при передаче данных во фрейм из js Why? Internet Explorer 12 02.06.2009 15:23
Проблема с меню не корректно отображается в браузерах отличных от IE (т.е. FF Opera) 3xv Элементы интерфейса 2 16.04.2009 18:51