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动态表格例子
在"Extjs4的TreeGrid例子"这个主题中，我们将深入探讨TreeGrid的各种特性，以及如何在实际项目中应用这些示例。 1. **多语言支持**：描述中提到的"多语言"功能在ExtJS 4中通常通过i18n（国际化）实现。开发人员可以...
在这个"extjs4-ssi例子"中，我们可能看到的是一个基于ExtJS 4构建的用户管理系统，该系统集成了SSI技术来优化页面的构建和更新。用户管理通常涉及用户账户的创建、编辑、删除以及权限分配等功能。角色管理是这个系统...
#### 一、ExtJs表格超链接渲染 在ExtJs框架中，我们经常需要在表格（`Ext.grid.Panel`）中显示超链接，并且当用户点击这些超链接时，能够获取到当前行的数据。为了实现这一功能，我们可以使用`renderer`函数对...
继续深入，你会发现ExtJS提供了丰富的组件，如表格、树形视图、图表等，以及强大的数据绑定和布局管理功能，使得开发复杂的Web应用程序变得轻松。随着你对框架的了解加深，你将能够构建出更加高效和用户友好的Web...
ExtJS表格面板（GridPanel）是Sencha Ext JS框架中的一个核心组件，它用于展示大量结构化数据。在本文中，我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例，以及与其相关的源码和工具。 首先，让我们...
在本文中，我们将深入探讨如何使用ExtJS框架在前端动态生成表格，并结合后端数据进行展示。ExtJS是一个强大的JavaScript库，专用于构建富客户端Web应用程序，尤其在创建交互式用户界面方面表现突出。动态生成表格是...
- **布局（Layouts）**：ExtJs支持多种布局方式，如表格布局、边界布局、流式布局、绝对布局等，可以灵活调整容器内组件的排列方式。 2. **数据绑定与Store** - **Store**：Store是数据管理的核心，它可以连接到...
ExtJS TreeGrid是一种结合了表格和树形结构的组件，常用于展示层次化的数据，它在ExtJS库中提供了一种高效且灵活的方式来展现多级数据。在这个“Extjs treeGrid 本地数据 例子”中，我们将探讨如何使用ExtJS创建一个...
EXTJS4、STRUTS2和JAVA是Web开发中常用的三大技术框架，它们结合使用可以构建功能丰富的交互式用户界面和高效的企业级应用。在这个"EXTJS4+STRUTS2+JAVA增删改查"的例子中，我们将深入探讨这三个技术如何协同工作，...
标题"EXTJS小例子"可能是指一个包含EXTJS基本使用示例的项目，帮助初学者理解EXTJS的工作原理和基本用法。这个项目可能包含了一些简单的EXTJS代码片段，演示了如何创建和配置EXTJS组件，以及如何组织和布局页面。 ...
EXTJS 是一个强大的JavaScript 库，专用于构建富客户端应用程序，尤其在数据网格和桌面式Web应用方面表现出色。在上述描述中，我们看到如何利用EXTJS的Grid组件来构造一个矩阵视图，通常用于数据展示，比如流量矩阵...
### ExtJS 表格布局小例子详解 #### 一、简介 本文档旨在解析一个具体的 ExtJS 表格布局小例子，重点介绍其中涉及的数据存储、数据删除与添加的方法。ExtJS 是一款强大的 JavaScript 框架，用于构建交互式的前端...
一款基于EXTJS插件风格的表格合并示例，界面不用说了，使用EXT本身的界面风格，很漂亮，EXT功能很强大，这个表格合并功能只是其中一个比较实用的功能，这个例子带给大家，希望通过这个例子你会对EXT有更多的了解。
3. **View**：视图层主要负责用户界面的展示，EXTJS的视图通常由各种组件（如表格、面板、窗口等）组成。`Ext.container.Viewport`或`Ext.Component`是视图的基本元素，通过`xtype`指定组件类型。视图与控制器通过`...
下面将详细探讨ExtJS表格的这些功能。 1. **创建表格** 创建一个ExtJS表格首先需要定义一个`Ext.grid.Panel`实例，设置其配置项，包括数据源、列定义、存储配置等。例如： ```javascript var grid = Ext.create...
4. **主题**：EXTJS支持主题定制，开发者可以通过扩展来创建自己的UI风格。 5. **插件（Plugins）**：对于已存在的EXTJS组件，插件可以添加额外的功能，而无需修改组件的原始代码。 6. **数据代理（Data Proxy）**...
最新Ext版本、最新Struts2版本 ...extjs-4.1.0有红叉，请为ext-all.js添加Exclude From Validation struts2的类库已在WEB-INF/lib下 解压缩后的文件夹导入myeclipse即可 myeclipse9.0下自带的tomcat6.0测试可用
EXTJS通过其Grid组件支持分页，Grid组件是一个可配置的表格视图，能够显示大量数据并进行排序、筛选和分页操作。 首先，我们需要创建一个EXTJS Grid组件。在JS文件中，定义Grid的基本配置，包括列模型（column ...
通过学习这个例子，你可以更好地理解如何在实际项目中运用ExtJS 4 MVC模式来构建高效、模块化的Web应用程序。 这个压缩包文件"Ext4Mvc"可能包含了源代码、示例应用程序、文档或教程，这些都是为了帮助开发者更好地...