Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   Extjs 5 + SearchField.js (https://javascript.ru/forum/extjs/49788-extjs-5-searchfield-js.html)

treasury 28.08.2014 12:31
Extjs 5 + SearchField.js
 
Пробую прикрутить плагин http://dev.sencha.com/ext/5.0.1/exam...SearchField.js
Ввожу в строку поиска нажимаю поиск срабатывает лоадер и ничего не происходит, ошибка в консоли



Фрагмент кода панели, где размещено поле поиска
Ext.define('MyApp.view.Main', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.main',

    requires: [
        'MyApp.view.MainViewModel',
        'MyApp.view.MainViewController',
        'Ext.view.View',
        'Ext.XTemplate',
        'Ext.form.Panel',
        'Ext.form.FieldSet',
        'Ext.form.field.Date',
        'Ext.form.field.Time',
        'Ext.button.Button',
        'Ext.toolbar.Toolbar',
        'Ext.toolbar.TextItem'
    ],

    controller: 'main',
    viewModel: {
        type: 'main'
    },
    reference: 'main',
    itemId: 'myviewport',
    layout: 'border',
    defaultListenerScope: true,

    items: [
        {
            xtype: 'panel',
            region: 'west',
            split: true,
            splitterResize: false,
            reference: 'leftPanel',
            autoScroll: true,
            itemId: 'mypanel',
            width: 270,
            collapsed: false,
            collapsible: true,
            title: 'OvAgro',
            titleCollapse: false,
            items: [
                {
                    xtype: 'dataview',
                    autoScroll: true,
                    margin: '10 0 10 10',
                    disableSelection: false,
                    itemSelector: 'div',
                    itemTpl: [
                        '<table>',
                        '   <tr>',
                        '       <td width=\'200px\'><input type="checkbox" enabled="enabled" value="open" name="comment_status" <tpl if="active">checked="checked"</tpl> /><img src="http://{host}/avl_icon/get/{id}/18/any.png">{nm}</td>',
                        '       <td class="configure"></td>',
                        '   </tr>    ',
                        '       </table>',
                        '   '
                    ],
                    store: 'Object',
                    listeners: {
                        itemclick: {
                            fn: 'onDataviewSelectConfigure',
                            single: false
                        },
                        select: 'onDataviewSelect'
                    }
                },
                {
                    xtype: 'form',
                    bodyPadding: 10,
                    title: 'Отчет',
                    items: [
                        {
                            xtype: 'fieldset',
                            title: 'От',
                            items: [
                                {
                                    xtype: 'datefield',
                                    anchor: '100%',
                                    fieldLabel: 'Дата'
                                },
                                {
                                    xtype: 'timefield',
                                    anchor: '100%',
                                    fieldLabel: 'Время',
                                    format: 'H:i',
                                    increment: 1,
                                    maxValue: '23:59',
                                    minValue: '00:00'
                                }
                            ]
                        },
                        {
                            xtype: 'fieldset',
                            title: 'До',
                            items: [
                                {
                                    xtype: 'datefield',
                                    anchor: '100%',
                                    fieldLabel: 'Дата'
                                },
                                {
                                    xtype: 'timefield',
                                    anchor: '100%',
                                    fieldLabel: 'Время',
                                    format: 'H:i',
                                    increment: 1,
                                    maxValue: '23:59',
                                    minValue: '00:00'
                                }
                            ]
                        },
                        {
                            xtype: 'button',
                            itemId: 'executeRep',
                            margin: '0 0 0 70',
                            text: 'Сформировать'
                        }
                    ]
                }
            ],
            dockedItems: [
                {
                    xtype: 'searchfield',
                    store: 'Object',
                    dock: 'top'

                }
            ]
        }


Если еще что-то нужно по коду говорите, буду выкладывать.
Возможно еще какие-нибудь параметры нужно указать для поля поиска? Спасибо!

treasury 28.08.2014 12:40

Raydezm 28.08.2014 23:54
Предположу...

Строка 058
store: Ext.data.StoreManager.lookup('Object')


И подробнее почитать примеры http://docs.sencha.com/extjs/5.0/api...View-cfg-store

treasury 29.08.2014 10:34
Цитата:
Сообщение от Raydezm (Сообщение 328016)
Предположу...

Строка 058
store: Ext.data.StoreManager.lookup('Object')


И подробнее почитать примеры http://docs.sencha.com/extjs/5.0/api...View-cfg-store
если указываю в 58 строке store через эту конструкцию, у меня ничего не выводится в dataview. Но при поиске ошибка в консоле такая же как выше.

VitalikSanich 29.08.2014 20:18
Страница http://localhost/MyApp.model.Object не найдена.. "Копать" в сторону связи сторе с сервером. Нет?
P.S.: "Object" -- на мой взгляд не очень удачный вариант назвать сторе

treasury 01.09.2014 12:58
Код создания store:
Ext.define('MyApp.store.Object', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.Object'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'Object',
            batchUpdateMode: 'complete',
            model: 'MyApp.model.Object'
        }, cfg)]);
    }
});

