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'
});
});
相关推荐
extjs动态表格例子
Extjs 表格增删改例子 附加js表格例子
EXTjs4.0以下合并表格的例子，想要的来学习一下
extjs表格布局小例子，涉及到数据的存储，如何删除数据和添加数据
NULL 博文链接：https://aa00aa00.iteye.com/blog/564647
一款基于EXTJS插件风格的表格合并示例，界面不用说了，使用EXT本身的界面风格，很漂亮，EXT功能很强大，这个表格合并功能只是其中一个比较实用的功能，这个例子带给大家，希望通过这个例子你会对EXT有更多的了解。
最新Ext版本、最新Struts2版本 ...extjs-4.1.0有红叉，请为ext-all.js添加Exclude From Validation struts2的类库已在WEB-INF/lib下 解压缩后的文件夹导入myeclipse即可 myeclipse9.0下自带的tomcat6.0测试可用
ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。 功能丰富，无人能出其右。 无论是界面之美，还是功能之强，ext的表格控件都高居榜首。 单选行，多选行，高亮显示选中的行，...
extjs非常好的几个例子，包括登陆，动态编辑表格等等
extjs 可编辑的表格树，每个单元格自定义编辑组件，可以自适应列宽，只有源码与例子，运行实例要修改路径，不然图片不能显示，注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo ： codeme9@gmail....
二、第一个ExtJS例子 三、表格 四、从XML读取数据表格 五、按钮 六、ComboBox控件 七、Panel面板 八、Viewport 九、表单Form 十、窗口 十一、消息对话框 十二、ExtJS与Webservice应用 十三、自定义组件 ...
对于GridPanel中拖动选中行排序的实现，网上有不少ExtJs实现的例子，但是没有找到使用Ext.net实现的，正好最近有个需求要使用，干脆来写一个。 DEMO功能说明： 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
一个关于EXTJs 表格 中文排序的例子
因为前段时间有两个专案要用到extjs技术，所以自己学了一段时间，在专案才发现extjs的强大，无论对于开发者还是使用者他都是一场视觉盛宴，这里有我从学习开始做的一些笔记和例子也有自己收集的学习资料，里面包括...
用Ext写一个登陆界面，登陆完后进入一个...用Servlet发送请求，Json数据也是JS通过Servlet请求从数据库中读取显示在Grid表格中。例子比较简单，但方法很明朗。 代码没有经过处理，可能有些乱，但思路还是比较清晰的。
简介 在Ext官方的例子中只有下拉列表控件，但是在实际业务中只有下拉列表无法满足需求的，像下拉树和下拉表格都是很常见的控件，对于刚使用Ext的人来说，自定义一个控件好难，其实多读官方的源码有些事情就不会那么...
闪烁吧！看看extjs那些美丽的例子。 震撼吧！让你知道ext表格控件的厉害。 ›
EXT 2 和 DWR 1 表格编辑控件示例(无数据库版本) EXT 2 表格编辑控件示例(静态页面，与Java无关版本) Netbeans 6 开放文档团队在线通讯录(Ext + DWR + MySQL) DWR 检查注册用户名是否存在 模拟DWR 引擎通过反射调用...
JS之extjsj精通例子4章1 赵俊昌、祝红涛、吴越人编写的《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。精通JS脚本之ExtJS框架共分 17章，分别介绍了JavaScript的对象编程、JavaScript...