高分求救，一个简单的EXT布局问题，请帮忙呀。。。。多谢了。

Question

怎样可以做到把一个图片按钮放到文本框紧后面呢，默认就放到下面了请EXT高手指教
谢谢了。

Answer 1

<input type="text" name="T1" size="20"><button name="B1">
<img border="0" src="file:///D:/chen/project/iphone/WebRoot/images/desk.gif" width="87" height="26"></button>这会放在下面，你是没有足够的长度吧。

Answer 2

var selectplate = new Ext.form.ComboBox({
xtype : 'combo',
fieldLabel : '查询方式',
mode : 'local',
id:'selectplate',                         
name: 'POWERSHOW',
            hiddenName: 'POWER',   
editable : false,
width:130,
allowBlank : false,
store : new Ext.data.SimpleStore({
data : [['工单号', '工单号'], ['客户编号', '客户编号'],['客户编号+工单类型', '客户编号+工单类型'], ['开单时间', '开单时间'],['制菲林','制菲林']],
fields : ['text', 'value']
}),
displayField : 'text',
valueField : 'value',
mode : 'local',      
triggerAction : 'all',  
emptyText : '请选择查询方式',  
 selectOnFocus:true,   
 
});
var infodate=new Ext.form.DateField({
allowBlank : false,
editable : false,
hidden:true,
emptyText : '开单时间'
});
var text_search_plate = new Ext.form.TextField({   
name : 'textSearchPlate',
width : 90,
emptyText : '工单号',
hidden:true 
 
});var text_search_custom = new Ext.form.TextField({
name : 'textSearchPlate',
width : 90,
emptyText : '客户编号',
hidden:true 
 
});var text_search_type = new Ext.form.TextField({
name : 'textSearchPlate',
width : 90,
emptyText : '工单类型',
hidden:true 
});var text_search_film = new Ext.form.TextField({
name : 'textSearchPlate',
width : 90,
emptyText : '菲林类型',
hidden:true 
});
 var searchPlate = function() {
ds_plate.baseParams.conditions = text_search_plate.getValue(); 
ds_plate.load({params : {start : 0,limit : 20}});
}var btn_search_plate = new Ext.Button({
text : '查询',
iconCls : 'icon-search',
handler : searchPlate,
disabled:true
});
 
 var store_worksheet = new Ext.data.ArrayStore({
    fields: [
       {name: 'worksheet_id',type:'string' },
       {name: 'guest_id',      type: 'string'},
       {name: 'guest_no',     type: 'string'},
       {name: 'delivery_order_type',  type: 'string'},
       {name: 'delivery_order_id', type: 'string'},// dateFormat: 'n/j h:ia'}  可以转换时间格式,
       {name: 'production_no',  type: 'string'},
       //可以变成链接
       {name: 'state',  type: 'string'},
       {name: 'operate',  type: 'string'},
       {name: 'info',  type: 'string'},
    ]
});store_worksheet.loadData(myData_worksheet);var cm_worksheet = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
header : '工单号',
width : 120,
dataIndex : 'worksheet_id',
sortable : true,
editor : new Ext.form.TextField({
allowBlank : false,
maxLength : 50
})
}, {
header : '客户编号',
width : 120,
sortable : true,
 
 
}, {
header : '客户订单号',
width : 120,
sortable : true,
 
 
},{
header : '出货方式',
width : 85,
 
sortable : true 
},  {
header : '出货单号',
width : 150,
 
sortable : true  
 
}, {
header : '制作号',
width : 150,
 
resizable : false,
sortable : true 
 },{
header : '状态',
width : 100,
dataIndex : 'state',
resizable : false,
sortable : true 
 
   }
 
   ]);cm_worksheet.defaultSortable = false;//combox联动下拉菜单 使用暂时数据
var worksheet_Conditions = [[1,'工单号'],[2,'客户编号'],[3,'工单状态'],[4,'工单类型']];var condition  = new Array();
condition[1] = [];
condition[2] = [];
condition[3]=  [[11,'等待进行'],[22,'正在进行'],[33,'已出货'],[44,'完成未出货' ],[55,'暂停'],[66,'作废']],
condition[4]=  [[77,'B单'],[88,'BC单'],[99,'BX单'],[00,'XX单'] ]var comboConditions = new Ext.form.ComboBox({

    store: new Ext.data.SimpleStore( {
        fields: ["Id", "ConditionName"],
        data: worksheet_Conditions
        }),
        
        listeners:{
        select:function(combo, record,index){
    
    comboconditions.clearValue();
    comboconditions.store.loadData(condition[record.data.Id]);
        
      }
    },
    valueField :"Id",
    displayField: "ConditionName",
    mode: 'local',
    forceSelection: true,
    blankText:'按条件筛选',
    emptyText:'按条件筛选',
    hiddenName:'Id',
    editable: false,
    triggerAction: 'all',
    allowBlank:true,
    fieldLabel: '按条件筛选',
    name: ' Id',
    width: 150
 });var comboconditions = new Ext.form.ComboBox({
store: new Ext.data.SimpleStore( {
        fields: ["cId",'conditionsName'],
        data:[]
        }),
        valueField :"cId",
        displayField: "conditionsName",
        mode: 'local',
        forceSelection: true,
        blankText:'关键字',
        emptyText:'关键字',
        hiddenName:'cId',
        editable: false,
        triggerAction: 'all',
        allowBlank:true,
        fieldLabel: '关键字',
        name: 'cId',
        width: 150
}); //
             
