List 森查触摸2。文本不符合列表项中的flex参数

我已经定义了这个Ext.dataview.component.ListItem，它将存储区中的一些数据呈现到一个列表中，但是我无法使第一个文本项遵守flex规则，这真的很烦人。它也不服从绝对宽度。我已经阅读了所有的文档，但我自己无法理解这一点

Ext.define('MyProgram.view.DataItem', {
extend : 'Ext.dataview.component.ListItem',
xtype  : 'basic-dataitem',

requires : [
    'Ext.Button',
    'Ext.Component',
    'Ext.layout.HBox',
    'Ext.field.Checkbox'
],
config : {
    text : {
        flex : 1//This text doesn't take one out of two space in my list item
    },
    moreText : {
        flex : 1//This text takes one out of one space???
    },

    dataMap :{
        getText : {
            setHtml : 'text'
        },
        getMoreText : {
            setHtml : 'moreText'
        }
    },

    layout : {
        //I want texts to obey hbox layout
        type : 'hbox',
        align: 'center'
    }
}
});

下面是我的Ext.dataview.List的代码，它使用了前面介绍的列表项MyProgram.view.DataItem：

---

看起来我想禁用默认的itemTpl，这样就可以防止sencha在容器之前添加原始htlm。我在列表视图中将itemTpl设置为，这样它就不会为我的模型使用默认的“{text}”模板，这会破坏我的样式

 Ext.define('MyProgram.view.Main', {
extend : 'Ext.dataview.List',
xtype  : 'main',
id: 'MainList',
requires : [
    'Ext.TitleBar',
    'Ext.dataview.List',
    'Ext.data.Store',
    'Ext.plugin.PullRefresh',
    'Ext.plugin.ListPaging',
    'MyProgram.view.DataItem'
],

config : {
    store : 'TodoItems',
    useSimpleItems : false,
    defaultType    : 'basic-dataitem',

    plugins : [
        {
            xclass          : 'Ext.plugin.PullRefresh',
            pullText : 'Pull down to refresh!'//Valid
            //pullRefreshText : 'Pull down to refresh!'//Deprecated
        },
        {
            xclass     : 'Ext.plugin.ListPaging',
            autoPaging : true
        }
    ],

    scrollable : {
        direction     : 'vertical',
        directionLock : true
    },

    items : [
        {
            docked : 'top',
            xtype  : 'titlebar',
            title  : 'List using list items'
        }
    ]
}
});