记录回答别人的Ext4问题

 

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":"[email protected]",  "phone":"555-111-1224" ,"num":"1" },
				{id:"t2", 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234"  ,"num":"1" },
				{id:"t3",'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224" ,"num":"1" },
				{id:"t3", 'name': 'Bart',  "email":"[email protected]",  "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库文件 自行引入

 

    代码如此简单，解决问题

    上效果图：