SISINDOTEK

I.T Solution | I.T Training | I.T Integration System

ExtJS 4 MVC open window or form panel using button click (view , controller)

Here’s the script to open form or window using button , i’m indonesian , so most of informations inside are using Bahasa

application file : app.js

/*
* File: app.js
*
* This file was generated by Sencha Architect version 2.1.0.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.1.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.1.x. For more
* details see license.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/

Ext.Loader.setConfig({
enabled: true
});

Ext.application({
stores: [
        'cdept'
    ],
views: [
        'MyPanel'
    ],
autoCreateViewport: true,
name: ‘belajar’,
controllers: [
        'form1',
        'win1'
    ]
});

View files : form1.js , win1.js

form1.js

/*
* File: app/view/form1.js
*
* This file was generated by Sencha Architect version 2.1.0.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.1.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.1.x. For more
* details see license.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/

Ext.define(‘belajar.view.form1’, {
extend: ‘Ext.form.Panel’,

height: 165,
id: ‘form1id’,
bodyPadding: 10,
title: ‘form 1’,

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
                {
                    xtype: 'button',
                    id: 'btnbuka',
                    text: 'Buka Panel 1'
                },
                {
                    xtype: 'textfield',
                    anchor: '100%',
                    id: 'haloid',
                    name: 'halo',
                    fieldLabel: 'Halo World'
                }
            ]
});

me.callParent(arguments);
}

});

win1.js

/*
* File: app/view/win1.js
*
* This file was generated by Sencha Architect version 2.1.0.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.1.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.1.x. For more
* details see license.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/

Ext.define(‘belajar.view.win1’, {
extend: ‘Ext.window.Window’,

height: 250,
id: ‘win1id’,
width: 600,
title: ‘My Window 1’,
modal: true,
y: 50,

initComponent: function() {
var me = this;

me.callParent(arguments);
}

});

Controller files : form1.js , win1.js

form1.js

/*
* File: app/controller/form1.js
*
* This file was generated by Sencha Architect version 2.1.0.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.1.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.1.x. For more
* details see license.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/

Ext.define(‘belajar.controller.form1’, {
extend: ‘Ext.app.Controller’,

views: [
        'form1'
    ],

onButtonClick: function(button, e, options) {
var cbuka = this.getController(‘belajar.controller.win1’);
//Ext selalu simpan dalam variabel

Ext.Msg.confirm("Buka Win Panel","Anda yakin ?",function(tombol){
if (tombol == "yes") {
return cbuka.buka(); //jalankan variabel dengan function
} else
Ext.Msg.alert("Batal","Batal buka window");
});

},

getHalo: function() {
var frm = this.getForm(‘form1id’);
var nilai = frm.findField("halo").getValue();

//
},

onLaunch: function() {

},

init: function(application) {
this.control({
"button[id=btnbuka]": {
click: this.onButtonClick
}
});
}

});

win1.js

/*
* File: app/controller/win1.js
*
* This file was generated by Sencha Architect version 2.1.0.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.1.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.1.x. For more
* details see license.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/

Ext.define(‘belajar.controller.win1’, {
extend: ‘Ext.app.Controller’,

views: [
        'win1'
    ],

buka: function() {
var cform = this.getController(‘belajar.controller.form1’);
var cwin = Ext.create(‘belajar.view.win1’, {
width:100,

//manipulasi properti,

});
cwin.show();

//function dibuat untuk menampilkan windows ‘gunakan create
//methode show()

/*

var cform = this.getController(‘belajar.controller.form1’);
var cwin = Ext.create(‘belajar.view.win1’, [{
        width:100 ,
        title:cform.getHalo(nilaifield) //manipulasi properti,

        }]);
cwin.show();

*/
},

onLaunch: function() {

}

});

Because there is no data connection in that sample, so i don’t have to make model files in it

Hopefully it can help u to understand how to start to use ExtJS 4 MVC

Regards,

Hery Purnama (IT Technical Trainer)

SISINDOTEK – IT Training & Solution Provider
Jl. Sukasenang VI-6B Bandung – Jawa Barat 40124
Tel. 022-71242266 , SMS. 0812.8733.1966
info , YM. sisindotek
www.sisindotek.com , facebook.com/sisindotek , twitter.com/sisindotek

Single Post Navigation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: