ext.grid.panel +u f> r -...
TRANSCRIPT
�
06www.fkjava.org
6.8 Ext.grid.Panel
Ext JS Ext.grid.Panel Store StoreExt.grid.Panel
Ext.grid.Panel Ext.tree.Panel Ext.panel.Table Ext.panel.TableExt.panel.Panel Ext.panel.Table Panel Ext.panel.Table
�
� View� Store�
� Ext.grid.header.ContainerExt.grid.Panel
�� 6.8.1 Ext.grid.PanelExt.grid.Panel Ext.panel.Panel Ext.panel.Panel
Ext.grid.Panel� store Store� columns Ext.grid.column.Column items
Ext.grid.column.Column Ext.grid.column.ColumnExt.grid.Panel
Ext.grid.Panel
codes\06\6.8\Ext.grid\Ext.grid.Panel.html<body><script type="text/javascript">Ext.onReady(function(){
Ext.define('Book', {extend: 'Ext.data.Model',fields: [
{name: 'name', type: 'string'},{name: 'author', type: 'string'},{name: 'price', type: 'float'},{name: 'publishDate', type: 'date'}
]});// Ext.data.Storevar bookStore = Ext.create('Ext.data.Store', {
// Book Modelmodel: 'Book',// datadata : [
{"id": 1, name: " Java ", author:' ' , price: 109, publishDate:'2012-01-01'},
{"id": 2, name:" Java EE ",author:' ' , price: 99, publishDate:'2011-09-02'},
{"id": 3, name: " Ajax ",
�
Ajax
author:' ' , price: 69, publishDate:'2012-09-08'},]
});Ext.create('Ext.grid.Panel', {
title: ' ',width: 550, // renderTo: Ext.getBody(),// columns: [
{ text: ' ', dataIndex: 'name' , flex: 1 }, // 1{ text: ' ', dataIndex: 'author', flex: 1 }, // 2{ text: ' ', dataIndex: 'price' , flex: 1 }, // 3// 4{ text: ' ', dataIndex: 'publishDate',
xtype:'datecolumn' , format:'Y m d ' , flex: 1},],store: bookStore
});});</script></body>
Ext.grid.Panel PanelExt.grid.Panel columns store columns
store Store Store
6.71
6.71 Ext.grid.Panel
6.71 Ext.grid.Panel HTMLExt.grid.Panel
�� 6.8.2 Ext.grid.column.ColumnExt.grid.Panel columns
Ext.grid.column.Column JavaScript itemsExt.grid.column.Column Ext.grid.Panel
Ext.grid.column.ColumnExt.grid.column.Column
� text� sortable
�
06www.fkjava.org
� hideable� menuDisabled� draggable� groupable� dataIndex Ext.data.Store .� renderer
Ext.grid.column.Column 6.72
6.72
Ext.grid.column.Booean boolean
� trueText true� falseText falseExt.grid.column.Date Ext.grid.column.Number
Ext.grid.column.Date Ext.grid.column.Numberformat
Ext.grid.column.Templatetpl
Ext.ux.CheckColumn examples\uxCheckColumn.js boolean
Ext.ux.CheckColumn examples\ux
CheckColumn.js examples\ux\css CheckHeader.css
examples\ux\css\images
Ext.grid.column.Action
�
Ajax
codes\06\6.8\Ext.grid\Ext.grid.column.Column.html<body><script type="text/javascript">Ext.onReady(function(){
// Ext.tip.QuickTipManager.init();// Ext.data.Storevar userStore = Ext.create('Ext.data.Store', {
// datadata : [
{name: " ", isMarried: false , birthDate: '0178-12-12',height: 1.65},
{name: " ", isMarried: false , birthDate: '0278-12-12',height: 1.65},
{name: " ", isMarried: true , birthDate: '0168-12-12',height: 1.65},
{name: " ", isMarried: true , birthDate: '1178-12-12',height: 1.65}
],fields:[
'name' , 'isMarried',{name: 'birthDate', type: 'date', format:'Y-m-d'},'height'
]});Ext.create('Ext.grid.Panel', {
title: ' ',width: 650, // renderTo: Ext.getBody(),// columns: [
//{ text: ' ' , xtype: 'rownumberer' , width:30},// xtype{ text: ' ', dataIndex: 'name'},// Boolean{ text: ' ', xtype: 'booleancolumn', trueText: ' ',
falseText: ' ', dataIndex: 'isMarried'},// CheckBox{ text: ' ', xtype: 'checkcolumn',
dataIndex: 'isMarried', width: 55 , cls:'x-grid-checked'},//{ text: ' ', xtype: 'datecolumn',
dataIndex: 'birthDate', format:'Y m d '},//{ text: ' ', xtype: 'numbercolumn',
dataIndex: 'height', format:'0.00 ' },{ text: ' ', xtype: 'templatecolumn',
tpl: ' :{name}, :{height}' , flex:1},{
text: ' ',xtype:'actioncolumn',width: 50,items: [
{icon: 'edit.gif', //
�
06www.fkjava.org
tooltip: ' ',handler: function(grid, rowIndex, colIndex){
var rec = grid.getStore().getAt(rowIndex);alert(" " + rec.get('name') + " ");
}},{
icon: 'delete.gif', // tooltip: ' ',handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);alert(" " + rec.get('name')+ " ");
}}
]}
],store: userStore
});});</script></body>
Ext.grid.Panel 86.73
6.73
�� 6.8.3 Ext.grid.PanelExt.grid.Panel Store Store
Ext.grid.PanelExt.grid.Panel Ext.data.Store proxy
Ext.data.Store Ext.grid.Panel Store
codes\06\6.8\Ext.grid\Ext.grid.Panel_remote.html<body><script type="text/javascript">Ext.onReady(function(){
�
Ajax
Ext.define('Book', {extend: 'Ext.data.Model',fields: [
{name: 'id' , type: 'int'},{name: 'name', type: 'string'},{name: 'author', type: 'string'},{name: 'price', type: 'float'},
]});// Ext.data.Storevar bookStore = Ext.create('Ext.data.Store', {
// Book Modelmodel: 'Book',// proxyproxy: {
type: 'ajax',url: 'getAllBooks',// URL Ajaxreader: { // Ext.data.reader.Json
type: 'json',root: 'data' // data
},},autoLoad:true//
});Ext.create('Ext.grid.Panel', {
title: ' ',width: 550, // renderTo: Ext.getBody(),// columns: [
{ text: ' ID', dataIndex: 'name' , flex: 1 }, // 1{ text: ' ', dataIndex: 'name' , flex: 1 }, // 2{ text: ' ', dataIndex: 'author', flex: 1 }, // 3{ text: ' ', dataIndex: 'price' , flex: 1 }, // 4
],store: bookStore
});});</script></body>
proxy getAllBooks ServletExt.form.field.ComboBox Servlet Servlet
Store6.74
6.74
�
06www.fkjava.org
�� 6.8.4 Ext.grid.PanelExt.toolbar.Paging Store
Store Ext.grid.Panel
codes\06\6.8\Ext.grid\Ext.grid.Panel_page.html<body><script type="text/javascript">Ext.onReady(function(){
// Book ModelExt.define('Book', {
extend: 'Ext.data.Model',fields: [
{name: 'id' , type: 'int'},{name: 'name', type: 'string'},{name: 'author', type: 'string'},{name: 'price', type: 'float'},
]});// Ext.data.Storevar bookStore = Ext.create('Ext.data.Store', {
// Book Modelmodel: 'Book',pageSize: 2, // 2// proxyproxy: {
type: 'ajax',url: 'getBooksByPage',// URL Ajaxreader: { // Ext.data.reader.Json
type: 'json',totalProperty: 'total',root: 'data' // data
},},autoLoad:true
});Ext.create('Ext.grid.Panel', {
title: ' ',width: 550, // renderTo: Ext.getBody(),// columns: [
{ text: ' ID', dataIndex: 'name' , flex: 1 }, // 1{ text: ' ', dataIndex: 'name' , flex: 1 }, // 2{ text: ' ', dataIndex: 'author', flex: 1 }, // 3{ text: ' ', dataIndex: 'price' , flex: 1 }, // 4
],store: bookStore,// bbar:{
xtype: 'pagingtoolbar',store: bookStore, // bookStoredisplayInfo: true,
}});
�
Ajax
});</script></body>
getBooksByPage Servlet
StoreStore
Ext.grid.Panel Store6.75
6.75
�� 6.8.5Proxy Ext JS
Ext.data.proxy.Memory Ext.data.proxy.LocalStorage Ext.data.proxy.SessioStorageProxy
Ext.data.proxy.Memory ProxyStore
Ext.data.proxy.MemoryExt.ux.data.PagingMemoryProxy
JavaScript examples\ux\dataProxy
codes\06\6.8\Ext.grid\Ext.grid.Panel_localpage.html<body><script type="text/javascript">Ext.onReady(function(){
// var data = {
users: [{id: 1, name: ' ', email: '[email protected]'},{id: 2, name: ' ', email: '[email protected]'},{id: 3, name: ' ', email: '[email protected]'},{id: 4, name: ' ', email: '[email protected]'},{id: 5, name: ' ', email: '[email protected]'}
],total:5
};
�
06www.fkjava.org
var userStore = Ext.create('Ext.data.Store', {
// Storefields:['id' , 'name', 'email'],pageSize: 2, // 2// proxyproxy: {
type: 'pagingmemory', // PagingMemoryProxydata: data,reader: {
type: 'json',root: 'users', // userstotalProperty: 'total' // total
}},autoLoad: true //
});Ext.create('Ext.grid.Panel', {
title: ' ',store: userStore,columns: [
{ header: 'ID', dataIndex: 'id' },{ header: ' ', dataIndex: 'name'},{ header: 'Email', dataIndex: 'email' , flex: 1 }
],width: 400,bbar: {
xtype: 'pagingtoolbar',store: userStore, // userStoredisplayInfo: true
},renderTo: Ext.getBody()
});});</script></body>
PagingMemoryProxyStore
6.76
6.76
�� 6.8.6Ext.grid.Panel
�
Ajax
Ext.data.Store Ext.data.Store
� filters Ext.util.Filter Ext JSExt.util.Filter Ext.data.Store
Ext.util.Filter true� filterOnLoad� sorters Ext.util.Sorter Ext.util.Sort name
name JavaScript {property: 'name', direction: 'DESC'} namefn(o1,o2) o1 o2 0 o1
o2 o1 o2� sortOnFilter true� sortOnLoad true
Ext.data.Store Ext.grid.Panel
Store sorters filters Store
codes\06\6.8\Ext.grid\Ext.grid.Panel_sort.html// Ext.data.Storevar bookStore = Ext.create('Ext.data.Store', {
// Book Modelmodel: 'Book',// sorters:[{property: 'price', direction: 'DESC'}],filters: [
//function(item) {
return item.data.name.length < 10;},//function(item) {
return item.data.author.length < 5;}
],// proxyproxy: {
type: 'ajax',url: 'getAllBooks',// URL Ajaxreader: { // Ext.data.reader.Json
type: 'json',root: 'data' // data
},},autoLoad:true//
});
Store sorters filters
�
06www.fkjava.org
Store6.77
6.77
�� 6.8.7Ext JS Ext.grid.feature 4� Grouping� GroupingSummary� RowBody
� Summary2
Ext.data.Data groupFieldExt.grid.Panel Ext.grid.feature.Grouping Ext.grid.feature.GroupingSummary
� groupclick� groupdblclick� groupexpand� groupcollapse
codes\06\6.8\Ext.grid\Ext.grid.Panel_group.html<body><script type="text/javascript">Ext.onReady(function(){
Ext.define('Book', {extend: 'Ext.data.Model',fields: [
{name: 'id' , type: 'int'},{name: 'name', type: 'string'},{name: 'author', type: 'string'},{name: 'price', type: 'float'},
]});// Ext.data.Storevar bookStore = Ext.create('Ext.data.Store', {
// Book Model
�
Ajax
model: 'Book',// groupField: 'author',// proxyproxy: {
type: 'ajax',url: 'getAllBooks',// URL Ajaxreader: { // Ext.data.reader.Json
type: 'json',root: 'data' // data
},},autoLoad:true//
});Ext.create('Ext.grid.Panel', {
title: ' ',width: 550, // renderTo: Ext.getBody(),// columns: [
{ text: ' ID', dataIndex: 'id' , flex: 1 }, // 1{ text: ' ', dataIndex: 'name' , flex: 1 }, // 2{ text: ' ', dataIndex: 'author', flex: 1 }, // 3{ text: ' ', dataIndex: 'price' , flex: 1 }, // 4{ text: ' ' , dataIndex: 'name', summaryType: 'count',
summaryRenderer: function(value){return Ext.String.format('<b> {0} </b>', value);
}}
],features:[
// features{
ftype: 'groupingsummary',groupHeaderTpl: '{name} '
},// features rowbody{
ftype: 'rowbody',getAdditionalData: function(data, rowIndex, record, orig){
var headerCt = this.view.headerCt,colspan = headerCt.getColumnCount();return {
rowBody: '<div style="background:#ccc;"> '+ record.get("author")+' </div>',
rowBodyColspan: colspan};
}}
],store: bookStore
});});</script></body>
Store authorfeatures features
�
06www.fkjava.org
rowbody 6.78
6.78
6.78 Ext JSgroupDir DESC
count()
� count� sum� min� max� average
�� 6.8.8Ext JS Ext.grid.plugin 3
� Ext.grid.plugin.Editing� Ext.grid.plugin.RowEditing� Ext.grid.plugin.CellEditing
Ext.grid.plugin.RowEditing Ext.grid.plugin.CellEditing4
� beforeedit� canceledit� edit� validateedit Store
false
�
Ajax
Ext.grid.Panel plugins
Ext.grid.Panel fieldseditor
codes\06\6.8\Ext.grid\Ext.grid.Panel_edit.html<body><script type="text/javascript">Ext.onReady(function(){
Ext.define('Book', {extend: 'Ext.data.Model',fields: [
{name: 'id' , type: 'int'},{name: 'name', type: 'string'},{name: 'author', type: 'string'},{name: 'price', type: 'float'},
]});// Ext.data.Storevar bookStore = Ext.create('Ext.data.Store', {
// Book Modelmodel: 'Book',// proxyproxy: {
type: 'ajax',url: 'getAllBooks',// URL Ajaxreader: { // Ext.data.reader.Json
type: 'json',root: 'data' // data
},},autoLoad:true//
});var grid = Ext.create('Ext.grid.Panel', {
title: ' ',width: 550, // renderTo: Ext.getBody(),// columns: [
{ text: ' ID', dataIndex: 'id' , flex: 1 }, // 1// 2{ text: ' ', dataIndex: 'name' , flex: 1,
editor: {xtype: 'textfield', allowPattern: false}},// 3{ text: ' ', dataIndex: 'author', flex: 1,
editor: {xtype: 'textfield', allowPattern: false}},// 4{ text: ' ', dataIndex: 'price' , flex: 1,
editor: {xtype: 'numberfield', allowPattern: false}},],selType: 'rowmodel', // plugins: [
//
�
06www.fkjava.org
{ptype: 'rowediting',clicksToEdit: 1
}],store: bookStore
});// grid.on('edit', function(editor, e){
Ext.Ajax.request({url: 'updateBook', // Ajaxmethod: 'POST',params: { //
id: e.newValues.id,name: e.newValues.name,author: e.newValues.author,price: e.newValues.price,
}, // success: function(response){
alert(Ext.JSON.decode(response.responseText).tip);e.record.commit();
}});
});});</script></body>
fieldseditor plugins
AjaxupdateBook Servlet
codes\06\6.8\Ext.grid\WEB-INF\src\org\crazyit\exts\web\UpdateBookServlet.java@WebServlet(urlPatterns="/updateBook")public class UpdateBookServlet extends HttpServlet{
public void service(HttpServletRequest request ,HttpServletResponse response)throws IOException , ServletException
{request.setCharacterEncoding("utf-8");// String id = request.getParameter("id");String name = request.getParameter("name");String author = request.getParameter("author");String price = request.getParameter("price");Map<String , Object> result = new HashMap<>();boolean rvtVal = new BookService().updateBook(
Integer.parseInt(id) , name , author ,Double.parseDouble(price));
result.put("tip" , rvtVal ? " " : " ");// response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();// Map JSONObjectout.print(new JSONObject(result));
}}
�
Ajax
Servlet BookService updateBook()Ajax
6.79
6.79
�� 6.8.9Ext.grid.Panel viewConfig viewConfig
Ext.grid.View Ext.grid.View Ext.grid.PanelExt.grid.View viewConfig Ext.grid.View
Ext.grid.View Ext.tree.View Ext.view.Table
Panel
viewConfig Ext.grid.plugin.DragDrop
� ddGroup� dragGroup� dragText� dropGroup� enableDrag� enableDrop
codes\06\6.8\Ext.grid\Ext.grid.Panel_dd.html<body><script type="text/javascript">Ext.onReady(function(){
// var data = {
users: [{id: 1, name: ' ', email: '[email protected]'},{id: 2, name: ' ', email: '[email protected]'},{id: 3, name: ' ', email: '[email protected]'},{id: 4, name: ' ', email: '[email protected]'},{id: 5, name: ' ', email: '[email protected]'}
],
�
06www.fkjava.org
total:5};var userStore = Ext.create('Ext.data.Store', {
// Storefields:['id' , 'name', 'email'],// proxyproxy: {
type: 'pagingmemory', // PagingMemoryProxydata: data,reader: {
type: 'json',root: 'users', // userstotalProperty: 'total' // total
}},autoLoad: true //
});Ext.create('Ext.grid.Panel', {
title: ' ',store: userStore,columns: [
{ header: 'ID', dataIndex: 'id' },{ header: ' ', dataIndex: 'name'},{ header: 'Email', dataIndex: 'email' , flex: 1 }
],width: 400,// viewConfig Ext.grid.ViewviewConfig: {
// Ext.grid.plugin.DragDropplugins: {
ptype: 'gridviewdragdrop',dragText: ' '
}},renderTo: Ext.getBody()
});});</script></body>
6.80
6.80
Ext.grid.Panel
�
Ajax
codes\06\6.8\Ext.grid\Ext.grid.Panel_ddForm.html<body><script type="text/javascript">Ext.onReady(function(){
// var data = {
users: [{id: 1, name: ' ', email: '[email protected]'},{id: 2, name: ' ', email: '[email protected]'},{id: 3, name: ' ', email: '[email protected]'},{id: 4, name: ' ', email: '[email protected]'},{id: 5, name: ' ', email: '[email protected]'}
],total:5
};var userStore = Ext.create('Ext.data.Store', {
// Storefields:['id' , 'name', 'email'],// proxyproxy: {
type: 'memory', // PagingMemoryProxydata: data,reader: {
type: 'json',root: 'users', // userstotalProperty: 'total' // total
}},autoLoad: true //
});Ext.create('Ext.panel.Panel', {
title: ' ',width: 400,renderTo: Ext.getBody(),items:[
{xtype: 'gridpanel',store: userStore,width: '100%',columns: [
{ header: 'ID', dataIndex: 'id' },{ header: ' ', dataIndex: 'name'},{ header: 'Email', dataIndex: 'email' , flex: 1 }
],// Ext.grid.Panel ViewviewConfig: {
plugins: {ddGroup: 'fkGroup', // ptype: 'gridviewdragdrop',dragText: ' ',enableDrop: false, //
}}
},{
id: 'my_form',xtype: 'form',width: '100%',bodyPadding: 10,items: [
�
06www.fkjava.org
{xtype: 'textfield',name: 'id',fieldLabel: 'ID', //
}, {
xtype: 'textfield',name: 'name',fieldLabel: ' ', //
}, {
xtype: 'textfield',name: 'email',fieldLabel: 'Email', //
}]
}]
});// (function(){
var formPanel = Ext.getCmp('my_form');var formPanelDropTargetEl = formPanel.body.dom;var formPanelDropTarget = Ext.create('Ext.dd.DropTarget', formPanelDropTargetEl,{
ddGroup: 'fkGroup', // // notifyEnter: function(ddSource, e, data) {
// PanelformPanel.body.stopAnimation();// PanelformPanel.body.highlight();
},// notifyDrop : function(ddSource, e, data){
// var selectedRecord = ddSource.dragData.records[0];// PanelformPanel.getForm().loadRecord(selectedRecord);// // ddSource.view.store.remove(selectedRecord);return true;
}});
})();});</script></body>
Ext.grid.plugin.DragDrop
formPanelHTML
6.81
�
Ajax
6.81
�� 6.8.10 Ext.grid.column.ActionExt.grid.column.Action
Ext.grid.column.Action
codes\06\6.8\Ext.grid\Ext.grid.Panel_Action.html<body><script type="text/javascript">Ext.onReady(function(){
Ext.define('Book', {extend: 'Ext.data.Model',fields: [
{name: 'id' , type: 'int'},{name: 'name', type: 'string'},{name: 'author', type: 'string'},{name: 'price', type: 'float'},
]});// Ext.data.Storevar bookStore = Ext.create('Ext.data.Store', {
// Book Modelmodel: 'Book',// proxyproxy: {
type: 'ajax',url: 'getAllBooks',// URL Ajaxreader: { // Ext.data.reader.Json
type: 'json',root: 'data' // data
},},autoLoad:true//
});var editWin;// var editFn = function(grid, rowIndex, colIndex){
var rec = grid.getStore().getAt(rowIndex);
�
06www.fkjava.org
if(editWin){
editWin.setTitle(' ' + rec.get('name') + ' ');var formFields = editWin.items.get(0).items;formFields.get(0).setValue(rec.get('id'));formFields.get(1).setValue(rec.get('name'));formFields.get(2).setValue(rec.get('author'));formFields.get(3).setValue(rec.get('price'));
}else{
editWin = Ext.create("Ext.window.Window",{
title : ' ' + rec.get('name') + ' ',items: [
{url: 'updateBook',xtype: 'form',width: '100%',bodyPadding: 10,items: [
{xtype: 'textfield',name: 'id',readOnly: true,value: rec.get('id'), // fieldLabel: 'ID', // }, {xtype: 'textfield',name: 'name',value: rec.get('name'), // fieldLabel: ' ', // },{xtype: 'textfield',name: 'author',value: rec.get('author'), // fieldLabel: ' ', // },{xtype: 'textfield',name: 'price',value: rec.get('price'), // fieldLabel: ' ', // }
]}
],listeners: {
beforedestroy : function(cmp){
this.hide();return false;
}},bbar: [
{xtype: 'tbfill' ,},{text:' ' , handler: function()
{// Ext.form.Basicvar form = editWin.items.get(0).getForm();//
�
Ajax
if (form.isValid()) {// Ajaxform.submit({
// success: function(form, action) {
bookStore.reload();editWin.hide();alert(action.result.tip);
}});}
}}, {text:' ' , handler:function(){
editWin.hide();}},{xtype: 'tbfill' ,}
]});
}editWin.setVisible(true);
};// var deleteFn = function(grid, rowIndex, colIndex) {
if(confirm(" " , " ")){
var rec = grid.getStore().getAt(rowIndex);Ext.Ajax.request({
url: 'deleteBook', // Ajaxmethod: 'POST',params: { //
id: rec.get('id')}, // success: function(response){
bookStore.reload();alert(Ext.JSON.decode(response.responseText).tip);
}});
}};var grid = Ext.create('Ext.grid.Panel', {
title: ' ',width: 550, // renderTo: Ext.getBody(),// columns: [
{ text: ' ID', dataIndex: 'id' , flex: 1 }, // 1// 2{ text: ' ', dataIndex: 'name' , flex: 1,
editor: {xtype: 'textfield', allowPattern: false}},// 3{ text: ' ', dataIndex: 'author', flex: 1,
editor: {xtype: 'textfield', allowPattern: false}},// 4{ text: ' ', dataIndex: 'price' , flex: 1,
editor: {xtype: 'numberfield', allowPattern: false}},{
�
06www.fkjava.org
text: ' ',xtype:'actioncolumn',width: 50,items: [
{icon: 'edit.gif', // tooltip: ' ',handler: editFn //
},{
icon: 'delete.gif', // tooltip: ' ',handler: deleteFn //
}]
}],store: bookStore
});});</script></body>
editFn Ext.window.WindowdeleteFn
6.82
6.82