extjs test

js-extjs-Test

Ext.define('DynamicPanel', {
    config:{
        parentContainer: 'help',
    },
    
    extend: 'Ext.panel.Panel',
    layout: 'hbox',
    items:[
        {
            xtype: 'textfield',
            width: '50%',
        },
        {
          xtype: 'button',
          text: 'Взять из поля и отразить в Label',
          width: '20%',
          handler: function(){
                var parent = this.ownerCt;
                parent.setToLabel();
            },
        },
        {
              xtype: 'label',
              width: '20%',
        },
        {
          xtype: 'button',
          text: 'Удалить',
          width: '10%',
          handler: function(){
                var parent = this.ownerCt;
                parent.parentContainer.remove(parent);
            },
        }
    ],
    
    setToLabel: function(){
         var valFromText = this.items.items[0].getValue();
         if (valFromText === ''){
             Ext.Msg.alert('Важно', 'Значение не может быть пусто');
         } else {
             this.items.items[2].setText(valFromText);
             console.log(valFromText);             
         }
    }
});

var basicPanel = Ext.create('Ext.panel.Panel', {
     title: 'Динамическое добавление других панелей',
    layout: 'border',
    tbar: [
    {
          xtype: 'button',
          text: 'Добавить горсть панелей',
          handler: function(){
                var pan = Ext.create('DynamicPanel');
                var container = basicPanel.items.items[0];
                pan.setParentContainer(container);
                container.add(pan);
            }
    },
    {
          xtype: 'button',
          text: 'Удалить все добавленные панели',
          handler: function(){
                var container = basicPanel.items.items[0];
                container.removeAll();
            }
    }
    ],
    items: [    
    Ext.create('Ext.panel.Panel', {
        name: 'Динамическое добавлние других панелей',
        region: 'center',
        items:[]
    })
    ]
});

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [basicPanel]
        });
    }
});