var worksheet_searchpanel = new Ext.grid.EditorGridPanel({
iconCls : 'icon-grid',
loadMask : {msg : '数据加载中...'},    
region : 'center',
store: store_worksheet,
cm : cm_worksheet,
// ds : ds_company,
sm : new Ext.grid.RowSelectionModel({singleSelect : true}),
enableColumnMove : false,
trackMouseOver : false,
frame : true,
clicksToEdit : 1,
  tbar : ["工单种类：",{
        xtype: 'radiogroup',
        columns: [60,60,50,50,50],
        items: [
            {boxLabel: '未进行', name: 'range', checked: true},
            {boxLabel: '进行中', name: 'range'},
            {boxLabel: '暂停', name: 'range'},
            {boxLabel: '作废', name: 'range'},
            {boxLabel: '出货', name: 'range'}
        ]
    },'-',"选择查询方式：",selectplate,'-',text_search_plate,text_search_custom,text_search_type,infodate,text_search_film ,btn_search_plate],   bbar : new Ext.PagingToolbar({
pageSize : 20,
store : store,
displayInfo : true,
displayMsg : '第 {0} - {1} 条  共 {2} 条',
emptyMsg : "没有记录"
}),
listeners : {
'afteredit' : function(e) {
Ext.Ajax.request({
url : 'updateCompany.action',
params : {
fieldName : e.field,
fieldValue : e.value,
companyId : e.record.data.companyId
},
success : function() {
// alert("数据修改成功！");
},
failure : function() {
Ext.Msg.show({
title : '错误提示',
msg : '修改数据发生错误,操作将被回滚!',
fn : function() {
e.record.set(e.field, e.originalValue);
},
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
}
});
}
}
});worksheet_searchpanel.addListener('rowclick', rowclick);var win_process;function rowclick(grid, rowindex, e){  
  grid.getSelectionModel().each(function(rec){  
//      alert("rowindex");   默认的第一行是0  
       if(!win_process){
       win_process = new Ext.Window({
                width:770,
                  autoHeight:true,
                closeAction:'hide',
                plain: true,
                items: new Ext.TabPanel({
                autoTabs:true,
                activeTab:0,
                deferredRender:false,
                 items:
                      [
                        {title:'工单信息' ,items:worksheetinfo_panel},    
                        {title:'生产协调',items:production_coordination_panel},
                        {title: '调图分色',items:diagram_panel},    
                      {title: '印前制作',items:prepress_make_panel},  
                      {title:'生产审核',items:technology_detection_panel},    
                      {title:'菲林输出',items:film_out_panel} ,
                          {title:'制版',items:plate_panel},
                          {title:'成品检测',items:production_aduit_panel},
                          {title:'出货',items:shipping_panel}
                          
                          ]
                 })   });
  } 
       win_process.show(this);
      });  
  }  var sh_worksheetquery = { 
title : '查询工单',
id : 'sh_worksheetquery',
border : false,
closable: true,
layout : 'border',
items : [worksheet_searchpanel]
};code]这个是我做的一个页面，有你要的效果，[code=JScript]var btn_search_plate = new Ext.Button({
text : '查询',
iconCls : 'icon-search',
handler : searchPlate,
disabled:true
});找到这段代码，就是按钮的图片，当然，你在项目中需要有这么一张图片“icon-search” 其实在extajs的发行包下面有很多的例子，简单明了。

Answer 3

首先谢谢你的热心。
你这样写肯定是可以的，但是我现在使用的是EXT，它把这些标签全部封装好了，不能像你这样获取了。

Answer 4

首先长度要设置好，有足够的空间，组件的设置里面不能有display:block；这样会自动在下面，可以将文本框设置为float:left，定位这块的基础知识还是挺多的，我也被纠缠了一段时间。

Answer 5

谢谢你给了这么多代码。
但是我找不到我想要的东西
我就是想问下是设置什么属性或者样式就可以简单是实现把按钮放到文本框后面去，而不是默认的放到文本框的下面去了。我给一段代码，这样就自动放到文本框下方去了。
var fp = new Ext.FormPanel({
        layout:'form',
        renderTo: 'center1',
        fileUpload: true,
        collapsible:false,
        width: 594,
        frame: true,
        title: '基本信息设置',
        autoWidth:true,
        autoHeight: true,
        bodyStyle: 'padding: 10px 10px 0 10px',
        labelWidth: 70,
        buttonAlign:'center',
        labelAlign:'right',
        defaults: {
            anchor: '70%',
            allowBlank: true
        },
        items: [{
            xtype: 'textfield',
            name:'form-time',
            allowBlank:true,
             msgTarget: 'under',
             regex:/^[1-9]+[0-9]*]*$/,
            invalidText:'请输入正确的时间！',
            fieldLabel: '时长(小时)'
        },{
            xtype: 'textfield',
            name:'form-file',
            id: 'form-file',
            emptyText: '请选择路径...',
            fieldLabel: '目 录',
            msgTarget:'under',
            invalidText:'请选择路径！',
            readOnly:true
        }
               ],
        buttons: [{
   iconCls:'upload-icon',
   handler:function()
   {
      Browse('localPath');
   }
        },{
            text: '下一步',
            handler: function(){
                                 Ext.getCmp('c1').setDisabled(true);
Ext.getCmp('c2').setDisabled(false);
tab.setActiveTab(1);               
            }
        }]//这样写按钮就自动放到textfield下方了，我想紧跟着textfield放到后面是不是有其他的方式    });

Answer 6

可以试试margin，layout，padding..这些属性