Ext4.x开发常用代码片段

1.当store取不到数据时仍然让grid正常提示“未找到任何数据”,应该在store中加入如下代码

listeners:{
        load:{
            scope: this, 
            single: false,
            fn:function(store,records,success,operation,e){
                if(!success){
  
                  //没有数据

                  store.removeAll();

} } } }

 2.修改grid的行的样式，在样式文件中到ext-theme-classic-all.css，做如下修改【修改x-grid-cell属性】

.x-grid-cell {
    line-height:30px;
    padding:5px;
    color: null;
    font: normal 11px/13px tahoma, arial, verdana, sans-serif;
    background-color: 0A9DFF;
    border-color: #ededed #d0d0d0 #ededed #d0d0d0;
    border-style: solid
}

效果：

3.修改grid的样式文件时得当鼠标放在行上市整行字体加粗，在样式文件中到ext-theme-classic-all.css【修改x-grid-cell属性】

.x-grid-row-over .x-grid-td {
    border-bottom-style: solid;
    border-bottom-color: #ddd;
    font-weight: bold;
}

运行效果：

4.Grid鼠标右键菜单

 

itemcontextmenu:function(view,record,item,index,e,eOpts){
                    e.preventDefault();//屏蔽默认的右键选项
                    Ext.create('Ext.menu.Menu',{
                        plain:true,
                        baseCls:'x-plain',
                        items : [
                        {
                            text : '换房',
                            handler : function(btn){}
                        },{
                            text : '退房',
                            handler : function(btn){
                        }
                        }]
                    }).showAt(e.getXY());;
                }

 

效果：

4.修改Panel的title样式

 panel.header.setStyle( {  
       color: '#F00',  //设置颜色  
       background : '',  //去掉默认的背景  
      'background-color': '#666'  //设置背景色  
   });  

 

有待更新...