ExtJS 6: Building a Login System

Posted By Vitaliy | April 21, 2017 | ExtJS 6.2.1
0 91
This post is a demo for this tutorial

Js Code

Ext.define("App.view.login.Login", {
    extend: 'Ext.window.Window',
    xtype: 'login',
 
    requires: [
        'App.view.login.LoginController',
        'Ext.form.Panel'
    ],
 
    controller: 'login',
    bodyPadding: 10,
    title: 'Login Window',
    closable: false,
    autoShow: true,
 
    items: {
        xtype: 'form',
        reference: 'form',
        items: [{
            xtype: 'textfield',
            name: 'username',
            fieldLabel: 'Username',
            allowBlank: false
        }, {
            xtype: 'textfield',
            name: 'password',
            inputType: 'password',
            fieldLabel: 'Password',
            allowBlank: false
        }, {
            xtype: 'displayfield',
            hideEmptyLabel: false,
            value: 'Enter any non-blank password'
        }],
        buttons: [{
            text: 'Login',
            formBind: true,
            listeners: {
                click: 'onLoginClick'
            }
        }]
    }
});
            
Tags
ExtJS 6, MVC, MVVM

ExtJS 5: Building a Login System

Posted By Vitaliy | September 26, 2014 | ExtJS 5.0.0
1 8441
This post is a demo for this tutorial

Js Code

//app/view/login/Login.js
Ext.define("App.view.login.Login", {
    extend: 'Ext.window.Window',
    xtype: 'login',

    requires: [
        'App.view.login.LoginController',
        'Ext.form.Panel'
    ],

    controller: 'login',
    bodyPadding: 10,
    title: 'Login Window',
    closable: false,
    autoShow: true,

    items: {
        xtype: 'form',
        reference: 'form',
        items: [{
            xtype: 'textfield',
            name: 'username',
            fieldLabel: 'Username',
            allowBlank: false
        }, {
            xtype: 'textfield',
            name: 'password',
            inputType: 'password',
            fieldLabel: 'Password',
            allowBlank: false
        }, {
            xtype: 'displayfield',
            hideEmptyLabel: false,
            value: 'Enter any non-blank password'
        }],
        buttons: [{
            text: 'Login',
            formBind: true,
            listeners: {
                click: 'onLoginClick'
            }
        }]
    }
});
            

MVC Application: Add Custom Events

Posted By Vitaliy | June 26, 2012 | ExtJS 4.1.0
0 2957
Reply to thread

Js Code

Ext.define('App.controller.Main', {
	extend: 'Ext.app.Controller',
	stores: ['Users'],
	init: function () {
		this.log('controller init');

		//add event
		this.application.addEvents('UsersStoreLoaded');

		this.getUsersStore().on('load', function (store) {
			this.log('store on load');
			//fire event
			this.application.fireEvent('UsersStoreLoaded', store);
		}, this); // controller scope

		//handle event
		this.application.on('UsersStoreLoaded', function (store) {
			this.log('app on UsersStoreLoaded');
		});
	},
	log: function (msg) {
		this.application.log(msg);
	}
});
            

Listening RowEdit plugin in controller

Posted By Vitaliy | June 23, 2012 | ExtJS 4.1.0
0 2828
Reply to thread

Js Code

Ext.define('App.controller.Main', {
    extend: 'Ext.app.Controller',
    views: ['user.List'],
    stores: ['Users'],
    init: function () {
        this.control({
            'userlist': {
                render: function () { this.log('render'); },
                //plugin events
                beforeedit: function () { this.log('beforeedit'); },
                edit: function () { this.log('edit'); },
                validateedit: function () { this.log('validateedit'); }
            }
        });
    },
    log: function (msg) {
        Ext.get('log').createChild({
            tag: 'div',
            html: Ext.String.format('{0} {1}', Ext.Date.format(new Date(), 'g:i:s:ms'), msg)
        });
    }
});
            

ExtJS 4.1 Grid Infinite Scroll In MVC

Posted By Vitaliy | April 26, 2012 | ExtJS 4.1.0
0 3905
Reply to thread

Js Code

// /scripts/app/store/Users.js
Ext.define('AM.store.Users', {
	extend: 'Ext.data.Store',
	model: 'AM.model.User',
	autoLoad: true,
	remoteSort: true,
	buffered: true,
	pageSize: 100,
	proxy: {
		type: 'ajax',
		url: '/postdata/list',
		limitParam: 'size',
		reader: {
			type: 'json',
			root: 'data',
			successProperty: 'success'
		}
	}
});