【原】提高篇:第十三篇,利用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());});
}

//还有一些没有罗列出来,基本上大同小异的.

 

posted @ 2008-10-22 15:56 殷良胜 阅读(1202) 评论(3)  编辑 收藏 网摘

  回复  引用  查看    
#1楼[楼主]2008-10-30 13:02 | 殷良胜      
  回复  引用  查看    
#2楼2009-03-19 18:22 | SilverNet      
楼主我想请问一下,tabpanel能够用icon吗?
因为我的tabpanel是动态生成的,所以它对应的iconCls应该如何生成呢?
敬请赐教.

  回复  引用    
#3楼2009-06-18 10:56 | СомёОл
--引用--------------------------------------------------
SilverNet: 楼主我想请问一下,tabpanel能够用icon吗?
因为我的tabpanel是动态生成的,所以它对应的iconCls应该如何生成呢?
敬请赐教.
--------------------------------------------------------
我做过,也是指定iconCls样式,自己写个样式,指定背景图片

发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1316832




相关文章:

相关链接: