Extjs - basics on file-system

Hope you created your first project with command prompt and knew some basics of where the application starts loading files and makes up the complete interface and functionalities. if not I recommend you to start from the initial step and come back here.

So when you start your project on a desktop it will check for the main file in the classic folder and shows it to the user.  classic > src > view > main > Main.js

Now let's start with this Main.js file and understand better about the project.

This main file basically has some extended components Ext.tab.Panel which extends the main page view to have a tab panel view in it.

requires has all the other components that are being used in this page as components.

Header of the side tab has all the properties such as layout that defines what should be the layout for the header which is aligned to stretchmax, and the title which is being binded which a data feild named name where the name is from universal viewmodel here ,

app > view > main > Mainmodel.js  and then the iconCls is the icon to be added along with the header and the icon name associated with it.

Next the responsiveConfig is where you specify the configurations for the responsive page where the headerposition changes when the width of the page is larger or smaller than the lenght of the page and then the position of the header is changes accordingly.

• Tall : defines the properties to change when the width is smaller than the height of the page and then you shift the header to the top of the page
• wide : defines all the properties to change when the width is larget than the height of the page and then you shift the header to the left of the page to occupy the page width.

Now, defaults are the page defaults for each of the component in the page and the page layout, the tabconfig here has some specific properties such as plugins to attach some other default properties to the component and modify all the components according to the plugin where here the icons and taxt alignment is changed when you make the page responsive.

items are all the components that are placed in the page, you can even have nested items if thats necessay for the items lets say if the page needs to be divided into some sections and then each of the sections has a different item then you can use a nested items, each and every item has a title associated with a value and some other properties that are used according to the page layout.

NOTE : All the page binding of the values could be a placed in the shared stores of the app as the same values are to be used with both the modern and classic templates of the application.

All the interface css components are placed in the sass > src > main > main.scss

 

if you want to add or update any component styles you can change it in the scss file, furthur if you want to change any theme for any of the classic or modern app you can change them in the app.json file.