1:Ext4版本 双击Tab页面页签关闭 来自问题:http://www.iteye.com/problems/85832
解答:
var tabs = Ext.createWidget('tabpanel', {
renderTo: 'tabs1',
width: 450,
activeTab: 0,
defaults :{
bodyPadding: 10
},
listeners:{
afterrender:function(tab){
var tabBar = tab.down("tabbar");
tab.mon(tabBar.el, {
scope: this,
dblclick:function(){
tabs.remove(tab.getActiveTab());
},
delegate: 'div.x-tab'
});
}
......
关键是上面监听这块代码 代码写法参考自Ext4版本的TabCloseMenu.js里面的写法
比方里面有代码:
init : function(tabpanel){
this.tabPanel = tabpanel;
this.tabBar = tabpanel.down("tabbar");
this.mon(this.tabPanel, {
scope: this,
afterlayout: this.onAfterLayout,
single: true
});
},
onAfterLayout: function() {
this.mon(this.tabBar.el, {
scope: this,
contextmenu: this.onContextMenu,
delegate: 'div.x-tab'
});
},
2:今天有朋友问到Extjs4中关于grid中鼠标覆盖行时修改行背景色的问题(只对某一个grid作用),由于一直用的2版本,对4版本不熟悉,所以着实费了点时间,但最后还是给解决。解决方案参考自国外论坛:
http://skirtlesden.com/articles/styling-extjs-grid-cells
下面给出解决具体代码:(比方覆盖背景红色)
首先:建立一个mycss.css文件
内容如下:
.custom-grid .x-grid-row-over .x-grid-cell { //很重要哦
background-color: #FF0000;//这里的颜色自己根据需求修改
border-bottom-color: #ffc;
border-top-color: #ff5;
color: #009;
}
然后给出一个测试例子代码:
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all-debug.css" />
<link rel="stylesheet" type="text/css" href="mycss.css" />
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var store = Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone',"num"],
data:{'items':[
{id:"t1",'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" ,"num":"1" },
{id:"t2", 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" ,"num":"1" },
{id:"t3",'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" ,"num":"1" },
{id:"t3", 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" ,"num":"1" }
]},
proxy: {
type: 'memory',
reader: {
idProperty : "i11d",
type: 'json',
root: 'items'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
cls: 'custom-grid',//这里关键哦,和我之前建立的mycss文件里面的一致哦
store: store,
columns: [
{ header: 'Name', dataIndex: 'name' ,width:150},
{ header: 'Email', dataIndex: 'email' ,width:150},
{ header: 'Phone', dataIndex: 'phone' ,width:150}
],
height: 400,
width: 650,
renderTo: Ext.getBody()
});
});
上面的ext4库文件 自行引入
代码如此简单,解决问题
上效果图: