ExtJs Grid: "Remove Selected Record" Toolbar Button
Ext.onReady(function () {
Ext.define('Ext.ux.DeleteButton', {
extend: 'Ext.button.Button',
alias: 'widget.delbutton',
text: 'Remove Selected Record',
handler: function () {
var grid = this.up('grid');
if (grid) {
var sm = grid.getSelectionModel();
var rs = sm.getSelection();
if (!rs.length) {
Ext.Msg.alert('Info', 'No Records Selected');
return;
}
Ext.Msg.confirm('Remove Record', 'Are you sure?', function (button) {
if (button == 'yes') {
grid.store.remove(rs[0]);
}
});
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
width: 500,
tbar: [{ xtype: 'delbutton'}],
store: {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
{ 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
{ 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" }
]
},
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
renderTo: 'output'
});
});
How To Make Every Grid Able To Create It's Own Store Instance? - Part 2
Ext.onReady(function () {
Ext.define('App.MyStore', {
extend: 'Ext.data.Store',
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
{ 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
{ 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" }
]
});
Ext.define('App.MyForm', {
extend: 'Ext.window.Window',
alias: 'widget.myform',
title: 'Simpsons',
width: 500,
layout: 'fit',
initComponent: function () {
var store = Ext.create('App.MyStore');
this.items = [{
xtype: 'grid',
store: store,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
]
}];
this.callParent(arguments);
}
});
Ext.widget('button', {
text: 'First Test Grid',
renderTo: 'output',
handler: function () {
Ext.widget('myform', {
title: 'First Test Grid',
border: false,
autoShow: true
});
}
});
Ext.widget('button', {
text: 'Second Test Grid',
renderTo: 'output',
handler: function () {
Ext.widget('myform', {
title: 'Second Test Grid',
border: false,
autoShow: true
});
}
});
});
How To Make Every Grid Able To Create It's Own Store Instance?
?
Ext.onReady(function () {
Ext.define('App.MyStore', {
extend: 'Ext.data.Store',
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
{ 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
{ 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" }
]
});
Ext.define('App.MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygrid',
title: 'Simpsons',
width: 500,
initComponent: function () {
this.store = Ext.create('App.MyStore');
this.callParent(arguments);
},
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
]
});
Ext.widget('mygrid', {
title: 'First Test Grid',
renderTo: 'output'
});
Ext.widget('mygrid', {
title: 'Second Test Grid',
margin: '5 0 0 0',
renderTo: 'output'
});
});
Hide/Show Grid Column Lines
Ext.onReady(function() {
Ext.create('Ext.grid.Panel', {
title:'Simpsons',
width: 500,
tbar: [
{
text:'Show Column Lines',
handler:function() {
this.up('grid').setColumnLines(true);
}
},
{
text:'Hide Column Lines',
handler:function() {
this.up('grid').setColumnLines(false);
}
}
],
store: {
fields: ['name','email','phone'],
data: [
{'name':'Lisa',"email":"lisa@simpsons.com","phone":"555-111-1224"},
{'name':'Bart',"email":"bart@simpsons.com","phone":"555-222-1234"},
{'name':'Homer',"email":"home@simpsons.com","phone":"555-222-1244"}
]
},
columns: [
{ header: 'Name', dataIndex: 'name'},
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone'}
],
renderTo:'output'
});
});
Hide/Show Grid's Body
Ext.onReady(function () {
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
width: 500,
bodyStyle: 'visibility: hidden;',
tbar: [
{
text: 'Show Body',
handler: function () {
this.up('grid').body.show();
}
},
{
text: 'Hide Body',
handler: function () {
this.up('grid').body.hide();
}
}
],
store: {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
{ 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
{ 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" }
]
},
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
renderTo: 'output'
});
});
ExtJS 4 Readonly Checkbox Column
?
.x-grid-checkheader
{
background:url('/Content/images/icons/unchecked.gif')no-repeatcenter center;
}
.x-grid-checkheader-checked
{
background:url('/Content/images/icons/checked.gif')no-repeat center center;
}
Ext.Loader.setConfig({
enabled:true,
paths: {
'Ext.ux':'/Scripts/ext/ext-4.0.7-gpl/ux'
}
});
Ext.require(['Ext.ux.CheckColumn']);
Ext.onReady(function() {
Ext.define('User', {
extend:'Ext.data.Model',
fields: [
{ name: 'id', type: 'int'},
{ name: 'name', type: 'string'},
{ name: 'active', type: 'boolean'}
]
});
Ext.create('Ext.grid.Panel', {
title:'Users',
width: 400,
store: Ext.create('Ext.data.Store', {
model:'User',
data: [
{ id: 1, name: 'name 1', active: false},
{ id: 2, name: 'name 2', active: true},
{ id: 3, name: 'name 3', active: true}
]
}),
columns: [
{ header: 'id', dataIndex: 'id'},
{ header: 'name', dataIndex: 'name', flex: 1 },
{ header: 'active', dataIndex: 'active', xtype: 'checkcolumn', processEvent: function() { returnfalse; } }
],
renderTo:'output'
});
});
Filter Window For Grid
Ext.onReady(function() {
Ext.define('App.store.Books', {
extend:'Ext.data.Store',
fields: ['id','title','author'],
data: [
{ id: 1, title: 'Learning Ext JS', author: 'Shea Frederick' },
{ id: 2, title: 'Ext JS Projects with Gears', author: 'Frank Zammetti' },
{ id: 3, title: 'Ext JS in Action', author: 'Jesus D. Garcia' },
{ id: 4, title: 'Java Precisely', author: 'Peter Sestoft' },
{ id: 5, title: 'Mastering C++', author: 'K. R. Venugopal' }
]
});
Ext.define('App.view.BooksList', {
extend:'Ext.grid.Panel',
alias:'widget.bookslist',
title:'Books List',
store:'Books',
initComponent:function() {
this.tbar = [
{
text:'Filter',
action:'filter',
iconCls:'filter-add'
}
];
this.columns = [
{ header: 'Id', dataIndex: 'id', width: 50 },
{ header: 'Title', dataIndex: 'title', flex: 1 },
{ header: 'Author', dataIndex: 'author'}
];
this.callParent(arguments);
}
});
Ext.define('App.view.BooksFilter', {
extend:'Ext.window.Window',
alias:'widget.booksfilter',
title:'Books Filter',
width: 350,
layout:'fit',
resizable:false,
closeAction:'hide',
modal:true,
items: [
{
xtype:'form',
layout:'anchor',
bodyStyle: {
background:'none',
padding:'10px',
border:'0'
},
defaults: {
xtype:'textfield',
anchor:'100%'
},
items: [
{
name:'title',
fieldLabel:'Title'
},
{
name:'author',
fieldLabel:'Author'
}
]
}
],
buttons: [
{
text:'OK',
action:'filter'
},
{
text:'Reset',
handler:function() { this.up('window').down('form').getForm().reset(); }
},
{
text:'Cancel',
handler:function() { this.up('window').close(); }
}
]
});
Ext.define('App.controller.Books', {
extend:'Ext.app.Controller',
stores: ['Books'],
views: ['BooksList','BooksFilter'],
refs: [
{
ref:'filterWindow',
xtype:'booksfilter',
selector:'booksfilter',
autoCreate:true
}
],
init:function() {
this.control({
'bookslist > toolbar > button[action=filter]': {
click:this.onFilter
},
'booksfilter button[action=filter]': {
click:this.doFilter
}
});
},
onFilter:function() {
varwin = this.getFilterWindow();
win.show();
},
doFilter:function() {
varwin = this.getFilterWindow();
varstore = this.getBooksStore();
varvalues = win.down('form').getValues();
varfilters = [];
for(varp invalues) {
varvalue = values[p];
if(value) {
filters.push({ property: p, value: value });
}
}
win.close();
if(filters.length) {
store.clearFilter(true);
store.filter(filters);
}else{
store.clearFilter();
}
}
});
Ext.application({
name:'App',
controllers: ['Books'],
launch:function() {
Ext.widget('bookslist', {
width: 400,
renderTo:'output'
});
}
});
});
.filter-add
{
background-image:url('/content/images/icons/filter-add.png');
}
?
Progress Bar Inside A Grid Cell
Ext.onReady(function() {
Ext.create('Ext.grid.Panel', {
title:'Simpsons',
width: 500,
height: 200,
store: Ext.create('Ext.data.Store', {
fields: ['name','email','phone','progress'],
data: [
{'name':'Lisa',"email":"lisa@simpsons.com","phone":"555-111-1224",'progress': 25 },
{'name':'Bart',"email":"bart@simpsons.com","phone":"555-222-1234",'progress': 50 },
{'name':'Homer',"email":"home@simpsons.com","phone":"555-222-1244",'progress': 75 },
{'name':'Marge',"email":"marge@simpsons.com","phone":"555-222-1254",'progress': 100 }
]
}),
columns: [
{ header: 'Name', dataIndex: 'name'},
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone'},
{
header:'Progress',
dataIndex:'progress',
width: 110,
renderer:function(v, m, r) {
varid = Ext.id();
Ext.defer(function() {
Ext.widget('progressbar', {
renderTo: id,
value: v / 100,
width: 100
});
}, 50);
returnExt.String.format('<div id="{0}"></div>', id);
}
}
],
renderTo:'output'
});
});
How To Change A Column Template On The Rendered Grid Column?
Js Code
Ext.onReady(function() {
Ext.define('Ext.grid.column.UpdatableTemplate', {
extend:'Ext.grid.column.Column',
alias:'widget.updatabletemplatecolumn',
requires: ['Ext.XTemplate'],
constructor:function(cfg) {
varme = this;
me.callParent(arguments);
me.tpl = (!Ext.isPrimitive(me.tpl) && me.tpl.compile) ? me.tpl : Ext.create('Ext.XTemplate', me.tpl);
me.renderer = function(value, p, record) {
vardata = Ext.apply({}, record.data, record.getAssociatedData());
returnme.tpl.apply(data);
};
},
setTemplate:function(tpl) {
this.tpl = Ext.create('Ext.XTemplate', tpl);
}
});
Ext.create('Ext.grid.Panel', {
title:'Simpsons',
width: 500,
height: 200,
store: {
fields: ['name','email','phone'],
data: [
{'name':'Lisa',"email":"lisa@simpsons.com","phone":"555-111-1224"},
{'name':'Bart',"email":"bart@simpsons.com","phone":"555-222-1234"},
{'name':'Homer',"email":"home@simpsons.com","phone":"555-222-1244"},
{'name':'Marge',"email":"marge@simpsons.com","phone":"555-222-1254"}
]
},
tbar: [
{
text:'First Template',
handler:function() {
this.up('grid').changeTemplate('name','<b>{name}</b> ({email})');
}
},
{
text:'Second Template',
handler:function() {
this.up('grid').changeTemplate('name','<b>{name}</b> ({phone})');
}
}
],
columns: [
{ header: 'Name', dataIndex: 'name', xtype: 'updatabletemplatecolumn', tpl: '{name}', flex: 1 }
],
changeTemplate:function(column, tpl) {
Ext.Array.each(this.columns,function(item) {
if(item.dataIndex == column) {
item.setTemplate(tpl);
returnfalse;
}
});
this.getView().refresh();
},
renderTo:'output'
});
});
How Add Dynamic Button In Grid Panel Column Using Renderer?
?
Js Code
Ext.onReady(function() {
Ext.create('Ext.grid.Panel', {
title:'Simpsons',
width: 500,
height: 200,
store: Ext.create('Ext.data.Store', {
fields: ['name','email','phone'],
data: [
{'name':'Lisa',"email":"lisa@simpsons.com","phone":"555-111-1224"},
{'name':'Bart',"email":"bart@simpsons.com","phone":"555-222-1234"},
{'name':'Homer',"email":"home@simpsons.com","phone":"555-222-1244"},
{'name':'Marge',"email":"marge@simpsons.com","phone":"555-222-1254"}
]
}),
columns: [
{ header: 'Name', dataIndex: 'name'},
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone'},
{
header:'Buttons',
renderer:function(v, m, r) {
varid = Ext.id();
Ext.defer(function() {
Ext.widget('button', {
renderTo: id,
text:'Edit: ' + r.get('name'),
width: 75,
handler:function() { Ext.Msg.alert('Info', r.get('name')) }
});
}, 50);
returnExt.String.format('<div id="{0}"></div>', id);
}
}
],
renderTo:'output'
});
});
?