Почему моя Ext Grid не заполнена данными? - PullRequest
1 голос
/ 26 мая 2011

Я даю код, который я использовал .. Пожалуйста, помогите ...

Раздел JavaScript выглядит так:

<code>Ext.define('NewsInfo', {
        extend: 'Ext.data.Model',
        fields: [
            { name:'news_id',           mapping:'news_id',          type:'int' },
            { name:'news_title',        mapping:'news_title',       type:'string' },
            { name:'news_summary',      mapping:'news_summary',     type:'string' },
            { name:'news_description',  mapping:'news_description', type:'string' },
            { name:'news_source',       mapping:'news_source',      type:'string' },
            { name:'published_on',      mapping:'published_on',     type:'date',    dateFormat:'Y-m-d H:i:s' },
            { name:'on_skype',          mapping:'on_skype',         type:'string' },
            { name:'is_active',         mapping:'is_active',        type:'string' },
            { name:'updated_at',        mapping:'updated_at',       type:'date',    dateFormat:'Y-m-d H:i:s' }
        ]/*,
        validations: [{
            type: 'length',
            field: 'news_title',
            min: 1
        }, {
            type: 'length',
            field: 'news_summary',
            min: 1
        }, {
            type: 'length',
            field: 'news_description',
            min: 1
        }]*/
    });


