---
title: "Method to design grid view with docked buttons like create, load and save"
description: "In this section we have create user interface(UI).In UI we write the code of grid view that’s provide the facility to update and cancel,when we create"
author: "Allen Scott"
published: 2017-01-17
updated: 2018-03-17
canonical: https://www.mindstick.com/blog/11263/method-to-design-grid-view-with-docked-buttons-like-create-load-and-save
category: "sencha extjs"
tags: ["sencha"]
reading_time: 4 minutes
---
# Method to design grid view with docked buttons like create, load and save
In this [section](https://yourviews.mindstick.com/view/297/reservation-for-economically-weaker-section) we have create [user interface](https://www.mindstick.com/interview/22909/user-interface-objects-in-cocoa)(UI).In UI we write the [code](https://yourviews.mindstick.com/view/85458/alan-turing-the-mastermind-behind-cracking-the-enigma-code-during-world-war-ii) of [grid view](https://www.mindstick.com/articles/893/data-bound-with-grid-view-in-c-sharp-dot-net) that’s provide the facility to [update](https://www.mindstick.com/forum/265/ajax-update-panel) and [cancel](https://www.mindstick.com/forum/33810/remote-view-in-android-auto-cancel-custom-notification),when we create a new row in grid.\
\
**In view folder under your application folder**
\
```
Ext.define('app.view.StudentView',//Define
StudentView Class{ extend: 'Ext.grid.Panel',//Extend grid.Panel
class alias: 'widget.StudentView',//For derect
accessing in other files without giving path initComponent: function () { Ext.apply(this, {plugins: { //Used plugins for row editing in grid view ptype: 'rowediting', clicksToEdit: 2, pluginId: 'roweditingId', }, columns: [{ //Grid view fields(Column name) text: "Id", dataIndex: 'Id', hidden: false, width: 35 }, { text: "First
Name", flex: 1, dataIndex: 'firstName', editor: { allowBlank: false } }, { text: "Middle
Name", flex: 1, dataIndex: 'middleName', editor: { allowBlank: true } }, { text: "Last
Name", flex: 1, dataIndex: 'lastName', editor: { allowBlank: true } }, { text: "Birth
Date", flex: 1, dataIndex: 'birthDate', editor: //Use editor for dateField in grid view { xtype: 'datefield', format: 'd-m-Y', allowBlank: true }, }, { text: "City", flex: 1, dataIndex: 'city', editor: { allowBlank: true } }, { text: "State", flex: 1, dataIndex: 'state', editor: { allowBlank: true } }], dockedItems: [{ //Docked item in toolbar
xtype: 'toolbar', dock: 'bottom', ui: 'footer', layout: //Defined layout property { pack: 'center' //For alignment in center }, defaults: { minWidth: 80 }, items: [{ //Buttons in grid view text: 'Create', itemId: 'btnCreate' }, { text: 'Load Data', itemId: 'btnLoad' }, { text: 'Save', itemId: 'btnSave' }, { text: 'Delete', itemId: 'btnDelete' }] }] }); this.callParent(arguments); }});
```
## In model folder under your application folder
```
Ext.define('app.model.StudentModel', { //Define student model extend: 'Ext.data.Model', //Extend data.Model class idProperty: 'Id', fields: [ //Define property of fields that’s
can be used in UI { name: 'Id', type: 'int', defaultValue: 0 }, { name: 'firstName', type: 'string' }, { name: 'middleName', type: 'string' }, { name: 'lastName', type: 'string' }, { name: 'birthDate', type: 'date' }, { name: 'city', type: 'string' }, { name: 'state', type: 'string' } ], validations: [{ //validation for specific
field type: 'presence', field: 'firstName' }], proxy: { type: 'ajax', reader: { root: 'data', type: 'json' }, api: { read: './user/student', create: './user/createstudent', update: './user/updatestudent', destroy: './user/deletestudent' }, actionMethods: { destroy: 'POST', read: 'GET', create: 'POST', update: 'POST' } }});
```
## In controller folder under your application folder
```
Ext.define('app.controller.StudentController', //Define path of
controller and make {
object of class if its not present extend: 'Ext.app.Controller',//Extend Controller
class models: ['app.model.StudentModel'],//import model
with defining its path stores: ['app.store.StudentStore'],//import store
with defining its path views: ['app.view.StudentView'],//import view with
defining its path refs: [{ ref: 'StudentView', selector: 'viewport
StudentView' }], init: function () { Defined function that’s call on button click this.control({ 'viewport>StudentView
button[itemId=btnCreate]': { click: this.onCreateClick }, 'viewport>StudentView
button[itemId=btnLoad]': { click: this.onLoadClick }, 'viewport>StudentView
button[itemId=btnSave]': { click: this.onSaveClick }, 'viewport>StudentView
button[itemId=btnDelete]': { click: this.onDeleteClick } }); }, onCreateClick: function () { //define
function on create var studentView = this.getStudentView(); var studentStore = studentView.getStore(); var studentModel = Ext.create('app.model.StudentModel'); //studentModel.set("Id",""); studentModel.set("firstName", "First
name"); studentModel.set("middleName", "Middle
name"); studentModel.set("lastName", "Last
name"); studentModel.set("birthDate", " "); studentModel.set("city", "City"); studentModel.set("state", "State"); studentStore.add(studentModel); studentView.editingPlugin.startEdit(studentModel,
3); }, onSaveClick: function () {//define
function on Save var studentView = this.getView(); var studentStore = studentView.getStore(); studentStore.sync({ success: function (batch, eOpts) { Ext.Msg.alert('Status', 'Changes saved
successfully'); }, failure: function (batch, eOpts) { Ext.Msg.alert('Status', 'Request failed.'); } }); }, onLoadClick: function () { //define function on Load var studentStore = Ext.getStore('app.store.StudentStore'); studentStore.load(); }, onDeleteClick: function () { //define function on Delete var studentView = this.getStudentView(); var studentStore = studentView.getStore(); var selectedRows =
studentView.getSelectionModel().getSeletion(); if (selectedRows.length)
studentStore.remove(selectedRows); else Ext.Msg.alert('Status', 'please select at
least one record to delete!'); } });
```
***In store*** ***folder under your application folder***
```
Ext.define('app.store.StudentStore',//defined store
with its path { extend: 'Ext.data.Store',// Extend store
class model: 'app.model.StudentModel',//Import model for
giving its path autoLoad: false, storeId: 'StudentDataStore' });
```
***We can add a javascript page name as app.js and write code in this page***
```
Ext.application({ requires: ['Ext.container.Viewport'], controllers: ['StudentController'], name: 'app', launch: function () { //create launch function for call view(UI) Ext.create('Ext.container.Viewport', { layout: 'anchor', items: [{ xtype: 'StudentView' }] }); }});
```
***html page for import all important scripts including app.js***
```
```
---
Original Source: https://www.mindstick.com/blog/11263/method-to-design-grid-view-with-docked-buttons-like-create-load-and-save
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.