Есть еще идеи, вопрос актуален!

skrudjmakdak 01.09.2014 15:30 
requires: [
        'MyApp.model.Object'
    ],

как вариант: ты подключаешь model но модель видимо не грузится, т.к. ее нет

treasury 01.09.2014 16:13
Цитата:
Сообщение от skrudjmakdak (Сообщение 328430) 
requires: [
        'MyApp.model.Object'
    ],

как вариант: ты подключаешь model но модель видимо не грузится, т.к. ее нет
Код модели:
Ext.define('MyApp.model.Object', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.field.Integer',
        'Ext.data.field.String'
    ],

    fields: [
        {
            type: 'int',
            name: 'id',
            unique: true
        },
        {
            type: 'string',
            name: 'nm'
        }
    ]
});

skrudjmakdak 01.09.2014 16:19
хотя у тебя как то странно.. если бы модели не было, он тебе может и твою app не инициализировал (но не факт).

просто у тебя и модель грузится по адресу MyApp.model.Object и смотря на консоль в твоей ошибки и данные тянутся по тому же адресу. т.е. еще как вариант у тебя идет запрос на получение данных, а урла по которой ты хочешь получить эти данные не рабочая

skrudjmakdak 01.09.2014 16:20
Цитата:
Сообщение от treasury (Сообщение 328438)
Код модели:
это как раз таки код сторы, но не модели
код модели начинается так:
Ext.define('MyApp.model.Object', {

treasury 01.09.2014 16:40
Указал код модели выше, не то оказалось в буфере

skrudjmakdak 01.09.2014 16:43
я не увидел ни в сторе не в модели, где бы вы описывали proxy где в ней необходимо указать урлу для получения данных.
посмотрите как это делает sencha в своем примере:
http://docs.sencha.com/extjs/4.2.2/#...Ext.data.Store

я уверен что проблема именно в несуществующей урле, по которой нужно получать данные

treasury 01.09.2014 16:44
Цитата:
Сообщение от skrudjmakdak (Сообщение 328439)
хотя у тебя как то странно.. если бы модели не было, он тебе может и твою app не инициализировал (но не факт).

просто у тебя и модель грузится по адресу MyApp.model.Object и смотря на консоль в твоей ошибки и данные тянутся по тому же адресу. т.е. еще как вариант у тебя идет запрос на получение данных, а урла по которой ты хочешь получить эти данные не рабочая
Да это похоже на правду, у меня выводятся все данные в dataview из store, какой я должен послать запрос в поиске для получения этих данных. Что я должен еще сделать чтобы поиск начал работать?

treasury 01.09.2014 16:52
Цитата:
Сообщение от skrudjmakdak (Сообщение 328450)
я не увидел ни в сторе не в модели, где бы вы описывали proxy где в ней необходимо указать урлу для получения данных.
посмотрите как это делает sencha в своем примере:
http://docs.sencha.com/extjs/4.2.2/#...Ext.data.Store

я уверен что проблема именно в несуществующей урле, по которой нужно получать данные
Указал в store:
proxy: {
type: 'ajax',
url: 'Object'
}

теперь запрос имеет вид http://localhost/OvGps/OvClient/Obje...25&q uery=DAF
Request Method:GET
Status Code:200 OK

Пишет [WARN] Unable to parse the JSON returned by the server
В Response просто код модели.
Ext.define('MyApp.model.Object', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.field.Integer',
        'Ext.data.field.String'
    ],

    fields: [
        {
            type: 'int',
            name: 'id',
            unique: true
        },
        {
            type: 'string',
            name: 'nm'
        }
    ]
});

skrudjmakdak 01.09.2014 16:57
Цитата:
Сообщение от treasury (Сообщение 328457)
Пишет [WARN] Unable to parse the JSON returned by the server
В Response просто код модели.
значит ошибка уже на сервере, вам надо добиться того, чтобы по ссылке, которую вы дергайте приходил json с данными

skrudjmakdak 01.09.2014 17:03
выж писали что данные тянутся во view? так? по какой урле данные приходят в первый раз?

