ext.grid.panel +u f> r -...

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 ",

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 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

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

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', {

//{ 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

Ext.grid.Panel 86.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(){

{name: 'id' , type: 'int'},{name: 'name', type: 'string'},{name: 'author', type: 'string'},{name: 'price', type: 'float'},

// Book Modelmodel: 'Book',// proxyproxy: {

type: 'ajax',url: 'getAllBooks',// URL Ajaxreader: { // Ext.data.reader.Json

type: 'json',root: 'data' // data

},},autoLoad:true//

{ 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

proxy getAllBooks ServletExt.form.field.ComboBox Servlet Servlet

Store6.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: [

// 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

{ 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,

});</script></body>

getBooksByPage Servlet

StoreStore

Ext.grid.Panel Store6.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: 'sun@tian.com'},{id: 2, name: ' ', email: 'zhu@tian.com'},{id: 3, name: ' ', email: 'bai@tian.com'},{id: 4, name: ' ', email: 'zhi@tian.com'},{id: 5, name: ' ', email: 'niu@tian.com'}

],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 //

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()

PagingMemoryProxyStore

�� 6.8.6Ext.grid.Panel

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: {

},},autoLoad:true//

Store sorters filters

06www.fkjava.org

Store6.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(){

// Book Model

model: 'Book',// groupField: 'author',// proxyproxy: {

},},autoLoad:true//

{ 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

Store authorfeatures features

06www.fkjava.org

rowbody 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

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(){

},},autoLoad:true//

});var grid = Ext.create('Ext.grid.Panel', {

{ 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();

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));

Servlet BookService updateBook()Ajax

�� 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

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 = {

06www.fkjava.org

total:5};var userStore = Ext.create('Ext.data.Store', {

// Storefields:['id' , 'name', 'email'],// proxyproxy: {

type: 'pagingmemory', // PagingMemoryProxydata: data,reader: {

title: ' ',store: userStore,columns: [

],width: 400,// viewConfig Ext.grid.ViewviewConfig: {

// Ext.grid.plugin.DragDropplugins: {

ptype: 'gridviewdragdrop',dragText: ' '

}},renderTo: Ext.getBody()

Ext.grid.Panel

codes\06\6.8\Ext.grid\Ext.grid.Panel_ddForm.html<body><script type="text/javascript">Ext.onReady(function(){

// var data = {

],total:5

};var userStore = Ext.create('Ext.data.Store', {

// Storefields:['id' , 'name', 'email'],// proxyproxy: {

type: 'memory', // PagingMemoryProxydata: data,reader: {

});Ext.create('Ext.panel.Panel', {

title: ' ',width: 400,renderTo: Ext.getBody(),items:[

{xtype: 'gridpanel',store: userStore,width: '100%',columns: [

],// 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.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(){

},},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();//

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', {

{ 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

editFn Ext.window.WindowdeleteFn

ext.grid.panel +u f> r -...

Documents

linux -...

spark foundations -...

part one value -...

game theory in everyday life -...

powerpoint 2010的基本操作 -...

objectives -...

baiduimages.china-pub.com/ebook3020001-3025000/3020662/ch02.pdf ·...

uniquely human -...

第 2 章 docker -...

理解 backbone -...

第 2 sql -...

linux -...

excel -...

1 powerpoint 2003基本操作 -...

第 jdbc 基础 -...

android 中ndk 开发 -...

av foundation入门 -...

m01 hair3093 07 ie c01 -...

第 1 章安装和使用 express -...

e x e c u t i o n -...