Ext JS 4 CRUD example

Wednesday, June 4, 2014, 18:22
ExtJS
22,556 views

While writing my Spring-Hibernate Integration post I realize that we (as a java developer) have so many frameworks available which can make life easy by rapidly developing so many common things using frameworks. This ease of development is not available in java particularly when you considering UI development, we still have to struggle with old, bad looking jsp with combination of css, jquery.

Thanks god we now have so many javascript toolkit, framework which make developers life easy by offering so many ready-to-use widgets. ExtJS is the most advanced among those client side UI frameworks.

Today I am going to demonstrate you ‘How you can leverage ExtJS 4 to create CRUD application’. In the next post I will try to use the same JS code with Spring MVC as a backend.

Create a HTML page which include ExtJS library and aur books.js file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>ExtJS CRUD App</title>
  <link rel="stylesheet" type="text/css" 
    href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
  <script type="text/javascript" 
    src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script>
  <style>
  .book-add { background-image:url('images/book_add.png');}
  div#output {margin:100px;}
  </style>
  <script type="text/javascript" src="books.js"></script>
</head>
<body>
  <div id="output"></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>ExtJS CRUD App</title>

href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">

src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script>

<style>

.book-add { background-image:url('images/book_add.png');}

div#output {margin:100px;}

</style>

</head>

<body>

</body>

</html>

Here is the ExtJS CRUD code, I have combined it in a single file. You can follow the ExtJS 4 MVC folder structure.

