Javascript.RU

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

помогите создать View
делаю шаг-за-шагом как в документации. Вроде работает.
Теперь хочу сделать свой View на основе Panel-и, куда я
вставил "Menu" (работает) и хотелось бы вот такое "Вью"
(на картинке ) . Что мне надо добавит в код что бы было приблизительно как на картинке? Какои "layout" надо?
Т.е. слева "FieldSet" куда я буду добавлять кнопки и проч , а справа
Grid . Я понимаю, что для "paging"-a мне надо вниз ещё "тулбар" добавить

Ext.define('MyApp.view.ui.mainWindow', {
    extend: 'Ext.form.Panel',

    height: 773,
    width: 727,
    layout: {
        type: 'absolute'
    },
    bodyPadding: 10,
    preventHeader: true,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [
                        {
                            xtype: 'button',
                            id: 'top_menu_New_Quote',
                            text: 'New Quote',
                            menu: {
                                xtype: 'menu',
                                items: [
                                    {
                                        xtype: 'menuitem',
                                        id: 'add_prospect_menu',
                                        text: 'Add PR'
                                    },
                                    {
                                        xtype: 'menuitem',
                                        id: 'add_defend_menu',
                                        text: 'Add DE'
                                    },
                                    {
                                        xtype: 'menuitem',
                                        text: 'Add GR'
                                    }
                                ]
                            }
                        },
                        {
                            xtype: 'button',
                            id: 'top_menu_Quote_List',
                            text: 'Quote List',
                            menu: {
                                xtype: 'menu',
                                width: 120,
                                items: [
                                    {
                                        xtype: 'menuitem',
                                        id: 'print_menu',
                                        text: 'Print'
                                    },
                                    {
                                        xtype: 'menuitem',
                                        id: 'export_to_excel_menu',
                                        text: 'Export to Excel'
                                    }
                                ]
                            }
                        }
                    ]
                }
            ],
            items: [
                {
                    xtype: 'fieldset',
                    height: 670,
                    width: 253,
                    title: 'My Fields',
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: 'Label',
                            anchor: '100%'
                        }
                    ]
                },
                {
                    xtype: 'gridpanel',
                    height: 650,
                    width: 410,
                    title: 'My Grid Panel',
                    x: 290,
                    y: 20,
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'string',
                            text: 'String'
                        },
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'number',
                            text: 'Number'
                        },
                        {
                            xtype: 'datecolumn',
                            dataIndex: 'date',
                            text: 'Date'
                        },
                        {
                            xtype: 'booleancolumn',
                            dataIndex: 'bool',
                            text: 'Boolean'
                        }
                    ],
                    viewConfig: {

                    }
                }
            ]
        });

        me.callParent(arguments);
    }
});
Изображения:
Тип файла: jpg example.JPG (36.3 Кб, 7 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 01.12.2011, 01:04
Аспирант
Отправить личное сообщение для Bkmz_1_ Посмотреть профиль Найти все сообщения от Bkmz_1_
 
Регистрация: 03.12.2009
Сообщений: 56

Тебе надо view который будет содержать контейнер с двумя элементами? В левом поле ввода, а в правом таблица? И ты не знаешь какой layuot использовать?

Ext.define('MyApp.view.Groups', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.groups',
    layout: 'column',
    border: 0,
    initComponent: function() {
        this.items = [
            {
                xtype: 'gridpanel',
                itemId: 'grid-goods',
                padding: '10px 5px 10px 10px',
                title: 'Товары',
                store: 'Good',
                columnWidth: 0.5,
                columns: [
                    {
                        dataIndex: 'name',
                        flex: 1,
                        text: 'Товары'
                    },
                    {
                        width: 50,
                        dataIndex: 'count',
                        text: '№'
                    }
                ]
            },
            {
                xtype: 'gridpanel',
                itemId: 'grid-services',
                padding: '10px 10px 10px 5px',
                title: 'Услуги',
                store: 'Service',
                columnWidth: 0.5,
                height: 585,
                columns: [
                    {
                        dataIndex: 'name',
                        flex: 1,
                        text: 'Услуги'
                    },
                    {
                        width: 50,
                        dataIndex: 'count',
                        text: '№'
                    }
                ]
            }
        ];
        this.callParent(arguments);
    }
});


view-шка имеет layout: 'column', а внутренним элементам (у меня 2-м) задается columnWidth (у меня columnWidth: 0.5).

Надеюсь я помог

Последний раз редактировалось Bkmz_1_, 01.12.2011 в 01:12.
Ответить с цитированием
  #3 (permalink)  
Старый 01.12.2011, 01:10
Аспирант
Отправить личное сообщение для Bkmz_1_ Посмотреть профиль Найти все сообщения от Bkmz_1_
 
Регистрация: 03.12.2009
Сообщений: 56

layout: {
    type: 'absolute'
},

Не очень удачное решение.
Ответить с цитированием
  #4 (permalink)  
Старый 01.12.2011, 06:05
Интересующийся
Отправить личное сообщение для rom30 Посмотреть профиль Найти все сообщения от rom30
 
Регистрация: 13.11.2011
Сообщений: 25

Спасибо. Забыл заметить, что докуменитация на Sencha по MVC !!!.
Я так понимаю, что скажем браузер отобразил мой VIEW. Пользователь
дергает за рамку (resizing) (меняет размер окна всяко разно) . И вот тут-то (как я понимаю) "layout должен работать" !!
Если слева у меня fieldset ( а в нем textfield-ы, button-ы, dropdown-ы и пр.) а справа grid , то я как-то (с помощъю layout-а_ должен запрограммировать "масштабирование" этих "textfield-ов, button-от, dropdown-ов и проч ? Правильно ?
Если да, то дайте пож-та пример.
PS: Absolut layout - не очень удачное решение - согласен
Ответить с цитированием
  #5 (permalink)  
Старый 02.12.2011, 03:00
Аспирант
Отправить личное сообщение для Bkmz_1_ Посмотреть профиль Найти все сообщения от Bkmz_1_
 
Регистрация: 03.12.2009
Сообщений: 56

Цитата:
должен запрограммировать "масштабирование" этих "textfield-ов, button-от, dropdown-ов и проч ? Правильно ?
Масштабирование элементов не будет. layout просто задает порядок отображения элементов в контейнере каком-то (окне, панеле). Ну, а самый лучший пример это вот layout-browser

Последний раз редактировалось Bkmz_1_, 02.12.2011 в 03:04.
Ответить с цитированием
  #6 (permalink)  
Старый 02.12.2011, 05:38
Интересующийся
Отправить личное сообщение для rom30 Посмотреть профиль Найти все сообщения от rom30
 
Регистрация: 13.11.2011
Сообщений: 25

Спасибо ! "въющку" сделал! Работает !
правда в IE медленнее чем в Chrome.
Теперь надо dropdown "заполнять".
Локально (store) -работает.
Хочется что-бы из Sevleta.
Будем читать и вас спрашивать. Еще раз Спасибо !
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите создать javascript для ВКонтакте roxana_babay Оффтопик 2 19.01.2011 06:43
Помогите создать тройное select меню JuriySOFT Элементы интерфейса 12 14.06.2010 14:33
Помогите создать скрипт замены картинок при наведении курсора. SantaS Я не знаю javascript 3 05.06.2009 12:59
Пожалуйста, помогите создать Web-страницу, содержащую заданную форму Mikhail Работа 1 14.05.2009 00:41
Пожалуйста, помогите создать Web-страницу, содержащую заданную форму Mikhail Элементы интерфейса 2 13.05.2009 22:57