Question

我的代码：

{
  border: 1,
  bodyStyle: 'margin:0 0 0 140px;',
  style: {
    borderColor: 'black',
    borderStyle: 'solid', //margin:'0 0 0 140' //margin-left: '140px' }, width: 140, name: 'comp', id:'compId', triggerAction: 'all', mode: 'local', store: new Ext.data.SimpleStore({
    fields: ['myId', 'displayText'],
    data: [
      [1, 'item1'],
      [2, 'item2']
    ]
  }), displayField: 'displayText', xtype: 'combo',
},

这里的ext js 2.3 bodyStyle没有附加到组合框中。任何人都建议如何解决这个问题？

由于

Answer 1

我认为这可能就是你所需要的。

{
    xtype: 'combo'
    style : 'margin-left: 140px; border: solid black 1px;',
    name: 'comp', 
    id:'compId', 
    triggerAction: 'all', 
    mode: 'local', 
    store: new Ext.data.SimpleStore({
        fields: ['myId', 'displayText'],
        data: [
          [1, 'item1'],
          [2, 'item2']
        ]
      }), 
    displayField: 'displayText',
    valueField : 'myId'

}

请注意，根据文档 - http://docs.sencha.com/extjs/2.3.0/#!/api/Ext.form.ComboBox

，没有bodyStyle配置选项

我删除了宽度选项，与margin-left样式属性（也是140px）一样，我认为你可能会看到奇怪的东西。

Answer 2

combo.js：

{xtype:'combobox', cls:'combo'}

combo.css：

.combo .x-boundlist-selected {
  background: #757575;
  background-image: -webkit-linear-gradient(top, #757575, #474747);
  background-image: -moz-linear-gradient(top, #757575, #474747);
  background-image: -ms-linear-gradient(top, #757575, #474747);
  background-image: -o-linear-gradient(top, #757575, #474747);
  background-image: linear-gradient(to bottom, #757575, #474747);
  border: solid #4e4e4e 2px;
  color: #ffffff;
  text-decoration: none;
}

.combo .x-boundlist-item {
  background: #757575;
  background-image: -webkit-linear-gradient(top, #757575, #474747);
  background-image: -moz-linear-gradient(top, #757575, #474747);
  background-image: -ms-linear-gradient(top, #757575, #474747);
  background-image: -o-linear-gradient(top, #757575, #474747);
  background-image: linear-gradient(to bottom, #757575, #474747);
  border: solid #4e4e4e 2px;
  color: #ffffff;
  text-decoration: none;
}

Answer 3

这是在2.3版中使用bodyStyle属性的代码之一这可能会对您有所帮助。

this.itemCombo= new Ext.form.ComboBox({
                name : "combooo",
                fieldLabel : "Status",
                displayField : 'combo',
                valueField : 'id',
                mode : 'local',
                triggerAction : 'all',
                hiddenName : "comboo",
                editable : false,
                width : 100,
                store : this.store,
                value : "0"
            });


    this.frmPanel = new Ext.form.FormPanel({
                bodyStyle : "padding:10px",
                border : true,
                autoScroll : true,
                layout : "table",
                layoutConfig : {
                    columns : 1,
                    style : "vertical-align:top"
                },
                items : [{
                    bodyStyle : "padding-right:10px",
                    xtype : "panel",
                    layout : "form",
                    border : false,
                    labelWidth : 110,
                    colspan : 2,
                    items : [this.item1,this.itemCombo]
                }]
            });

在ext js组合框中的CSS样式

3 个答案: