dataview, динамическое изменение шаблона

[treasury]

Итак есть viewport, выводятся панели в разных регионах. К примеру, в регионе region: 'west' находится dataview и itemTpl шаблон. Все выводится все хорошо. Вопрос следующий есть ли возможность динамически менять шаблон itemTpl в dataview, к примеру при клике на какую-нибудь кнопку. Т.е. мне нужно что-бы данные выводились в одном месте с разных store с разными шаблонами. Возможно немного запутанно, но нужно направление в каком двигаться. Спасибо!

[siber-biber]

можно и так сделать ..только используя не вполне public api.
дело в том что так по дизайну не задумано, не преполагается в рантайме менять itemTpl. ))

Традиционный вариант скорее на каждый стор имеем свой экземпляр дата вью и показываем/прячем соответствующий при клике.

Но если вы сильно хотите то можно попробовать сделать и ваш сценарий. Мастер класс ковыряния в эксте )) (на примере extjs 4.2.2): смотрим иcходники Ext.view.View в поисках itemTpl ..вхождений в коде нет ..идем далее в парента Ext.view.AbstractView ..находим обработку этого конфига в initComponent. Видим что конфиг юзается только там, при создании компонента, а далее шаблон компилируется и кладется в свойство tpl.

Нам нужно делать это в рантайме ..берем кусок кода из initComponent и заворачиваем его в метод:

Ext.override(Ext.view.AbstractView, {
    
    setItemTpl : function (itemTpl) {
        var memberFn = {};

       if (Ext.isArray(itemTpl)) {
            // string array
            itemTpl = itemTpl.join('');
        } else if (Ext.isObject(itemTpl)) {
            // tpl instance
            memberFn = Ext.apply(memberFn, itemTpl.initialConfig);
            itemTpl = itemTpl.html;
        }

        if (!this.itemSelector) {
            this.itemSelector = '.' + this.itemCls;
        }

        itemTpl = Ext.String.format('<tpl for="."><div class="{0}" role="{2}">{1}</div></tpl>', this.itemCls, itemTpl, this.itemAriaRole);
        this.tpl = new Ext.XTemplate(itemTpl, memberFn);
    }

});

Теперь перед сменой стора надо вызывать этот метод с новым шаблоном. При смене стора должен вызваться метод refresh вашего дата вью и новые шаблоны применятся. Не проверял, но должно работать. Удачи.

[treasury]

вот так набросал, но есть проблема с самой store по идее, появляется лоадер и в консоль валится ошибка: Uncaught SyntaxError: Unexpected token : 80a8d5b12281c9e8ae7d88e031e83677?_dc=1413787144933 &page=1&start=0&limit=999&callback=Ext.data.JsonP� ��:1

var panel = Ext.getCmp('dataview');


        store = Ext.getStore('CarStore');        
        store.reload();

        panel.tpl = new Ext.XTemplate('<table>',
            '   <tr>',
            '       <td width=\'200px\'><input type="checkbox" enabled="enabled" value="open" name="comment_status" <tpl if="active">checked="checked"</tpl> /><img src="http://{test}/avl_icon/get/{id}/18/any.png">{nm}</td>',
            '       <td class="configure"></td>',
            '   </tr>    ',
            '       </table>',
            '   ');

код самой store:

Ext.define('MyApp.store.CarStore', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.CarModel',
        'Ext.data.JsonStore'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            pageSize: 999,
            storeId: 'CarStore',
            model: 'MyApp.model.CarModel',
            proxy: {
                type: 'jsonp',
                url: 'http://localhost:3000/wialoncollector/items/'+Ext.util.Cookies.get("ssid"),                
                actionMethods: {
                    create: 'GET',
                    read: 'GET',
                    update: 'GET',
                    destroy: 'GET'
                },
                headers: '("Access-Control-Allow-Origin", "*")'
            }
        }, cfg)]);
    }
});

[skrudjmakdak]

видимо у тебя нет функции, которая должна вызваться. ты знаешь чем отличается json от jsonp?

[treasury]

видимо у тебя нет функции, которая должна вызваться. ты знаешь чем отличается json от jsonp?

ага, должна быть callback функция при использовании jsonp. Но не совсем понимаю где она должна быть описана и что в ней должно быть.

[skrudjmakdak]

не совсем понимаю где она должна быть описана и что в ней должно быть.

значит ты не совсем понимаешь как работает jsonp ))
объясняю. представь, у тебя есть аякс запрос и тебе сервер отдает json строку. ты ее парсишь и все ок. теперь представь, у тебя есть другой домен и ты не можешь делать кроссдоменные аякс запросы, а данные ты как то хочешь выдрать. поэтому одной из технологий для получения кроссдоменных запросов является jsonp.

как она работает?
ты должен понимать как эта конструкция работает:

