Javascript 之 Ext.Button 低级 _JavaScript

Javascript 之 Ext.Button 初级

主旨是做笔记和帮助新手内容很浅显

之前写过一个做大图标按钮的文章，今天主要想写的是图标的排列方式，横排、竖排、嵌入一个表头里等，排版比较浪费时间，今天为了整这东西，浪费了一个多小时，写这以后备用

代码

几个 button

	var production_mode_button = new Ext.Button({
		name: 'production_mode',
        id: 'production_mode',
		text:'Change to Production Mode',
        tooltip:'Change to Production Mode',
        //tooltipType : "title",
        icon:'ico/refresh.png',
        cls:'x-btn-text-icon',
		hidden:false,
        listeners: {
            click: function(btn) {
                mode_to_production(btn,server_name_all);
				closeWindow();
            }
        }
    });
	var delete_server_button = new Ext.Button({
		name: 'delete_server',
        id: 'delete_server',
		text:'Delete Server',
        tooltip:'Delete Server',
        //tooltipType : "title",
        icon:'ico/refresh.png',
        cls:'x-btn-text-icon',
		hidden:false,
        listeners: {
            click: function(btn) {
                delete_server(btn,server_name_all);
				closeWindow();
            }
        }
    });

    var server_def_form = new Ext.FormPanel({
        tbar:['Configure',{xtype:'tbfill'},maintenance_mode_button,production_mode_button,delete_server_button],
        labelWidth:120,
        frame:true,
        border:0,
        bodyStyle:'padding:20px 0px 0px 14px',
        labelAlign:"left" ,
        width:'100%',
        height:'100%',
        labelSeparator: ' '
        });

这个就很普通了

    var server_def_form = new Ext.FormPanel({
        tbar:['Configure',{xtype:'tbfill'},maintenance_mode_button,production_mode_button,delete_server_button],
        labelWidth:120,
        frame:true,
        border:0,
        bodyStyle:'padding:20px 0px 0px 14px',
        labelAlign:"left" ,
        width:'100%',
        height:'100%',
        labelSeparator: ' '
        });
4. button 2
	var panel1_1 = new Ext.Panel({
        width:'50%',
        height: 35,
        border:false,
        bodyBorder:false,
		collapsible:true,
        bodyStyle:'padding-top:10px;padding-right:5px;',
		items:[maintenance_mode_button]
    });
	var panel1_2 = new Ext.Panel({
        width:'50%',
        height: 35,
        border:false,
        bodyBorder:false,
		collapsible:true,
        bodyStyle:'padding-top:10px;padding-right:5px;',
		items:[production_mode_button]
    });
	var panel1_3 = new Ext.Panel({
        width:'50%',
        height: 35,
        border:false,
        bodyBorder:false,
		collapsible:true,
        bodyStyle:'padding-top:10px;padding-right:5px;',
		items:[delete_server_button]
    });
	var panel1 = new Ext.Panel({//
        width:'100%',
        height: 120,
        border:false,
        bodyBorder:false,
		layout:'column',
        bodyStyle:'padding-top:0px;padding-right:0px;',
		items:[panel1_1,panel1_2,panel1_3]
    });


        这应该就是一横排了
	// panel1.add(panel1_1);
	// panel1.add(panel1_2);
	// panel1.add(panel1_3);

附 button 的属性说明，这是根本

常用方法：
1. enable();激活按钮
2. disable();禁用按钮
3. destroy();消灭按钮
4. focus();按钮获取焦点
5. getText_r();获取按钮上的文本
6. hide();隐藏按钮
7. show();显示按钮
8. setText( String text );设置按钮上的文本
9. setVisible( Boolean visible );设置按钮是否隐藏
10. buttonName.purgeListeners();
//使用该方法，意思是清除所有的监听事件，所以当执行该句后就不会再执行listeners的click事件了。按钮就不会被隐藏了。
11. buttonName.setHandler(fn);
        //也可以通过这种方式设置handler事件:
        buttonName.setHandler(function(){Ext.Msg.alert('提示消息框','测试Button组件：setHandler事件！');});
12. buttonName.on(eventName,fn);
       //下面的事件可以自己测试下
        buttonName.on("click",function(){
            Ext.Msg.alert('提示消息框','测试Button组件：click事件！');
        });
         buttonName.on("mouseover",function(){
            Ext.Msg.alert('提示消息框','测试Button组件：mouseover事件！');
        });

        buttonName.on("mouseout",function(){
            Ext.Msg.alert('提示消息框','测试Button组件：mouseout事件！');
        });

mouseout : ( Button this, Event e ) ;
mouseover : ( Button this, Event e );
beforedestroy : ( Ext.Component this ) ;
beforehide : ( Ext.Component this ) ;
beforerender : ( Ext.Component this )
beforeshow : ( Ext.Component this )
click : ( Button this, EventObject e )
destroy : ( Ext.Component this )
disable : ( Ext.Component this )
enable : ( Ext.Component this )
hide : ( Ext.Component this )
show : ( Ext.Component this )
render : ( Ext.Component this )