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

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

代码

几个 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 的属性说明，这是根本

var buttonName = new Ext.Button({
               id:"buttonName",
               text:"Button组件基本用法",
               tooltip:"提示信息：Button组件基本用法",
               //提示信息,如果需要显示提示信息，需要使用Ext.QuickTips.init();       
               tooltipType:"title", //定义显示提示信息的类型，