Проблемы совместимости при использовании 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);
            }
        }
    }
});

Здравствуйте, я человек новый в JS и ExtJS, решения проблемы не знаю, но когда прочитал
и посмотрел что у вас везде используется Ext.getCmp, то сразу вспомнил статью на хабре http://habrahabr.ru/post/132923/ где говорится что нужно стараться избегать использовать Ext.getCmp. Может и не в этом дело, просто хочу помочь

Здравствуйте. Вы пишите что ошибка в 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
}
...
});

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

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

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

xtype: 'view_invoices_list'
xtype: 'view_certs_preview_area',

Решение проблемы...
 

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']
});