5 Examples Of Successful ExtJS Tutorials For Beginners
User interface (UI) is a critical component of a web application and having an attractive UI promotes a positive user experience. Several Javascript frameworks allow web developers to build stunning UI with advanced functionalities. ExtJS or Extended JavaScript is a comprehensive JavaScript framework developed by Sencha to develop data-intensive and cross-platform web and mobile applications using JavaScript. Currently, Ext Js provides more than 140+ UI components such as calendars, grids, trees, lists, forms, menus, toolbars, panels, windows, and hundreds of different extensions. So are you aiming to build high-performing web and mobile UIs using ExtJS? Then go through the following five examples of a successful Ext js tutorial for beginners. How to build an Ext Js application using a modern toolkit? The first step in creating an Ext JS application is generating an application using Sencha’s open tooling. You will use Sencha ext-gen as the application generator and ext-build as the build tool based on Sencha cmd. To use those sencha tools, you need to request them from the Sencha website. Go to ExtJS and click on start free trial. You can fill out the form and get the npm package as a zip download to your email account or directly install it using public npm. Using the free trial version, you can install the Ext Js using the following command from your command-line tool. npm install -g @sencha/ext-gen If you are a registered customer, you can find all the related packages in Sencha’s private npm registry. You need to log in to access the registry using the below command. It will download the npm packages from the private npm registry. npm login –registry=https://npm.sencha.com/ [email protected] npm install -g @sencha/ext-gen After login, you can type in the following command to generate the new application. ext-gen app -a Then Your project is generated successfully. Now you can go to the project folder by typing the following command. cd ./modern-app Finally, you can execute your project using the following command, which will open your application in a web browser. npm start After executing these steps, you have been successfully generated your first Ext Js application. How to build a basic layout for your application? Ext Js uses Model View Controller (MVC) and Model–View–ViewModel (MVVM) design pattern for its generated project structure. The video tutorial discusses the basic structure of an Ext JS application, application build profiles, class system, and MVVM pattern. The main sources code of your application resides in the ‘app’ folder, and the build folder contains build-related code such as testing and production build. The app folder consists of the profiles related to phone, desktop, and shared. The shared folder contains the code shared between the desktop and the phone. Each app folder source code is organized into model and view folders. View folder contains the application’s main view, and there can be different view containers based on your application. Next, you can find the View model of each main view.js file definition. The view models of each child view file are also located in the main view file. Your ext Js application also contains an Application.js file, and its instance will be included in the app.js file. Sencha will automatically create the contents of the Application.js file. How can you use Ext Js Data Package? Ext Js data package consists […]