treasury 01.09.2014 17:26
да, потом я их вставляю в store 
for (var i=0; i<obj.items.length; i++){
        storeObject.add({id: obj.items[i].id, nm: obj.items[i].nm});       
    }

разве я их не из store должен потом доставать для поиска?

По такому урлу я получаю данные и я указал в proxy:
proxy: {
type: 'ajax',
url: 'http://localhost:3000/wialoncollector/items/'+Ext.util.Cookies.get("ssid")
}

Далее ошибка:

skrudjmakdak 01.09.2014 17:36
стора сама все делает. вы подгрузили данные она сама их в view вставила

treasury 01.09.2014 18:00
Давайте еще раз. Я обратился на сервер по такому урлу http://localhost:3000/wialoncollector/items/'+Ext.util.Cookies.get("ssid"), сервер мне отдал json я распарсил засунул в store, вывожу во view из store. Теперь для поиска елементов и соотвественно вывода их во view, я должен опять слать запрос на сервер для получения данных? Нельзя из store брать как-то то что ищу? И что по ошибке скажете что выше?

skrudjmakdak 01.09.2014 18:16
Цитата:
Сообщение от treasury (Сообщение 328478)
Я обратился на сервер по такому урлу http://localhost:3000/wialoncollector/items/'+Ext.util.Cookies.get("ssid"), сервер мне отдал json я распарсил засунул в store
повторяю еще раз, вы указывайте в сторе урлу, стора сама дергает эту урлу, сама парсит и сама заносит во вьюв. такое впечатление что вы примеры вообще не смотрели

вот пример:
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 grid = Ext.create('Ext.grid.Panel', {
...



у него прописывается стора:
...
store: store,
...


эта стора объявляется так:
var store = Ext.create('Ext.data.Store', {
        pageSize: 50,
...

где у него куча свойств:
pageSize: 50 - кол-во записей на странице
sorters: [{
            property: 'lastpost',
            direction: 'DESC'
        }]

сортировка по умолчанию. т.д.

и есть прокся:
proxy: {
            type: 'jsonp',
            url: 'http://www.sencha.com/forum/topics-browse-remote.php',
            reader: {
                root: 'topics',
                totalProperty: 'totalCount'
            },
            simpleSortMode: true
        },

type - тип данных, которые приходят с сервера, здесь jsonp - т.к. запрос кроссдоменный. в вашем случае я думаю хватит json
url - урла по которой store дернет вашу урлу, для получения данных
root - корень в json откуда надо брать данные
totalProperty - кол-во записей стора которой достала
и т.д. вы можете в документации почитать все свойства, которые можно задавать

модель соответственно задает структуру данных, поля которые буду использоваться:
'title', 'forumtitle', 'forumid', 'username',

еще можно указать тип данных:
{name: 'replycount', type: 'int'},

вот урла, стора которую дергает:
http://www.sencha.com/forum/topics-browse-remote.php

пройдите по урле и посмотрите что там находится

skrudjmakdak 01.09.2014 19:12
я вам упростил тот самый пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Paging Grid Example</title>

    <link rel="stylesheet" type="text/css" href="http://docs.sencha.com/extjs/4.2.2/extjs-build/resources/css/ext-all-neptune-debug.css" />
    <script type="text/javascript" src="http://docs.sencha.com/extjs/4.2.2/extjs-build/ext-all.js"></script>
    <script type="text/javascript">
Ext.onReady(function(){
    Ext.tip.QuickTipManager.init();

    Ext.define('ForumThread', {
        extend: 'Ext.data.Model',
        fields: [
            'title', 'forumtitle', 'forumid', 'username',
            {name: 'replycount', type: 'int'},
            {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
            'lastposter', 'excerpt', 'threadid'
        ],
        idProperty: 'threadid'
    });

    // create the Data Store
    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
        },
		autoLoad: true
    });

    var grid = Ext.create('Ext.grid.Panel', {
        width: 700,
        height: 500,
        title: 'ExtJS.com - Browse Forums',
        store: store,
        columns:[{
            id: 'topic',
            text: "Topic",
            dataIndex: 'title',
            flex: 1,
            sortable: false
        },{
            text: "Author",
            dataIndex: 'username',
            width: 100
        },{
            text: "Replies",
            dataIndex: 'replycount',
            width: 70,
            align: 'right',
            sortable: true
        }],
        renderTo: Ext.getBody()
    });
});
	</script>
</head>
<body>
</body>
</html>


Часовой пояс GMT +3, время: 16:08.