JavaScript
Run Code
Open in Fiddle
Ext.create({ xtype: 'panel', id: 'mainpanel', title: 'Panel Title', iconCls: 'x-fa fa-html5', height: 400, width: 400, bodyPadding: 12, html: 'Sample HTML text', renderTo: Ext.getBody(), items: [{ xtype: 'button', text: 'open dialog', handler: function () { console.log('open dialog'); Ext.create('Ext.Dialog', { title: 'New Dialog', width: '300', height: '300', floated: true, relative: true, x: 25, y: 25, focusable: true, tabIndex: 0, bodyPadding: '10 10 10 10', modal: true, listeners: { focusleave: function (cmp, e, eOpts) { cmp.close(); } }, items: [{ xtype: 'textfield', label: 'Text 1' }, { xtype: 'textfield', label: 'Text 2' }, { xtype: 'button', text: 'Button' }] }).show(); } }] });