store = new Ext.data.JsonStore({
    autoLoad: true,
    model: 'NewsInfo',
    sortInfo: { field:'news_title', direction:'ASC'},
    idProperty: 'news_id',
    remoteSort: true,
    proxy: new Ext.data.HttpProxy({
        url: $this._s_ajax_url + '/load_news_collection/true',
        method: 'POST'
    }),
    reader: Ext.data.JsonReader({
        url: $this._s_ajax_url + '/load_news_collection/true',
        fields: [
            { name:'news_id',           mapping:'news_id',          type:'int' },
            { name:'news_title',        mapping:'news_title',       type:'string' },
            { name:'news_summary',      mapping:'news_summary',     type:'string' },
            { name:'news_description',  mapping:'news_description', type:'string' },
            { name:'news_source',       mapping:'news_source',      type:'string' },
            { name:'published_on',      mapping:'published_on',     type:'date',    dateFormat:'Y-m-d H:i:s' },
            { name:'on_skype',          mapping:'on_skype',         type:'string' },
            { name:'is_active',         mapping:'is_active',        type:'string' },
            { name:'updated_at',        mapping:'updated_at',       type:'date',    dateFormat:'Y-m-d H:i:s' }
        ],
        root: 'records',
        totalProperty: 'row_count',
        successProperty: 'success'
    })
});
var columns = [
    {
        text     : 'News ID',
        width    : 55,
        sortable : true,
        hideable : false,
        dataIndex: 'news_id'
    },
    {
        text     : 'News Sinossi',
        width    : 235,
        sortable : true,
        hideable : true,
        dataIndex: 'news_title'
    },
    {
        text     : 'Active',
        width    : 75,
        sortable : true,
        hideable : true,
        dataIndex: 'is_active',
        align    : 'center',
        renderer : function (s_val) {
            if (s_val == 'YES')
            {
                return '<img src="' + $this.get_skin_url('images/icons/tick_circle.png') + '" alt="' + s_val + '" title="' + s_val + '" />';
            }
            return '<img src="' + $this.get_skin_url('images/icons/cross_circle.png') + '" alt="' + s_val + '" title="' + s_val + '" />';
        }
    },
    {
        text     : 'Last Updated',
        align    : 'center',
        width    : 95,
        sortable : true,
        hideable : false,
        renderer : Ext.util.Format.dateRenderer('d-M-Y'),
        dataIndex: 'updated_at'
    },
    {
        xtype   : 'actioncolumn',
        align   : 'center',
        hideable: false,
        width   : 70,
        items   : [{
            icon   : $this.get_skin_url('images/icons/pencil.png'),  // Use a URL in the icon config
            tooltip: 'Edit',
            handler: function(grid, rowIndex, colIndex) {
                var obj_rec = store.getAt(rowIndex);
                $('#div_news_grid_container').slideUp(800);
                $('#div_editor_content').slideDown(800, function () {
                    $('#news_id').val(obj_rec.get('news_id'));
                    $('#news_title').val(obj_rec.get('news_title'));
                    $('#news_summary').val(obj_rec.get('news_summary'));
                    tinyMCE.get('news_description').setContent(obj_rec.get('news_description'));
                });
            }
        }, {
            icon   : $this.get_skin_url('images/icons/view.png'),  // Use a URL in the icon config
            tooltip: 'View',
            handler: function(grid, rowIndex, colIndex) {
                var obj_rec = store.getAt(rowIndex);
                var s_description = "<div style=\"background-color:white !important; height:100%; overflow:auto;\">\
                    " + obj_rec.get('news_description') + "\
                </div>";
                var s_description_html = "<div style=\"background-color:white !important; height:100%; overflow:auto;\">\
                    <pre>\
                        " + obj_rec.get('description_html') + "\
                    
\ "; Ext.create ('Ext.window.Window', { renderTo: "main-content", title: «Описание для» + obj_rec.get ('title_text'), closeAction: 'hide', минимизируемый: ложь, максимизируемый: ложь, изменяемый размер: правда, модальный: правда, макет: «граница», высота: 350, ширина: 550, Предметы: [{ регион: 'центр', xtype: 'tabpanel', Предметы: [{ title: 'Preview', html: s_description }, { заголовок: «HTML», html: s_description_html }] }] }).шоу(); } }, { icon: $ this.get_skin_url ('images / icons / cross.png'), // Использовать URL-адрес в конфигурации значков всплывающая подсказка: «Удалить», обработчик: функция (grid, rowIndex, colIndex) { var obj_rec = store.getAt (rowIndex); var s_news_title = obj_rec.get ('title_text'); var i_news_id = obj_rec.get ('news_id'); Ext.MessageBox.show ({ title: «Подтвердить удаление», msg: 'Вы действительно хотите удалить' + s_news_title + '?', кнопки: Ext.MessageBox.YESNO, icon: Ext.MessageBox.QUESTION, закрываемый: ложь, fn: function (btn) { если (btn == 'да') { $ This.delete_news (i_news_id); } } }); } }] } ]; store.on ('load', function () { Ext.create ('Ext.grid.Panel', { магазин: магазин, столбцы: столбцы, высота: 350, ширина: 645, title: «Система управления новостями», renderTo: 'div_news_grid', loadMask: правда, viewConfig: { stripeRows: правда }, bbar: новый Ext.PagingToolbar ({ Размер страницы: 25, магазин: магазин, displayInfo: true, displayMsg: «Отображение тем {0} - {1} из {2}», emptyMsg: «Нет тем для отображения», Предметы:[ '-', / * { нажата: верно, enableToggle: правда, текст: «Предварительный просмотр», cls: 'x-btn-text-icon details', toggleHandler: function (btn, нажата) { var view = grid.getView (); view.showPreview = нажат; view.refresh (); } } * /] }) }); });

Сервер отвечает следующим образом:

{
    "records":[
        {
            "news_id":"1",
            "news_title":"comunicato",
            "news_summary":"Un corso di lingua da seguire sempre, anche fuori sede Un problema che si riscontra frequentemente nelle",
            "news_description":"<p>&nbsp;<\/p>\r\n                <p>L\u2019estate \u00e8 alle porte e desideriamo aggiornarvi sulle attivit\u00e0 che stiamo organizzando per voi:<\/p>\r\n                <p>&nbsp;<\/p>\r\n                <p>Per i bambini e i ragazzi dai 4 ai 19 anni proponiamo un programma ricco di giochi, attivit\u00e0 pratiche, laboratori e tanto divertimento! Un\u2019occasione in pi\u00f9 per mettere in pratica le conoscenze linguistiche in un contesto diverso da quello prettamente scolastico favorendo anche il lavoro di gruppo.<\/p>\r\n                <ul class=\"list01\">\r\n                    <li>Si pu\u00f2 scegliere di fare 1 o 2 settimane<\/li>\r\n                    <li>I corsi si svolgono dal 13 giugno al 1 luglio (7 \u2013 19 anni) e dal 4 al 15 luglio (4 \u2013 6 anni), dal luned\u00ec al venerd\u00ec, dalle 8.30 alle 12.30<\/li>\r\n                    <li>2 settimane: \u20ac 280,00<\/li>\r\n                    <li>1 settimana: \u20ac 150,00<\/li>\r\n                    <li>I gruppi verranno attivati al raggiungimento di minimo 5 partecipanti e massimo 10<\/li>\r\n                    <li>Al raggiungimento di 10 partecipanti ci sar\u00e0 uno sconto del 20% per ogni studente, quindi se avete amici o parenti interessati avvertiteli!<\/li>\r\n                    <li>Sar\u00e0 disponibile un servizio di pre e post accoglienza <\/li>\r\n                <\/ul>\r\n                <p>Infine vi ricordiamo che la scuola rester\u00e0 aperta per tutta l\u2019estate (eccetto dal 1 al 22 agosto) per lezioni individuali, recupero crediti scolastici e mini-gruppi.<\/p>\r\n                <p>&nbsp;<\/p>",
            "is_active":"YES",
            "published_on":"2011-03-01 15:53:36",
            "updated_at":"2011-05-25 20:19:12"
        }
    ],
    "row_count":1,
    "success":true
}

Ответы [ 2 ]

5 голосов
/ 26 мая 2011

Это отмечено тегом extjs4, поэтому я думаю, что это может быть просто вопросом изменения конфигурации вашего объекта в соответствии с новыми параметрами конфигурации:

  • В магазине определены поля и модель.,Вам нужна только модель.
  • idProperty теперь определен как часть модели, он есть в магазине.
  • считыватели определены как часть прокси, теперь он есть в магазине.
  • специализированные типы хранилищ устарели (или, по крайней мере, недокументированы)
  • Возможно, ваша автозагрузка заканчивается до того, как ваша загрузка ('load') будет зарегистрирована.определяется как сортировщики

Я настоятельно рекомендую всегда ссылаться на официальный API для определения «подходящих» конфигураций.Для магазинов: http://docs.sencha.com/ext-js/4-0/#/api/Ext.data.Store

Вот модифицированная (но не проверенная) версия вашего кода с примерами внесенных изменений:

Ext.define('NewsInfo', {
    extend: 'Ext.data.Model',
    idProperty: 'news_id',
    // The rest of this should be right
});

Конфигурация магазина довольно различна ивероятно в корне ваши данные не загружаются:

var store = new Ext.data.Store({
    autoLoad: {
        callback: function() {
            Ext.create('Ext.grid.Panel', {
               // The rest of this should be right, too, pulled up from listener
            });
        }
    },
    model: 'NewsInfo',
    sorters: [{ property:'news_title', direction:'ASC'}],
    remoteSort: true,
    proxy: {
        type: 'ajax',
        url: $this._s_ajax_url + '/load_news_collection/true',
        method: 'POST',
        reader: {
            type: 'json',
            root: 'records',
            totalProperty: 'row_count',
            successProperty: 'success'
        }
    })
});
1 голос
/ 16 ноября 2011

Я наконец нашел свою проблему, это не версия JSON.Это может показаться глупым, но я работал на своем рабочем столе локально, и я делал запрос Json к серверу (www.domain.com/json.php).

Вы можете создать свой интерфейс, не находясь на сервере,Но если вы используете форму и отправляете.Ваш сайт также должен быть на сервере.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...