56. EditorGridPanel和渲染器renderer的使用

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

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

效果图：

56. EditorGridPanel和渲染器renderer的使用-LMLPHP

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

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