PDA

View Full Version : Changes to Classic ‘Sample Login App’ for ExtJS7 Modern



djbushby
18 Jul 2019, 5:47 AM
Changes to Classic ‘Sample Login App’ for ExtJS7 Modern
https://docs.sencha.com/extjs/7.0.0/guides/tutorials/login_app.html

Login.js
#####################################################################
‘Ext.window.Window’ à 'Ext.Panel' (https://docs.sencha.com/extjs/7.0.0/modern/Ext.Panel.html)
#####################################################################\
Basic Login.js, to be expanded upon later.

Ext.define('TutorialApp.view.login.Login', {
extend: 'Ext.Panel',
xtype: 'login',

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

controller: 'login',
bodyPadding: 10,
title: 'Login Panel'

});

#####################################################################
requires (https://docs.sencha.com/extjs/7.0.0/modern/Ext.Class.html#cfg-requires) information link
Ext.form.Panel (https://docs.sencha.com/extjs/7.0.0/modern/Ext.form.Panel.html) information link
#####################################################################
The controller (https://docs.sencha.com/extjs/7.0.0/modern/Ext.Panel.html#cfg-controller) config designates a ViewControlle (https://docs.sencha.com/extjs/7.0.0/modern/Ext.app.ViewController.html)r, which will then be attached to instances of the Login panel. This controller provides a place to include all logic relating to the Login panel or its child components. Here, we designate controller to be login, which will be our controller's alias.
#####################################################################
The bodyPadding (https://docs.sencha.com/extjs/7.0.0/modern/Ext.Panel.html#cfg-bodyPadding) config is purely aesthetic. This config applies "10px" of padding around the exterior of the panel's body content.
#####################################################################
title (https://docs.sencha.com/extjs/7.0.0/modern/Ext.Panel.html#cfg-title) information link
header (https://docs.sencha.com/extjs/7.0.0/modern/Ext.panel.Header.html) information link
#####################################################################
Autoshow
Edit app.js à mainView: 'TutorialApp.view.login.Login'
#####################################################################
textfield (https://docs.sencha.com/extjs/7.0.0/modern/Ext.field.Text.html) information link
displayfield (https://docs.sencha.com/extjs/7.0.0/modern/Ext.field.Display.html) information link
button (https://docs.sencha.com/extjs/7.0.0/modern/Ext.Button.html) information link
#####################################################################
Panel items
The first configuration we've added to the Login panel is the items (https://docs.sencha.com/extjs/7.0.0/modern/Ext.Panel.html#cfg-items) config. In containers (https://docs.sencha.com/extjs/7.0.0/modern/Ext.Container.html), like the Form panel and the Login panel itself, the items config may hold a Component (https://docs.sencha.com/extjs/7.0.0/modern/Ext.Component.html) or a Component configuration object. The items config may also be an array of Components or Component config objects. These Components will be displayed in the Container's body using the Container's layout (https://docs.sencha.com/extjs/7.0.0/modern/Ext.Container.html#cfg-layout).
#####################################################################
Every Component class has it's own xtype (https://docs.sencha.com/extjs/7.0.0/modern/Ext.Component.html#cfg-xtype). You can think of an xtype as a shortcut to easily create an instance of a Component. In this case, we have configured the Login panel with a child item with an xtype of "form" ("formpanel" being the xtype of the Ext.form.Panel (https://docs.sencha.com/extjs/7.0.0/modern/Ext.form.Panel.html) class). Form panels are special types of Panels that include convenient configuration options for working with input fields.
We can walk quickly through this array of components as they're pretty self explanatory. The first item has an xtype of [[ext: Ext.form.field.Text textfield]], a name (https://docs.sencha.com/extjs/7.0.0/modern/Ext.field.Text.html#cfg-name) of "username", a label (https://docs.sencha.com/extjs/7.0.0/modern/Ext.field.Text.html#cfg-label) of "username", and allowBlank (https://docs.sencha.com/extjs/7.0.0/modern/Ext.data.field.Field.html#cfg-allowBlank) of "false". This boils down to a textfield with a name value and a field label. The field cannot be left blank and pass validation (see "formBind" below).
displayField (https://docs.sencha.com/extjs/7.0.0/modern/Ext.field.Display.html)
buttons (https://docs.sencha.com/extjs/7.0.0/modern/Ext.form.Panel.html#cfg-buttons) array
Toolbar (https://docs.sencha.com/extjs/7.0.0/modern/Ext.Toolbar.html)
Button listeners (https://docs.sencha.com/extjs/7.0.0/modern/Ext.Button.html#cfg-listeners)


#####################################################################

Final Login.js

Ext.define('TutorialApp.view.login.Login', {
extend: 'Ext.Panel',
xtype: 'login',

requires: [
'Ext.field.Display',
'Ext.field.Text',
'Ext.form.Panel',
'TutorialApp.view.login.LoginController'
],

controller: 'login',
bodyPadding: 10,
title: 'Login Panel',

items: [{
xtype: 'formpanel',
reference: 'formpanel',
items: [{
xtype: 'textfield',
name: 'username',
label: 'Username',
allowBlank: false
}, {
xtype: 'textfield',
name: 'password',
inputType: 'password',
label: 'Password',
allowBlank: false
}, {
xtype: 'displayfield',
hideEmptyLabel: false,
value: 'Enter any non-blank password'
}],
buttons: [{
text: 'Login',
formBind: true,
handler:'onLoginClick'
}]
}]

});
#####################################################################




Final LoginController.js
(the viewport of app.js has ‘app-main’ added, then ‘login’ removed.)

Ext.define('TutorialApp.view.login.LoginController', {
extend: 'Ext.app.ViewController',
alias: 'controller.login',

requires: [
'Ext.app.Application',
'TutorialApp.view.main.Main'
],

onLoginClick: function() {

this.getView().up().insertFirst({ xtype: 'app-main'});
this.getView().up().removeAt(1,true);

}
});
#####################################################################

Final app.js
(mainView is not defined, a card layout viewport is initially defined with xtype = ‘login’)

Ext.application({
extend: 'TutorialApp.Application',

name: 'TutorialApp',

requires: [
// This will automatically load all classes in the TutorialApp namespace
// so that application classes do not need to require each other.
'TutorialApp.*'
],

// The name of the initial view to create.
//mainView: 'TutorialApp.view.main.Main'
//mainView: 'TutorialApp.view.login.Login'

viewport: {
layout: 'card'
},

launch: function() {
Ext.Viewport.add({
xtype: 'login',
});
}

});
#####################################################################

rakumar
8 Aug 2019, 11:10 AM
Hello,

Thank you for contacting Sencha Support!

I appreciate you bringing this to our notice.

Regards,
Kumar
Sencha Support.

djbushby
10 Sep 2019, 4:11 AM
I made a fiddle for Ext JS 7 Modern Material with login panel with button sending data to view controller then changing viewport to admin or user or guest.

https://fiddle.sencha.com/#view/editor&fiddle/2v7e

also
formBind: true,
is useless.

maybe other parts as well, as I didn't fully test it.