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