extjs combox布局的有关问题

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'

});
[解决办法]
你这个columnWidth设置的不对吧，这几个值加起来应该等于1，或者小于1也可以，你这几个0.9,0.9,0.5,0.5加起来太大了，调整一下看看
[解决办法]

CSS code

  每个columnWidth设置为.25这样4块大小一样 

 

查看更多 下一篇