<script src="http://site.ru/js/address.js"></script>

так вот, данная html конструкция тянет javascript код которой выполняется. при этом скрипт ты можешь подгружать кроссдоменно.
т.е. скрипты ты можешь тянуть из любого домена, а вот аякс запросы нет.

поэтому при технолгии jsonp динамически грузят какбэ скрипт, но там на деле находятся данные, обернутые в функцию или вызывается метод какого то объекта, которые это все дело парсит:

callback.fun1('{param: 1}');

может я плохо объяснил, почитай в инете. но тебе главное понять суть jsonp, что это простое добавление тега <script> и указание атрибута src - пути этого скрипта. а внутри скрипта (какбы скрипта) должны быть твои данные обернутые в функцию

[skrudjmakdak]

вот смотри, здесь сенча дает пример, можешь посмотреть:
http://docs.sencha.com/extjs/4.2.2/e...id/paging.html

а вот скрин:


п.с. я надеюсь ты отладчиком умеешь пользоваться?)

[treasury]

у меня url в store указан следующий:
url: 'http://localhost:3000/wialoncollector/items/'+Ext.util.Cookies.get("ssid")
Ext.util.Cookies.get("ssid") - сессия которую я получаю только после успешного прохождения формы логина, поэтому не понятно как подключить в index.html мой скрипт по типу:
<script src="http://domainB.com/users?callback=someCallback"></script>

Возможно мне и нет необходимости использовать jsonp, указал просто в store type: 'ajax' , выполняю код что выше указывал:

var panel = Ext.getCmp('dataview');


        store = Ext.getStore('CarStore');        
        store.reload();

        panel.tpl = new Ext.XTemplate('<table>',
            '   <tr>',
            '       <td width=\'200px\'><input type="checkbox" enabled="enabled" value="open" name="comment_status" <tpl if="active">checked="checked"</tpl> /><img src="http://{test}/avl_icon/get/{id}/18/any.png">{nm}</td>',
            '       <td class="configure"></td>',
            '   </tr>    ',
            '       </table>',
            '   ');

Но в консоль валится ошибка:

XMLHttpRequest cannot load [url]http://localhost:3000/wialoncollector/items/fb3c15cf898d432044321014e3d1c017?_dc=1413798123228&page=1&start=0&limit=999[/url]. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

Если перехожу по урлу просто http://localhost:3000/wialoncollecto...rt=0&limit=999 json вижу.

А вообще задача изначально следующая есть выпадающий список, нужно подгружать данные с разных store в dataview со своими шаблонами. Как бы с подключением шаблона вроде разобрались. Теперь я правильно понимаю команда: store.reload(); дергает store, она в свою очередь шлет запрос, который указан в proxy, данные автоматом парсятся и заносятся в dataview? Вот с последним проблемы...

[skrudjmakdak]

вы читали, что я вам писал?
1)
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
это означает, что нельзя делать кроссдоменный запрос.

2) вам надо писать не ajax а jsonp: type: 'jsonp'

еще раз даю ссылку на пример: http://docs.sencha.com/extjs/4.2.2/e...id/paging.html
вот он код: http://docs.sencha.com/extjs/4.2.2/e...grid/paging.js
как описывается стора:

var store = Ext.create('Ext.data.Store', {
        pageSize: 50,
        model: 'ForumThread',
        remoteSort: true,
        proxy: {
            // load using script tags for cross domain, if the data in on the same domain as
            // this page, an HttpProxy would be better
            type: 'jsonp',
            url: 'http://www.sencha.com/forum/topics-browse-remote.php',
            reader: {
                root: 'topics',
                totalProperty: 'totalCount'
            },
            // sends single sort as multi parameter
            simpleSortMode: true
        },
        sorters: [{
            property: 'lastpost',
            direction: 'DESC'
        }]
    });

вот то что приходит с сервера: http://www.sencha.com/forum/topics-b...nP .callback2

[treasury]

Ок, по первому понятно. По второму, вот читаю документацию http://docs-origin.sencha.com/extjs/...ta.proxy.JsonP , согласно которой я должен указать в store callbackKey: 'theCallbackFunction', я это сделал. Далее я должен подключить скрипт url которого прописан в store, в моем случае: url: 'http://localhost:3000/wialoncollector/items/'+Ext.util.Cookies.get("ssid"). Согласно той же документации я должен подключить скрипт в index.html типа: <script src="http://localhost:3000/wialoncollector/items/'+Ext.util.Cookies.get("ssid")?callback=theCallbac kFunction"></script>. Теперь что из этого не верно, если все верно, как я могу подключить скрипт в котором используется сессия: Ext.util.Cookies.get("ssid") которую я получаю только после успешного прохода формы логина?
Примеры посмотрел, все вроде понятно, но у себя пока не получается реализовать, также не вижу в примерах callback функции.