ext editor grid
这几天学习ext 做了一个简单的ext grid<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css"><script src="./ext/adapter/ext/ext-base.js"></script><script src="./ext/ext-all-debug.js"></script><script type="text/javascript">Ext.onReady(function(){//================data================var store = new Ext.data.Store({data: [ [ 1, "Office Space", "Mike Judge", "1999-02-19", 1, "Work Sucks", "19.95", 1 ],[ 3, "Super Troopers", "Jay Chandrasekhar", "2002-02-15", 2, "Altered State Police", "14.95", 1 ] ], reader: new Ext.data.ArrayReader({id:'id'}, [ 'id', 'title', 'director', {name: 'released', type: 'date', dateFormat: 'Y-m-d'}, 'genre', 'tagline', 'price', 'available' ]) }); var genres = new Ext.data.SimpleStore({ fields: ['id', 'genre'], data : [['1','男'],['2','女']]});//======================end data==============//======================data model===========================var ds_model = Ext.data.Record.create([ 'id', 'coverthumb', 'title', 'director', {name: 'released', type: 'date', dateFormat: 'Y-m-d'}, 'genre', 'tagline', {name: 'price', type: 'float'}, {name: 'available', type: 'bool'} ]); //======================end data model========================== //=======================editor=================================var title_edit= new Ext.form.TextField();var director_edit = new Ext.form.TextField({vtype: 'name'});var tagline_edit= new Ext.form.TextField({ maxLength: 10 });var release_edit= new Ext.form.DateField({ format: 'Y-m-d'});var genre_edit = new Ext.form.ComboBox({ typeAhead: true,triggerAction: 'all',mode: 'local',store: genres,displayField:'genre', valueField: 'id'}); var genre_name = function(val){return val==1?'男':'女'; };//=============================end editor========================//=========================validate======================================Ext.form.VTypes['nameVal']= /^+ +$/;Ext.form.VTypes['nameMask'] = //;Ext.form.VTypes['nameText'] = 'In-valid Director Name.';Ext.form.VTypes['name'] = function(v){return Ext.form.VTypes['nameVal'].test(v);}//=========================end validate================================== //========================panel============================var grid = new Ext.grid.EditorGridPanel({ renderTo: document.body, frame:true, title: 'Movie Database', height:200, width:517, clickstoEdit:1, store: store, selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//singleSelect为false 否则无法删除 //=====================tool bar======================================== tbar: [{ text: 'Remove Movie', //icon: './ext/resources/images/default/toolbar/tb-btn-sprite.gif', handler: function() { var sm = grid.getSelectionModel(); var sel = sm.getSelected(); if (sm.hasSelection()){ Ext.Msg.show({ title: 'Remove Movie', buttons: Ext.MessageBox.YESNOCANCEL, msg: 'Remove '+sel.data.title+'?', fn: function(btn){ if (btn == 'yes'){ grid.getStore().remove(sel); } } }); }; } },{ text: 'Add Movie (First)', //icon: './ext/resources/images/default/toolbar/tb-btn-sprite.gif', handler: function() { grid.getStore().insert( 0, new ds_model({ title:'New Movie', director:'', genre:0, tagline:'' }) ); grid.startEditing(0,0); } },{ text: 'Add Movie (Last)', handler:function(){ grid.getStore().insert( grid.getStore().getCount(), new ds_model({ title:'New Movie', director:'', genre:0, tagline:'' }) ); grid.startEditing(grid.getStore().getCount()-1,0); } }], //==================================end toolbal=================== //===========================columns============================== columns: [ {header: "Title", dataIndex: 'title',editor: title_edit}, {header: "Director", dataIndex: 'director',editor: director_edit}, {header: "Released", dataIndex: 'released', renderer: Ext.util.Format.dateRenderer('Y-m-d'), editor:release_edit}, {header: "Genre", dataIndex: 'genre',renderer:genre_name,editor:genre_edit}, {header: "Tagline", dataIndex: 'tagline',editor: tagline_edit} ],//=========================end columns============================= //=====================listeners=================== listeners: { afteredit: function(e){ if (e.field == 'director' && e.value == 'Mel Gibson'){ Ext.Msg.alert('Error','Mel Gibson movies not allowed'); e.record.reject(); }else{ e.record.commit(); } } }//===================end listeners================= });});</script></head><body></body></html>
页:
[1]