Я новичок в Sencha Touch2 и столкнулся с проблемой при передаче данных с моего контроллера на плавающую панель при нажатии listitem. Вот мой код реализации контроллера:

Ext.define('CustomList.controller.Main', {
    extend: 'Ext.app.Controller',
    requires:['CustomList.view.DatePanel'],

    config: {
        refs: {
            listView: 'listitems'
        },

        control: {
            'main test2 list': {
                activate: 'onActivate',
                itemtap: 'onItemTap'
            }
        }
    },

    onActivate: function() {
        console.log('Main container is active');
    },

    onItemTap: function(view, index, target, record, event) {
        console.log('Item was tapped on the Data View');
        Ext.Viewport.add({
            xtype: 'DatePanel'
        });
     }

});

Я могу получать данные в контроллере, а DatePanel.js - моя плавающая панель. DatePanel.js:

Ext.define('CustomList.view.DatePanel', {
    extend: 'Ext.Panel',
    alias: 'widget.DatePanel',
    xtype:'datepanel',
    config: {
        itemid:'DatePanel',
        modal:true,
        centered: true,
        hideOnMaskTap:true,
        width:'500px',
        height:'650px',
        items:[
            {
                styleHtmlCls:'homepage',
                tpl:'<h4>{name3}</h4>'

            },
            {
                xtype:'toolbar',
                docked:'bottom',
                items:[{
                    text:'OK',
                    ui:'confirm',
                    action:'ShowTurnOverReport',
                    listeners : {
                        tap : function() {
                            console.log('Ok');
                        }
                    }
                },
                    {
                        text:'Cancel',
                        ui:'confirm',
                        action:'Cancel',
                        listeners : {
                            tap : function() {
                            console.log('Cancel');
                            var panelToDestroy = Ext.getCmp('datepanel');
                            panelToDestroy.destroy();
                            Ext.Viewport.add(Ext.create('CustomList.view.Test2'));//Test.js is my list Panel

                            }
                        }
                    }]

            }
        ]
    }
});

Помогите мне разрушить панель на кнопке «Отмена». Кто-нибудь может мне помочь, пожалуйста. Спасибо.

1
chipmunk 15 Мар 2013 в 11:03
Используйте значение идентификатора DatePanel в getCmp.
 – 
SachinGutte
15 Мар 2013 в 16:51

1 ответ

Лучший ответ

Создайте экземпляр панели, которую вы хотите добавить первой.

var floatingDatePanel = Ext.create('Yourapp.view.YourDatePanel');

Затем получить данные о выбранном элементе списка на itemTap

var data = record.getData();

Назначьте эти данные для floatingDatePanel с помощью метода setData()

ОБНОВЛЕНИЕ ,

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

        {
            styleHtmlCls:'homepage',
            tpl:'<h4>{name3}</h4>'

        }

Верно ? Если это так, вам необходимо изменить следующий код

floatingDatePanel.setData(data);

К

floatingDatePanel.getAt(0).setData(data);

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

Затем, наконец, вы можете добавить эту панель в окно просмотра с помощью

Ext.Viewport.add(floatingDatePanel);
2
SachinGutte 15 Мар 2013 в 15:53
Спасибо. Но я не могу получить данные в моем DatePanel.js.
 – 
chipmunk
15 Мар 2013 в 15:26
Добавлен DatePanel.js для справки.
 – 
chipmunk
15 Мар 2013 в 15:35
Я обновил свой ответ. Будет ясно, если вы далее укажете, что хотите с данными. Вы просто хотите отобразить его или поработать с ним позже? Также разместите код модели и магазина, используемого для отображения списка.
 – 
SachinGutte
15 Мар 2013 в 15:49
Большое спасибо. он работает сейчас, и не могли бы вы помочь мне уничтожить плавающую панель при нажатии кнопки «Отмена».
 – 
chipmunk
15 Мар 2013 в 16:09
Попробуйте var panelToDestroy = Ext.getCmp('datepanel');, а затем panelToDestory.destroy();, но сначала вам нужно добавить еще один элемент в область просмотра, который займет место текущей панели. А затем уничтожить текущую панель. Было бы намного проще, если бы вы могли просто использовать docs.sencha. com / touch / 2-0 / #! / guide / navigation_view в качестве родительского элемента как для списка, так и для панели даты.
 – 
SachinGutte
15 Мар 2013 в 16:16