Ext editpanel

最新推荐文章于 2016-03-12 13:25:00 发布

转载最新推荐文章于 2016-03-12 13:25:00 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/zimingforever/blog/67427

文章标签：

#python

本文详细介绍了Ext.js编辑面板组件的使用方法，包括数据存储、数据模型、验证类型设置、面板配置及操作监听等核心功能。通过实例代码展示了如何创建编辑面板，实现电影数据库的管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

editpanel是ext中一个很强大的组件

这里列一个网上的小例子，代码如下：

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','女']]  
        });  
      
    //======================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'}  
                                        ]);  
      
    //=======================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?'男':'女';   
    };  
      
      
    //=========================validate======================================  
    Ext.form.VTypes['nameVal']  = /^[A-Z][A-Za-z\-]+ [A-Z][A-Za-z\-]+$/;  
    Ext.form.VTypes['nameMask'] = /[A-Za-z\- ]/;  
    Ext.form.VTypes['nameText'] = 'In-valid Director Name.';  
    Ext.form.VTypes['name']     = function(v){  
        return Ext.form.VTypes['nameVal'].test(v);  
    }  
       
    //========================panel============================  
    var grid = new Ext.grid.EditorGridPanel({  
          renderTo: Ext.getBody(),  
          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);  
                }   
             }],  
          
        //===========================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}  
            ],  
          
        //=====================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();  
              }  
            }  
          }    
         });  
});

直接给出效果