Results 1 to 3 of 3

Thread: Changes to Classic ‘Sample Login App’ for ExtJS7 Modern

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2013
    Location
    Australia
    Posts
    308

    Default Changes to Classic ‘Sample Login App’ for ExtJS7 Modern

    Changes to Classic ‘Sample Login App’ for ExtJS7 Modern
    https://docs.sencha.com/extjs/7.0.0/...login_app.html

    Login.js
    #####################################################################
    ‘Ext.window.Window’ à 'Ext.Panel'
    #####################################################################\
    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 information link
    Ext.form.Panel information link
    #####################################################################
    The controller config designates a ViewController, 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 config is purely aesthetic. This config applies "10px" of padding around the exterior of the panel's body content.
    #####################################################################
    title information link
    header information link
    #####################################################################
    Autoshow
    Edit app.js à mainView: 'TutorialApp.view.login.Login'
    #####################################################################
    textfield information link
    displayfield information link
    button information link
    #####################################################################
    Panel items
    The first configuration we've added to the Login panel is the items config. In containers, like the Form panel and the Login panel itself, the items config may hold a Component 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.
    #####################################################################
    Every Component class has it's own 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 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 of "username", a label of "username", and 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
    buttons array
    Toolbar
    Button 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',
    });
    }

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

  2. #2
    Ext Support Team
    Join Date
    Jan 2018
    Posts
    569

    Default

    Hello,

    Thank you for contacting Sencha Support!

    I appreciate you bringing this to our notice.

    Regards,
    Kumar
    Sencha Support.

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2013
    Location
    Australia
    Posts
    308

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •