CODEWITHSUNDEEP
extjs
Silencer310
Silencer310

Reputation: 1100

ExtJS Admin Dashboard Example from the docs

I am trying to understand how things connect in the Admin Dashboard example, the register page here: http://examples.sencha.com/extjs/6.5.0/examples/admin-dashboard/?classic#register

FYI, I have read the entire docs on the quick start and the guide (which includes almost everything), and yet I find few things that I cannot connect. Maybe the docs need improvement or maybe I'm just dumb. I'll find out if its the latter.

This is the entire source code for the application: https://github.com/bjornharrtell/extjs/tree/master/templates/admin-dashboard. I am working with the classic version.

Now for the register page, the main view is this: https://github.com/bjornharrtell/extjs/blob/master/templates/admin-dashboard/classic/src/view/authentication/Register.js

My questions are:

  1. At line 25: cls: 'auth-dialog-register'. Which means an extra css class is being added to the component. Now I searched the scss files and did not find the style definitions for this class anywhere. Since this component is the 'authdialog', I looked at this file in particular: https://github.com/bjornharrtell/extjs/blob/master/templates/admin-dashboard/classic/sass/src/view/authentication/Dialog.scss, but I cannot find 'auth-dialog-register' anywhere. Where is that class defined? Or is it not being used(in that case, bummer)

  2. Similarly at lines: Line 42, Line 57 also, there is a class 'auth-textbox' being attached to text boxes, but I cannot find where its styles are defined.

  3. Moving on, on line 49, for the textfield, a 'triggers' config is defined. In the docs it is here: http://docs.sencha.com/extjs/6.5.1/classic/Ext.form.field.Text.html#cfg-triggers , It really doesn't explain anything, just a bunch of code. Also on the next line in the Register.js file, on line 50, it has a 'glyphed' config inside triggers. Again, I cannot find out in the docs what it is used for. Sure the idea is clear, that it is used for a textbox trigger, but I need to be sure I know what is happening.

  4. My next question is probably connected with the previous one. If you look at the example page: http://examples.sencha.com/extjs/6.5.0/examples/admin-dashboard/?classic#register, you see that all text boxes have an icon saying what the field is for: Email field has an email icon. How did that come? I'm pretty sure it had to do with the triggers config in my previous question. According to the documentation https://docs.sencha.com/extjs/6.0.2/guides/core_concepts/font_ext.html, I should use a 'iconCls' config, but here that is not used.

Please someone explain this. Is it reasonable to have these questions? Or should I have been able to figure them out? I am new to ExtJS and have just started learning it from 2 weeks.

Upvotes: 0

Views: 2619

Answers (1)

Evan Trimboli
Evan Trimboli

Reputation: 30092

1/2) Seems they are unused classes. I'll open a ticket to remove them.

3) The triggers are button like things that can be appended to the field. As it says in the docs, they are a set of configurations for Ext.form.trigger.Trigger, the options for those can be found here: http://docs.sencha.com/extjs/6.5.1/classic/Ext.form.trigger.Trigger.html

glyphed is not a config, but rather a "label" for that trigger in the field.

4) That is some custom css, applied by the classes used in the trigger.

.password-trigger,
.auth-email-trigger,
.auth-password-trigger,
.auth-envelope-trigger {
    &:before{
        top: 10px;
        left: -18px;
        position: relative;
        color: $dialog-trigger-color;
        font-size: 30px;
    }

    &.password-trigger:before,
    &.auth-password-trigger:before {
        content: "\f023";
    }

    &.auth-email-trigger:before {
        content: "\f007";
    }

    &.auth-envelope-trigger:before {
        content: "\f0e0";
    }
}

Upvotes: 1

Related Questions