Ext.onReady(function () {
  Ext.define('TechZoo.model.Book', {
    extend: 'Ext.data.Model',
    fields: [
      {name: 'title', type: 'string'},
      {name: 'author',  type: 'string'},
      {name: 'price', type: 'int'},
      {name: 'qty',  type: 'int'}
    ]
  });
 
  Ext.define('TechZoo.store.Books', {
    extend  : 'Ext.data.Store',
    model   : 'TechZoo.model.Book',
    fields  : ['title', 'author','price', 'qty'],
    data    : [
      { title: 'JDBC, Servlet and JSP', 
        author: 'Santosh Kumar', price: 300, qty : 12000 },
      { title: 'Head First Java', 
        author: 'Kathy Sierra', price: 550, qty : 2500 },
      { title: 'Java SCJP Certification', 
        author: 'Khalid Mughal', price: 650, qty : 5500 },
      { title: 'Spring and Hinernate', 
        author: 'Santosh Kumar', price: 350, qty : 2500 },
      { title: 'Mastering C++', 
        author: 'K. R. Venugopal', price: 400, qty : 1200 }
    ]
  });
 
  Ext.define('TechZoo.view.BooksList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.bookslist',
    title: 'Books List - (ExtJS 4 CRUD example - @ Tousif Khan)',
    store: 'Books',
    initComponent: function () {
      this.tbar = [{
        text    : 'Add Book',
        action  : 'add',
        iconCls : 'book-add'
      }];
      this.columns = [
        { header: 'Title', dataIndex: 'title', flex: 1 },
        { header: 'Author', dataIndex: 'author' },
        { header: 'Price', dataIndex: 'price' , width: 60 },
        { header: 'Quantity', dataIndex: 'qty', width: 80 },
        { header: 'Action', width: 50,
          renderer: function (v, m, r) {
            var id = Ext.id();
            var max = 15;
            Ext.defer(function () {
              Ext.widget('image', {
                renderTo: id,
                name: 'delete',
                src : 'images/book_delete.png',
                listeners : {
                  afterrender: function (me) { 
                    me.getEl().on('click', function() {
                      var grid = Ext.ComponentQuery.query('bookslist')[0];
                      if (grid) {
                        var sm = grid.getSelectionModel();
                        var rs = sm.getSelection();
                        if (!rs.length) {
                          Ext.Msg.alert('Info', 'No Book Selected');
                          return;
                        }
                        Ext.Msg.confirm('Remove Book', 
                          'Are you sure you want to delete?', 
                          function (button) {
                            if (button == 'yes') {
                              grid.store.remove(rs[0]);
                            }
                        });
                      }
                    });
                  }
                }
              });
            }, 50);
            return Ext.String.format('<div id="{0}"></div>', id);
          }
        }
      ];
      this.callParent(arguments);
    }
  });
 
    Ext.define('TechZoo.view.BooksForm', {
      extend  : 'Ext.window.Window',
      alias   : 'widget.booksform',
      title   : 'Add Book',
      width   : 350,
      layout  : 'fit',
      resizable: false,
      closeAction: 'hide',
      modal   : true,
      config  : {
        recordIndex : 0,
        action : ''
      },
      items   : [{
        xtype : 'form',
        layout: 'anchor',
        bodyStyle: {
          background: 'none',
          padding: '10px',
          border: '0'
        },
        defaults: {
          xtype : 'textfield',
          anchor: '100%'
        },
        items : [{
          name  : 'title',
          fieldLabel: 'Book Title'
        },{
          name: 'author',
          fieldLabel: 'Author Name'
        },{
          name: 'price',
          fieldLabel: 'Price'
        },{
          name: 'qty',
          fieldLabel: 'Quantity'
        }]
      }],
      buttons: [{
        text: 'OK',
        action: 'add'
      },{
        text    : 'Reset',
        handler : function () { 
          this.up('window').down('form').getForm().reset(); 
        }
      },{
        text   : 'Cancel',
        handler: function () { 
          this.up('window').close();
        }
      }]
    });
 
  Ext.define('TechZoo.controller.Books', {
    extend  : 'Ext.app.Controller',
    stores  : ['Books'],
    views   : ['BooksList', 'BooksForm'],
    refs    : [{
      ref   : 'formWindow',
      xtype : 'booksform',
      selector: 'booksform',
      autoCreate: true
    }],
    init: function () {
      this.control({
        'bookslist > toolbar > button[action=add]': {
          click: this.showAddForm
        },
        'bookslist': {
          itemdblclick: this.onRowdblclick
        },
        'booksform button[action=add]': {
          click: this.doAddBook
        }
      });
    },
    onRowdblclick: function(me, record, item, index) {
      var win = this.getFormWindow();
      win.setTitle('Edit Book');
      win.setAction('edit');
      win.setRecordIndex(index);
      win.down('form').getForm().setValues(record.getData());
      win.show();
    },
    showAddForm: function () {
      var win = this.getFormWindow();
      win.setTitle('Add Book');
      win.setAction('add');
      win.down('form').getForm().reset();
      win.show();
    },
    doAddBook: function () {
      var win = this.getFormWindow();
      var store = this.getBooksStore();
      var values = win.down('form').getValues();
      
      var action = win.getAction();
      var book = Ext.create('TechZoo.model.Book', values);
      if(action == 'edit') {
        store.removeAt(win.getRecordIndex());
        store.insert(win.getRecordIndex(), book);  
      }
      else {
        store.add(book);
      }
      win.close();
    }
  });
 
  Ext.application({
    name  : 'TechZoo',
    controllers: ['Books'],
      launch: function () {
        Ext.widget('bookslist', {
          width : 500,
          height: 300,
          renderTo: 'output'
        });
      }
    }
  );
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

Ext.onReady(function () {

Ext.define('TechZoo.model.Book', {

extend: 'Ext.data.Model',

fields: [

{name: 'title', type: 'string'},

{name: 'author', type: 'string'},

{name: 'price', type: 'int'},

{name: 'qty', type: 'int'}

]

});

Ext.define('TechZoo.store.Books', {

extend : 'Ext.data.Store',

model : 'TechZoo.model.Book',

fields : ['title', 'author','price', 'qty'],

data : [

{ title: 'JDBC, Servlet and JSP',

author: 'Santosh Kumar', price: 300, qty : 12000 },

{ title: 'Head First Java',

author: 'Kathy Sierra', price: 550, qty : 2500 },

{ title: 'Java SCJP Certification',

author: 'Khalid Mughal', price: 650, qty : 5500 },

{ title: 'Spring and Hinernate',

author: 'Santosh Kumar', price: 350, qty : 2500 },

{ title: 'Mastering C++',

author: 'K. R. Venugopal', price: 400, qty : 1200 }

]

});

Ext.define('TechZoo.view.BooksList', {

extend: 'Ext.grid.Panel',

alias: 'widget.bookslist',

title: 'Books List - (ExtJS 4 CRUD example - @ Tousif Khan)',

store: 'Books',

initComponent: function () {

this.tbar = [{

text : 'Add Book',

action : 'add',

iconCls : 'book-add'

}];

this.columns = [

{ header: 'Title', dataIndex: 'title', flex: 1 },

{ header: 'Author', dataIndex: 'author' },

{ header: 'Price', dataIndex: 'price' , width: 60 },

{ header: 'Quantity', dataIndex: 'qty', width: 80 },

{ header: 'Action', width: 50,

renderer: function (v, m, r) {

var id = Ext.id();

var max = 15;

Ext.defer(function () {

Ext.widget('image', {

renderTo: id,

src : 'images/book_delete.png',

listeners : {

afterrender: function (me) {

me.getEl().on('click', function() {

var grid = Ext.ComponentQuery.query('bookslist')[0];

if (grid) {

var sm = grid.getSelectionModel();

var rs = sm.getSelection();

if (!rs.length) {

Ext.Msg.alert('Info', 'No Book Selected');

return;

}

Ext.Msg.confirm('Remove Book',

'Are you sure you want to delete?',

function (button) {

if (button == 'yes') {

grid.store.remove(rs[0]);

}

});

}

});

}

});

}, 50);

return Ext.String.format('<div id="{0}"></div>', id);

}

];

this.callParent(arguments);

}

});

Ext.define('TechZoo.view.BooksForm', {

extend : 'Ext.window.Window',

alias : 'widget.booksform',

title : 'Add Book',

width : 350,

layout : 'fit',

resizable: false,

closeAction: 'hide',

modal : true,

config : {

recordIndex : 0,

action : ''

items : [{

xtype : 'form',

bodyStyle: {

background: 'none',

padding: '10px',

border: '0'

defaults: {

xtype : 'textfield',

anchor: '100%'

items : [{

name : 'title',

fieldLabel: 'Book Title'

},{

fieldLabel: 'Author Name'

},{

fieldLabel: 'Price'

},{

fieldLabel: 'Quantity'

}]

}],

buttons: [{

text: 'OK',

action: 'add'

},{

text : 'Reset',

handler : function () {

this.up('window').down('form').getForm().reset();

}

},{

text : 'Cancel',

handler: function () {

this.up('window').close();

}

}]

});

Ext.define('TechZoo.controller.Books', {

extend : 'Ext.app.Controller',

stores : ['Books'],

views : ['BooksList', 'BooksForm'],

refs : [{

ref : 'formWindow',

xtype : 'booksform',

selector: 'booksform',

autoCreate: true

}],

init: function () {

this.control({

'bookslist > toolbar > button[action=add]': {

click: this.showAddForm

'bookslist': {

itemdblclick: this.onRowdblclick

'booksform button[action=add]': {

click: this.doAddBook

}

});

onRowdblclick: function(me, record, item, index) {

var win = this.getFormWindow();

win.setTitle('Edit Book');

win.setAction('edit');

win.setRecordIndex(index);

win.down('form').getForm().setValues(record.getData());

win.show();

showAddForm: function () {

var win = this.getFormWindow();

win.setTitle('Add Book');

win.setAction('add');

win.down('form').getForm().reset();

win.show();

doAddBook: function () {

var win = this.getFormWindow();

var store = this.getBooksStore();

var values = win.down('form').getValues();

var action = win.getAction();

var book = Ext.create('TechZoo.model.Book', values);

if(action == 'edit') {

store.removeAt(win.getRecordIndex());

store.insert(win.getRecordIndex(), book);

}

else {

store.add(book);

}

win.close();

}

});

Ext.application({

name : 'TechZoo',

controllers: ['Books'],

launch: function () {

Ext.widget('bookslist', {

width : 500,

height: 300,

renderTo: 'output'

});

}

);

});

Output:

Open the HTML file in any browser, the Output will look similar to below. You can click to add new Book record in GRID.

Double click to any of the GRID row to edit the record.

View Live Demo

Download Ext JS CRUD code

Tags: extjs crud api, extjs crud example, extjs crud grid, extjs store api crud

About the Author

Tousif Khan has written 69 posts.

I Love Coding, Analyzing, Designing and doing it the right way. I am obsessed about learn anything new daily and sharing what I have learn each Day. This Blog is journey of my Zeal, going through step by step to the mountain of desire to become prefect. Google Wanna Hire me ?

Ext JS 4 CRUD example

About the Author

Recent Posts

Categories

Site Categories

Site Pages