山有峰则灵 发表于 2013-2-7 17:44:46

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]
查看完整版本: ext editor grid