How to Create a Responsive JavaScript Admin Dashboard Easily with Ext JS
A well-built admin dashboard can significantly increase the productivity of your business. With Sencha Ext JS, you can create responsive admin dashboards easily, allowing your company to discover valuable insights into your data at a glance. The benefits are clear, with a better understanding of your data, you can make more timely and informed business decisions. In this post, you will find all the details you need to get started on your admin dashboard. What is Sencha Ext JS? Sencha Ext JS is a very powerful JavaScript library. It excels in allowing you to quickly create feature-rich web applications. To help you do this, it includes over 140 UI components, including the D3 adapter, grids, and panels. More importantly, Sencha Ext JS supports cross-platform functionality so you can use it to build web apps for any modern device, like desktop PCs, laptops, and smartphones. How to Build a Responsive Admin Dashboard with Sencha Because it supports the MVC architecture, creating admin dashboards is pretty easy with Sencha Ext JS. Let’s explore the possibilities, starting with this example: To build the dashboard shown above, you have to follow these steps: Create the Model 1. Create a new directory, called the model. Go inside the folder. Then create the email directory. Inside the new folder, create an Email.js file and add these codes: Ext.define(‘Admin.model.email.Email’, { extend: ‘Admin.model.Base’, fields: [ { type: ‘int’, name: ‘id’ }, { name: ‘read’ }, { type: ‘string’, name: ‘title’ }, { name: ‘user_id’ }, { type: ‘string’, name: ‘contents’ }, { type: ‘string’, name: ‘from’ }, { name: ‘has_attachments’ }, { name: ‘attachments’ }, { name: ‘received_on’, type: ‘date’ }, { name: ‘favorite’ } ] }); Here, you are adding various fields, including id, title, and content. 2. Next, create a Friend.js file and add this code: Ext.define(‘Admin.model.email.Friend’, { extend: ‘Admin.model.Base’, fields: [ { type: ‘int’, name: ‘id’ }, { type: ‘string’, name: ‘name’ }, { type: ‘string’, name: ‘thumbnail’ }, { type: ‘boolean’, name: ‘online’ } ] }); 3. When you are done, go back to the model folder and create the faq directory. Inside the new folder, create your Category.js file and add the following: Ext.define(‘Admin.model.faq.Category’, { extend: ‘Admin.model.Base’, fields: [ { type: ‘string’, name: ‘name’ } ], hasMany: { name: ‘questions’, model: ‘faq.Question’ } }); 4. Create Question.js file and add these codes: Ext.define(‘Admin.model.faq.Question’, { extend: ‘Admin.model.Base’, fields: [ { type: ‘string’, name: ‘name’ } ] }); 5. After that, go back to the model folder. Then create the search directory. Inside the new folder, create your Attachment.js file and add this code: Ext.define(‘Admin.model.search.Attachment’, { extend: ‘Admin.model.Base’, fields: [ { type: ‘int’, name: ‘id’ }, { type: ‘string’, name: ‘url’ }, { type: ‘string’, name: ‘title’ } ] }); 6. Ok, now create your Result.js file and add this code: Ext.define(‘Admin.model.search.Result’, { extend: ‘Admin.model.Base’, fields: [ { type: ‘int’, name: ‘id’ }, { type: ‘string’, name: ‘title’ }, { type: ‘string’, name: ‘thumbnail’ }, { type: ‘string’, name: ‘url’ }, { type: ‘string’, name: ‘content’ } ], hasMany: { name: ‘attachments’, model: ‘search.Attachment’ } }); 7. We are almost there. Create your User.js file and add these lines: Ext.define(‘Admin.model.search.User’, { extend: ‘Admin.model.Base’, fields: [ { type: ‘int’, name: ‘identifier’ }, { type: ‘string’, name: ‘fullname’ […]
