以 svg 图片（highart）为值的 ExtJs Combobox

Question

我正在使用 ExtJs 4.2.1 并想用这样的行做组合框：http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/

我已经将 svg 图片放到下拉菜单中，但我实际上并不了解如何设置值。

值始终为空

model:

Ext.define('MyProj.model.GraphLineType', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'showName', type: 'string'},
        {name: 'chartName', type: 'string'}
    ]
});

store:

Ext.define('MyProj.store.GraphLineType', {
    extend: 'Ext.data.Store',
    model: 'MyProj.model.GraphLineType',
    autoLoad: false,
    data:[
        {showName: 'Solid', chartName: 'Solid'},
        {showName: 'ShortDash', chartName: 'ShortDash'},
        {showName: 'ShortDot', chartName: 'ShortDot'},
        {showName: 'ShortDot', chartName: 'ShortDashDot'},
        {showName: 'ShortDashDotDot', chartName: 'ShortDashDotDot'},
        {showName: 'Dot', chartName: 'Dot'},
        {showName: 'Dash', chartName: 'Dash'},
        {showName: 'LongDash', chartName: 'LongDash'},
        {showName: 'DashDot', chartName: 'DashDot'},
        {showName: 'LongDashDot', chartName: 'LongDashDot'},
        {showName: 'LongDashDotDot', chartName: 'LongDashDotDot'}
    ]
});


somewhere in view:
...
...
...
initComponent: function() {
    var me = this;
    this.items = [
        {
            xtype: 'combobox',
            fieldLabel: 'Line type',
            store: 'GraphLineType',
            labelWidth: 140,
            width: 320,
            labelAlign: 'left',
            allowBlank: false,
            queryMode: 'local',
            step: 1,
            id: 'highchart_lines_combobox',
            hidden: false,
            valueField: 'chartName',
            tpl: new Ext.XTemplate('<tpl for="."><div class="x-boundlist-item" unselectable="on" id="combobox_item_{chartName}"></div></tpl>')
        },
...
...
...



somewhere in controller:

...
...
...
'#highchart_lines_combobox': {
            expand: function (field, eOpts) {
                var combobox = Ext.getCmp("highchart_lines_combobox");
                var store = combobox.getStore();
                if (!combobox.BEEN_EXPANDED) {
                        for (var i= 0, len=store.data.items.length; i<len; i++) {
                        var lineStyle = store.data.items[i].raw.chartName;
                        var elem = Ext.query("#combobox_item_"+lineStyle);
                        var renderer = new Highcharts.Renderer(elem[0], 380, 15);
                        renderer.path(['M', 2, 7, 'l', 380, 0]).attr({'stroke-width': 2, stroke: 'black', dashstyle: lineStyle}).add();
                    }
                }
                combobox.BEEN_EXPANDED = true;
            },
            change: function( cls, newValue, oldValue, eOpts ) {
                HERE I NEET TO SET VALUE
                PLEASE HELP!!!
            }
        }
...
...
...

也许有一种更好的方法可以使用 highcharts svg 作为值来做组合框。 请帮忙！

Answer 1

valueField 是chartName 所以你可以打电话

combo.setValue('LongDash');

例如。

注意：您不需要在更改事件中设置新值，因为组合已经拥有它并且处理函数将其作为newValue 参数接收。