56. EditorGridPanel和渲染器renderer的使用

转自：https://blog.csdn.net/chenkangwan/article/details/4748716?utm_source=blogxgwz6

1.

 在EditorGriddPanel中，可以嵌入一些form的控件，而且还可以自定义渲染器.以下是我写的一个例子:

 效果图：

Ext.onReady(function() {
 createViewPoint();
 createTreePanel();
  // createGridPanel();
 });

function createViewPoint() {
 var borderPanel = new Ext.Viewport({
    renderTo : Ext.getBody(),
    layout : 'border',
    items : [{
       region : 'north',
       autoHeight : true,
       border : false
      }, {
       id : 'treePanel',
       region : 'west',
       collapsable : true,
       title : '主菜单',
       width : '200'
      }, {
       region : 'south',
       title : 'Title for Panel',
       collapsible : true,
       html : 'Information goes here',
       split : true,
       height : 100,
       minHeight : 100
      }, {
       id : 'QQPanel',
       region : 'center',
       xtype : 'tabpanel', // TabPanel itself has no title
       items : [{
          title : '主页'
         }],
       activeTab : 0
      }]
   });
}

function createTreePanel() {
 // create rootNode
 var rootNode = new Ext.tree.TreeNode({
    text : '主菜单'
   });
 rootNode.appendChild(new Ext.tree.TreeNode({
    text : '子节点一'
   }));
 rootNode.appendChild(new Ext.tree.TreeNode({
    text : '子节点二'
   }))

 var treePanel = new Ext.tree.TreePanel({
    renderTo : Ext.getCmp('treePanel').body,
    root : rootNode,
    border : false,
    listeners : {
     'click' : function(node, e) {
      createGridPanel(node);
     }
    }
   });
}

function createGridPanel(node) {

 if (node.text != '子节点一') {
  return;
 }
 var gridPanelTab = Ext.getCmp('gridPanelId');
 if (typeof gridPanel != 'undefined') {
  Ext.getCmp('QQPanel').activate(gridPanelTab);
 }
 // 首先建立一个store
 var simpStore = new Ext.data.JsonStore({
    url : '/extDemo/getData',
    fields : ['age', {
       name : 'birthday',
       type : 'date',
       mapping : 'birthday.time',
       dateFormat : 'time'
      }, 'id', 'name', 'sex'],
    waitMsg : '数据加载中...'
   });
 simpStore.load();
 // 建立一个grid显示的模型
 var gridMode = new Ext.grid.ColumnModel([{
    header : '用户id',
    dataIndex : 'id'
   }, {
    header : '用户名',
    dataIndex : 'name',
    editor : new Ext.form.TextField({
       allowBlank : false
      })
   }, {
    header : '年龄',
    dataIndex : 'age',
    editor : new Ext.form.TextField({
       allowBlank : false
      })
   }, {
    header : '生日',
    dataIndex : 'birthday',//下面加入日期控件
    editor : new Ext.form.DateField({
       allowBlank : false,
       format : 'Y-m-d'
      }),
    renderer : Ext.util.Format.dateRenderer('Y-m-d')//日期格式渲染器
   }, {
    header : '性别',
    dataIndex : 'sex',
    editor : new Ext.form.ComboBox({
       name : 'sex',
       forceSelection : true,
       store : new Ext.data.SimpleStore({
          fields : ['value', 'text'],
          data : [[0, '女'], [1, '男']]
         }),
       mode : 'local',
       valueField : 'value',
       displayField : 'text',
       triggerAction : 'all',
       readOnly : true
      }),
    renderer : function(v){//自己定义的渲染器，O(∩_∩)O哈哈~
     if (v == 0){
      return '女'; 
     }
     return '男';
    }
   }]);
 // 根据以上两个基础搭建一个gridpanel
 var gridPanel = new Ext.grid.EditorGridPanel({
    store : simpStore,
    colModel : gridMode,
    width : 530,
    height : 200,
    buttons : [{
       text : '提交',
       handler : function() {
        commit();
       }
      }]
   });
 Ext.getCmp('QQPanel').add({
    id : 'gridPanelId',
    title : '数据页',
    items : [gridPanel]
   }).show();
 // 以下是操作一个注册右键事件，并加入右键菜单
 var rigthClickMenu = new Ext.menu.Menu({
    items : [{
       text : '复制',
       handler : function() {
        alert('hh');
       }
      }, {
       text : '粘贴'
      }]
   });
 gridPanel.on('rowcontextmenu', function(gridPanel, rowIndex, e) {
    e.preventDefault();
    rigthClickMenu.showAt(e.getXY());
   });
}

// 以下是事件处理方法区，随便测试用而已，===============================================================================

function commit(){
 var combox = new Ext.form.ComboBox({
  fieldLabel : '性别',
  name : 'sext',
  store : new Ext.data.SimpleStore({
   fields : ['text','value'],
   data : [['男','0'],['女','1']]
  }),
  displayField : 'text',
  valueField : 'value',
  readOnly : true,
  mode : 'local',
  triggerAction : 'all'
 });
 
 var win = new Ext.Window({
  width : '200',
  items : [combox]
 });
 
 win.show();
}