日期:2014-05-16  浏览次数:20572 次

extjs combox布局的问题
JScript code

var provinces = [[1, '北京'], [2, '上海']];   
    var cities = new Array();   
    cities[1] = [[11, '海淀'], [22, '东城']];   
    cities[2] = [[33, '黄埔'], [44, '浦东'], [55, '静安']];   

    var comboProvinces = new Ext.form.ComboBox({   
    store : new Ext.data.SimpleStore({   
        fields : ["provinceId", "provinceName"],   
        data : provinces   
    }),   
    listeners : {   
        select : function(combo, record, index) {   
            comboCities.clearValue();   
            comboCities.store.loadData(cities[record.data.provinceId]);   
        }   
    },   
    valueField : "provinceId",   
    displayField : "provinceName",   
    mode : 'local',   
    forceSelection : true,   
    blankText : '请选择省份',   
    emptyText : '请选择省份',   
    hiddenName : 'provinceId',  
    editable : false,   
    triggerAction : 'all',   
    allowBlank : true,   
    fieldLabel : '所在省市',
    name : 'provinceId',
    anchor:'90%'
});   
var comboCities = new Ext.form.ComboBox({   
    store : new Ext.data.SimpleStore({   
        fields : ["cityId", 'cityName'],   
        data : []   
    }),   
    valueField : "cityId",   
    displayField : "cityName",   
    mode : 'local',   
    forceSelection : true,   
    blankText : '选择地区',   
    emptyText : '选择地区',   
    hiddenName : 'cityId',   
    editable : false,   
    triggerAction : 'all',   
    allowBlank : true,   
    //fieldLabel : '选择地区',
    labelWidth:0,
    name : 'cityId',
    anchor:'90%'
});
    
    new Ext.form.FormPanel({
        title:'添加用户',
        width:350,
        id:'frm',
        renderTo:'myForm',
        frame:true,
        bodyStyle:"padding:5px 5px 0",
        labelAlign:'right',
        labelWidth:60,
        layout:'form',
        items:[{
            layout:'column',
            items:[{
                columnWidth:.9,
                layout:'form',
                items:[{
                    xtype:'textfield',
                    fieldLabel:'用户名',
                       id:'username',
                       anchor:'95%'      
                }]
            },{
                columnWidth:.9,
                layout:'form',
                items:[{
                    xtype:'textfield',
                    fieldLabel:'密 码',
                    inputType:'password',
                    id:'userpass',
                    anchor:'95%'
                }]
            },{
                columnWidth:.5,
                layout:'form',
                items:[comboProvinces]
            },{
                columnWidth:.5,
                layout:'form',
                items:[comboCities]
            }]
            
        }],
        buttons:[{text:"确定",handler: submitForm},{text:"取消"}],
        buttonAlign:'center'
    });


2个combobox的间距很大,如何调到较小的间距?

------解决方案--------------------
Html:
-------------------------

<table cellpadding=3>
<tr>
<td style="font-size:9pt;">
<input type="text" id="combox1" size="20"/>
</td>
<td>
<input type="text" id="combox2" size="20"/>
</td>
</tr>
</table>
--------------------------------------
JS:
var combox1=new Ext.form.ComboBox({
emptyText:'请选择一个省份....',
applyTo: 'combox1'
});
var combox2=new Ext.form.ComboBox({
emptyText:'请选择一个县区....',
applyTo: 'combox2'