Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.12.2012, 14:14
Новичок на форуме
Отправить личное сообщение для TinK Посмотреть профиль Найти все сообщения от TinK
 
Регистрация: 25.12.2012
Сообщений: 4

ExtJS 4 - Открыть форму редактирования из Grid
Всем здрасте!
Сразу хочу сказать, что с ExtJS я новичок...

Взял за основу пример Web Desktop, точнее его из папки examples скачанного архива ExtJS 4.1.1a GPL.

Исходник я практически не трогал - изменил только GridWindow.js, и просто отключил все остальные модули генерирующие значки на "рабочем столе" и "меню Пуск" - то есть у меня остался только модуль GridWindow.js создающий пункт в меню и значок на столе.

GridWindow.js теперь выглядит как показано на миниатюре в конце поста, там же и вопрос!


Я изменил GridWindow.js превратив в следующее:
StorePlans = new Ext.data.JsonStore({
    autoLoad: true,
    fields: [
       { name: 'datepubl', type: 'date' },
       { name: 'datenew', type: 'date' },
       { name: 'dateclose', type: 'date' },
       { name: 'title', type: 'string' }
    ],
    proxy: {
        type: 'ajax',
        url: 'plans.php',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});
StoreNews = new Ext.data.JsonStore({
    autoLoad: true,
    fields: [
       { name: 'datepubl', type: 'date' },
       { name: 'dateclose', type: 'date' },
       { name: 'title', type: 'string' }
    ],
    proxy: {
        type: 'ajax',
        url: 'news.php',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.define('MyDesktop.GridWindow', {
    extend: 'Ext.ux.desktop.Module',

    requires: [
        'Ext.data.ArrayStore',
        'Ext.util.Format',
        'Ext.grid.Panel',
        'Ext.grid.RowNumberer'
    ],

    id:'grid-win',

    init : function(){
        this.launcher = {
            text: 'Новости и планы',
            iconCls:'icon-grid'
        };
    },

    createWindow : function(){
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('news-win');
        if(!win){
            win = desktop.createWindow({
                id: 'news-win',
                title:'Новости и планы',
                width:740,
                height:480,
                iconCls: 'tabs',
                animCollapse:false,
                constrainHeader:true,
                layout: 'fit',
                items: [
                    {
                        xtype: 'tabpanel',
                        activeTab:1,

                        items: [{
                            title: 'Планы',
                            id: 'panel-list-plan',
                            header:false,
                            border:false,
                            autoScroll: true,

                            items: [{
                                border: false,
                                alias: 'gridlistplan',
                                xtype: 'grid',
                                store: StorePlans,
                                columns: [
                                    //new Ext.grid.RowNumberer(),
                                    {
                                        text: "ID",
                                        width: 70,
                                        sortable: false,
                                        renderer: Ext.util.Format.numberRenderer('0'),
                                        dataIndex: 'id',
                                        hidden: true
                                    },
                                    {
                                        text: "Публикация",
                                        width: 70,
                                        sortable: true,
                                        renderer: Ext.util.Format.dateRenderer('Y-m-d'),
                                        dataIndex: 'datepubl'
                                    },
                                    {
                                        text: "В новость",
                                        width: 70,
                                        sortable: true,
                                        renderer: Ext.util.Format.dateRenderer('Y-m-d'),
                                        dataIndex: 'datenew'
                                    },
                                    {
                                        text: "Закрытие",
                                        width: 70,
                                        sortable: true,
                                        renderer: Ext.util.Format.dateRenderer('Y-m-d'),
                                        dataIndex: 'dateclose'
                                    },
                                    {
                                        text: "Заголовок",
                                        flex: 1,
                                        sortable: true,
                                        dataIndex: 'title'
                                    }
                                ]
                            }],
                            tbar:[{
                                text:'Добавить',
                                tooltip:'Добавить',
                                iconCls:'add',
                            }, '-', {
                                text:'Правка',
                                tooltip:'Редактировать',
                                iconCls:'option',
                                disabled: true,
                                itemId: 'planedit'
                            },'-',{
                                text:'Удалить',
                                tooltip:'Удалить выбранные',
                                iconCls:'remove',
                                disabled: true,
                                itemId: 'plandelete'
                            }],
                            bbar: new Ext.PagingToolbar({
                                store: StorePlans,
                                displayInfo: true,
                                displayMsg: 'Показано  {0} - {1} из {2}'
                            })

                        },{
                            title: 'Новости',
                            header:false,
                            border:false,
                            autoScroll: true,
                            items: [{
                                border: false,
                                xtype: 'grid',
                                autoScroll: true,
                                store: StoreNews,
                                columns: [
                                    //new Ext.grid.RowNumberer(),
                                    {
                                        text: "Публикация",
                                        width: 70,
                                        sortable: true,
                                        renderer: Ext.util.Format.dateRenderer('Y-m-d'),
                                        dataIndex: 'datepubl'
                                    },
                                    {
                                        text: "Закрытие",
                                        width: 70,
                                        sortable: true,
                                        renderer: Ext.util.Format.dateRenderer('Y-m-d'),
                                        dataIndex: 'dateclose'
                                    },
                                    {
                                        text: "Заголовок",
                                        flex: 1,
                                        sortable: true,
                                        dataIndex: 'title'
                                    }
                                ]
                            }],
                            tbar:[{
                                text:'Добавить',
                                tooltip:'Добавить',
                                iconCls:'add'
                            }, '-', {
                                text:'Правка',
                                tooltip:'Редактировать',
                                iconCls:'option',
                                disabled: true,
                                itemId: 'newedit'
                            },'-',{
                                text:'Удалить',
                                tooltip:'Удалить выбранные',
                                iconCls:'remove',
                                disabled: true,
                                itemId: 'newedit'
                            }],
                            bbar: new Ext.PagingToolbar({
                                store: StoreNews,
                                displayInfo: true,
                                displayMsg: 'Показано  {0} - {1} из {2}'
                            })
                        }]
                    }
                ]
            });
        }
        return win;
    },
});

Json отдается plans.php такой:
Код:
{
    "sucess":true,
    "total":1,
    "items":[{
        "id":"1000",
        "datepubl":"2012-07-27 00:00",
        "datenew":"2012-09-27 00:00",
        "dateclose":null,
        "title":"The Title Plan"
    }]
}
А news.php отдает похожий план (без поля datenew):
Код:
{
    "sucess":true,
    "total":1,
    "items":[{
        "id":"1000",
        "datepubl":"2012-07-27 00:00",
        "dateclose":null,
        "title":"The Title New"
    }]
}

Вопросы в следующем посте - в этот не вместились
Изображения:
Тип файла: jpg Форма обзора 'Новости и планы'.jpg (64.7 Кб, 43 просмотров)

Последний раз редактировалось TinK, 25.12.2012 в 16:08. Причина: дополнение
Ответить с цитированием
  #2 (permalink)  
Старый 25.12.2012, 14:17
Новичок на форуме
Отправить личное сообщение для TinK Посмотреть профиль Найти все сообщения от TinK
 
Регистрация: 25.12.2012
Сообщений: 4

Продолжение топика (то что в него не влезло...)
Что нужно:

Данные для таблиц получаются от php-скриптов в виде Json, примеры которых приведены выше (в первом посте темы). В Json есть полу ID которое в таблице не отображается, но нужно для того что бы сказать php-скрипту какая запись изменяется/удаляется.
Данные которые нужно вывести в форму приведены на миниатюре в конце топика (эту форму формирует скрипт текст которого приведен в середине топика).
Над таблицами есть 3 кнопки, 2 из которых ("Редактировать" и "Удалить") должны быть не активны до выбора любого элемента в соответствующей таблице.
Кнопка "Удалить" должна послать соответствующему скрипту ID выбранной строки (тот который пришел в Json) из своей таблицы.
Кнопки "Добавить" и Редактировать должны открыть одну и ту же форму, в которой кроме приведенных в таблице полей добавляется ещё одно - "Текст", в котором должен быть текст в html-разметке (как в окне "Notepad" из этой демки). В случае редактирования поля должны заполняться данными (недостающие, или сразу все, нужно запросить у php-скрипта послав ему ID пришедший в JSON).
Ну и соответственно, при создании новой записи данные на сервер посылаются с ID=0, а при редактировании ID должен быть тем который соответствен выбранной строке таблицы.

Вопросы:
  • Вот как активировать не активные кнопки при выборе любого элемента из таблицы я не знаю... И что-то не могу ни как найти как это делается.
  • Так же не получается разобраться с тем как открыть дочернею форму по кнопкам "Добавить" и "Редактировать" (т.к. она должна блокировать окно с Grid-ом)
  • И тем более не пойму как заполнить эту форму нужными данными, а потом отправить их на сервер и обновить таблицу...

Подскажите, кто может...
Буду очень признателен за примеры, особенно с комментариями


PS Да, я видел пример Ext.data.writer.Writer Example, но разобраться как изменить мою форму что бы получить похожее - не разобрался. Особенно не понятно как быть с ID и отправкой данных из второй формы php-скрипту...

PS2 По поводу принципа отправки данных на сервер могу ошибаться, надеюсь кто в курсе как правильно это делается - меня поправит...

Последний раз редактировалось TinK, 26.12.2012 в 14:51. Причина: Исправление ошибки
Ответить с цитированием
  #3 (permalink)  
Старый 27.12.2012, 01:04
Новичок на форуме
Отправить личное сообщение для TinK Посмотреть профиль Найти все сообщения от TinK
 
Регистрация: 25.12.2012
Сообщений: 4

Самую простую часть решил - осталась самая сложная...
Так, с активацией кнопок после выделения любой строки в таблице разобрался Все как всегда лежало на поверхности!

Добавляем следующий код после секции columns для таблицы планов:
listeners: {
    selectionchange: function(selModel, selections) {
        var notSelections = selections.length === 0;
        win.down('#planedit').setDisabled(notSelections);
        win.down('#plandelete').setDisabled(notSelections);
    }
}
И для таблицы новостей такой же, код - только для функции down указываем другие id кнопок.
Собственно этого достаточно что бы не активные кнопки "Редактировать" и "Удалить" стали активными.

Так же стало ясно, что как для получения данных с сервера, так и для отправки данных на него (новых, измененных или удаления данных) нужно использовать все тот же Store... Неожиданно, но вполне логично... Спасибо все тому же примеру Ext.data.writer.Writer Example.
К моему глубочайшему сожалению, все данные с которому требуется оперировать нужно таки запихивать в ответ сервера сразу - что, на мой взгляд не есть гуд - у меня, в некоторых случаях данных может быть для одной таблицы очень много и все их передавать (пусть и порциями - спасибо PagingToolbar) не резон, при том что форма редактирования может быть и не вызвана за весь сеанс (например, что-то искалось по заголовкам не совсем конкретное, для чего нельзя было использовать поиск - возможно все страницы будут пролистаны вручную, а форма редактирования так и не будет открыта)

И все ещё остается вопрос на повестке дня:
Как на добавление и редактирование создать форму и передать туда данные по выбранной записи (хотя бы id, из Store, а не порядковый в таблице)? И как засунуть его потом в запросы Store который уже будет использоваться в созданной форме (использовать тот же что и в таблице считаю не рациональным в виду объемов передаваемых данных)?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
extjs grid + mysql Jeka57 ExtJS 4 26.11.2012 19:19
Динамическое создание iframe в Firefox mrbean11 Firefox/Mozilla 8 02.11.2012 21:23
ExtJs Grid autoWidth Nightmare ExtJS 3 16.07.2012 17:34
grid в EXTJS ichisen ExtJS 8 06.07.2012 15:12
Печать grid в ExtJS Shtorm ExtJS 3 16.09.2011 17:40