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应用 十三、自定义组件 ...
简介 在Ext官方的例子中只有下拉列表控件,但是在实际业务中只有下拉列表无法满足需求的,像下拉树和下拉表格都是很常见的控件,对于刚使用Ext的人来说,自定义一个控件好难,其实多读官方的源码有些事情就不会那么...
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
一个关于EXTJs 表格 中文排序的例子
因为前段时间有两个专案要用到extjs技术,所以自己学了一段时间,在专案才发现extjs的强大,无论对于开发者还是使用者他都是一场视觉盛宴,这里有我从学习开始做的一些笔记和例子也有自己收集的学习资料,里面包括...
用Ext写一个登陆界面,登陆完后进入一个...用Servlet发送请求,Json数据也是JS通过Servlet请求从数据库中读取显示在Grid表格中。例子比较简单,但方法很明朗。 代码没有经过处理,可能有些乱,但思路还是比较清晰的。
闪烁吧!看看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...