Creating a window in extjs

Question

I have this code:

Ext.define('innerWindow', {
   extend: 'Ext.window.Window',
   title: 'title',
   height: 200,
   width: 500, 
   modal: true
});

tb = Ext.getCmp('head-toolbar');
tb.add({
    text: 'Export',
    menu: Ext.create('Ext.menu.Menu', {
        items: [
            {
                text: 'Export',
                handler: function () {
                    var win = new innerWindow();
                    win.show();
                }
            }
        ]
    }) 
});

It creates a dropdown that has a value called 'export'. I have managed to make it so that, when I click the 'Export', I get a window. For now this window is empty. What I have been looking for, and unable to find, is how to create a window that has some text inside, and some options (dropdown box), and labels etc. More precisly, I want a window like the one I attached. I'm sure I can find examples on how to create this, but I just don't know what to search for. Searching on "Extjs window" and similar words, didnt bring me the help I'm looking for, nor looking at Senshas homepage (which normally has lots of brilliant examples).

Can someone help me out? Thanks

enter image description here

Lorenz Meyer · Accepted Answer · 2014-03-10 19:37:32Z

In your code change

var win = new innerWindow();

to

var win = Ext.create('innerWindow');

Then just define your window with the form inside:

Ext.define('innerWindow', {
   extend: 'Ext.window.Window',
   title: 'title',
   height: 200,
   width: 500, 
   modal: true,
   items: [{
       xtype: 'form',
       items: [{
           xtype: 'textfield',
           fieldLabel: 'Age',
           name: 'age'
       },{
           xtype: 'textfield',
           fieldLabel: 'Height',
           name: 'height'
       }],
       fbar: [{
           text: 'Submit',
           formBind: true,
           itemId: 'submit'
       }]
    }]
});

The documentation is here: form, textfield, combobox. Start reading the guides. You must read the docs to understand. ExtJs doc is well written.

martskins · Accepted Answer · 2014-03-10 19:31:21Z

Each ExtJS component has a property named items...

You should be adding the fields you want into the items property.

It would look something like this..

Ext.define('innerWindow', {
   extend: 'Ext.window.Window',
   title: 'title',
   height: 200,
   width: 500, 
   modal: true,
   items:[
       {
           xtype:"textfield",
           ......
       },{
           xtype:"combobox",
           store:myStore,
           .......
       }
   ]

});

You should check the docs of Window, it does have info about items, and it also does include examples.

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.window.Window

You should also include a layout for that window, for it to know how to arrange its items. Here's a link showing all types of layouts: http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html

Also, I'm not sure about the new innerWindow, I'd rather use Ext.create('innerWindow') to create a new instance of a component you've defined.

Actually, I think using new is fine. It actually gives a small performance boost too. I would definitely avoid defining a class and using it within the same file though if you are trying to learn ExtJS's proper MVC architecture.

Rogerio de Moraes · Accepted Answer · 2015-06-22 17:08:10Z

Set Extjs Script

<script type='text/javascript' src='http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js'></script>

Set Extjs CSS

<link href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css" rel="stylesheet"/>

Set Code

<script type='text/javascript'>
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
                title: 'Windows',
                closable: true,
                closeAction: 'hide',
                width: 350,
                minWidth: 250,
                height: 125,
                animCollapse:false,
                border: false,
                modal: true,
                layout: {
                    type: 'border',
                    padding: 5
                },
   items: [{
       xtype: 'form',
       items: [{
           xtype      : 'combo',
           fieldLabel : 'Age',
           width      : 320,
           store      : [ '18', '19', '20' ]
        },{
           xtype      : 'combo',
           fieldLabel : 'Height',
           width      : 320,
           store      : [ '1', '2', '3' ]
        },],
       fbar: [{
           text: 'Submit',
           formBind: true,
           itemId: 'submit'
       }]
    }]
            }).show();
}); 

</script>

Similar you want http://jsfiddle.net/ba3wnwpo/

Collectives™ on Stack Overflow

Creating a window in extjs

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related