EXTJS学习系列提高篇:第十三篇(转载)作者殷良胜,利用Ext实现Icon小图标的部分用法

还是先看看效果图吧 图片总是在恰当的时候可以说明一切

//Button图标         
        

var btn = new Ext.Button
 ({
       text:"button图标",cls: 'x-btn-text-icon',icon:"../Images/Menus/house.png",
       renderTo:"btnIcon"
});

//Menu图标

var  menu = new Ext.menu.Menu
({
     items:
     [
        {  id: 'close',icon:"../Images/Menus/house.png",text: '关闭',handler : function(){alert('good');}},
        {  id: 'open',icon:"../Images/Menus/house.png",text: '打开',handler : function(){alert('good');}}  
     ]
});

//Toolbar图标

var toolbar = new Ext.Toolbar
({
    id: 'tbControls',renderTo:"toolbarIcon",width:200,
    items:
    [
        new Ext.Toolbar.Button
        ({
                id: 'btnChangePassword',text: '中国',
                icon: '../Images/Menus/house.png',                       
                cls: 'x-btn-text-icon'
               
        }),
        new Ext.Toolbar.Button
        ({
                id: 'btnLogOut',text: '美国',                       
                icon: '../Images/Menus/house.png',
                cls: 'x-btn-text-icon'
        }),
        {xtype:"button",text:"加拿大",cls: 'x-btn-text-icon',icon: '../Images/Menus/house.png'}
    ]
});

 //Panel 图标

var panel = new Ext.Panel
({
    iconCls :"panel_icon",title:"Panel图标",height:200,contentEl:"Img1"
});

 //TabPanel图标的添加 

 

var tabPanel = new Ext.TabPanel
({
   x:500,y:200,width:300,height:200,activateItem:0,
   items:[{title:"工作",iconCls:"panel_icon"},{title:"休闲",iconCls:"panel_icon"}],
   renderTo:"BuildMenu4"
});

//Window图标

var win = new Ext.Window
({
    title:"测试窗口",x:0,y:100,width:300,height:300,iconCls :"panel_icon",              
    contentEl:"leftImg"
});
win.show();

 //contextmenu图标
 

function BuildMenu()
{
     var menu = new Ext.menu.Menu
     ({
          items:
          [
              {text:"添加",icon:"../Images/Menus/house.png"},
              {text:"编辑",icon:"../Images/Menus/house.png"},
              {text:"删除",icon:"../Images/Menus/house.png"},
              {text:"取消",icon:"../Images/Menus/house.png"},
              {text:"退出",icon:"../Images/Menus/house.png"}
          ]
     });
     var tabPanel = new Ext.TabPanel
     ({
           x:500,y:200,width:200,height:100,activateItem:0,
           items:[{title:"主题",iconCls:"panel_icon"}],
           renderTo:"BuildMenu4"
     });
     tabPanel.on("contextmenu",function(main,tab,e){e.preventDefault();menu.showAt(e.getPoint());});
}