Question

美好的一天！

需要帮助ExtJS 4.1

有一个ComboBox。有一个网格。网格插头插入行扩展器。 ComboBox和Grid从一个数组中获取数据。

脚本的目的：在ComboBox中选择项目后 - 在网格中打开相应的rowexpander。也就是说，用户选择ComboBox«Alcoa Inc»并在Grid行中选择公司名称«Alcoa Inc»rowexplander。

问题：我无法转向表中的记录并调用事件expandbody / collapsebody

选择一个ComboBox后，我得到所选项目的ID，对应于Grid中的id记录，以及如何使用它，有什么吸引力 - 我无法理解。

grid.getView（）。 getNode（0） - 得到了如此的吸引力，但它并不能帮助我。

PS到目前为止，变量被声明为window.grid和window.simpleCombo以简化调试

剧本：

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', '../examples/ux');

Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.util.*',
    'Ext.ux.RowExpander',
    'Ext.selection.CheckboxModel',
    'Ext.tip.QuickTipManager',
    'Ext.ux.data.PagingMemoryProxy',
    'Ext.toolbar.Paging',
    'Ext.ux.SlidingPager',
    'Ext.form.field.ComboBox',
    'Ext.form.FieldSet'
]);

Ext.onReady(function(){

    Ext.tip.QuickTipManager.init();

    var myData = [
        ['0','3m Co',71.72,'9/1 12:00am'],
        ['1','Alcoa Inc',29.01,'9/1 12:00am'],
        ['2','Altria Group Inc',83.81,'9/1 12:00am'],
        ['3','American Express Company',52.55,'9/1 12:00am'],
        ['4','American International Group, Inc.',64.13,'9/1 12:00am'],
        ['5','AT&T Inc.',31.61,'9/1 12:00am'],
        ['6','Boeing Co.',75.43,'9/1 12:00am'],
        ['7','Caterpillar Inc.',67.27,'9/1 12:00am'],
        ['8','Citigroup, Inc.',49.37,'9/1 12:00am']
    ];

    Ext.define('Company', {
        extend: 'Ext.data.Model',
        idProperty: 'company',
        fields: [
           {name: 'id', type: 'int'},
           {name: 'company', type: 'string'},
           {name: 'price', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]        
    });

    Ext.define('State', {
    extend: 'Ext.data.Model',
    fields: [
        {type: 'int', name: 'id'},
        {type: 'string', name: 'name'}
    ]
});

    var store = Ext.create('Ext.data.Store', {
        model: 'Company',
        remoteSort: true,
        pageSize: 3,
        proxy: {
            type: 'pagingmemory',
            data: myData,
            reader: {
                type: 'array'
            }
        }
    });

    // create the data store for combobox
    function createStore() {
    return Ext.create('Ext.data.Store', {
        autoDestroy: true,
        model: 'State',
        data: myData
    });
}

    // create the Grid
    window.grid = Ext.createWidget('gridpanel', {
        title:'Sliding Pager',
        store: store,
        columns: [ {
                id:'company',
                text: 'Company',
                sortable: true,
                dataIndex: 'company',
                flex: 1
            },{
                text: 'Price',
                sortable: true,
                renderer: Ext.util.Format.usMoney,
                dataIndex: 'price',
                width: 75
            },{
                text: 'Last Updated',
                sortable: true,
                dataIndex: 'lastChange',
                width: 75
            }],
        stripeRows: true,
        height:320,
        minHeight: 160,
        width:700,
        frame:true, //+ 
        plugins: [{
            ptype: 'rowexpander',
        id: 'atata',
            rowBodyTpl : [
                '<p>Company: <b>{company}</b></p>',
                '<p><b>$ {price}</b></p>'
            ]
        }],
        collapsible: true,
        animCollapse: false, // end +
        resizable: {
            handles: 's'  
        },
        bbar: Ext.create('Ext.PagingToolbar', {
            pageSize: 3,
            store: store,
            displayInfo: true,
            plugins: Ext.create('Ext.ux.SlidingPager', {})
        })
    });

    grid.render('grid-example');

    function open_some_plus(val) {

    alert(grid.getView().getNode(val));

    }

    // Simple ComboBox using the data store
   window.simpleCombo = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Select a single state',
        renderTo: 'simpleCombo',
        displayField: 'name',
        width: 700,
        labelWidth: 400,
        store: createStore(),
        queryMode: 'local',
        typeAhead: true
    });

simpleCombo.on('select', function() {
    var v = simpleCombo.getValue();
    var record = simpleCombo.findRecord(simpleCombo.valueField || simpleCombo.displayField, v);
    var index = simpleCombo.store.indexOf(record);
    open_some_plus(index);
});
    store.load();

});

Html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sliding Pager Extension Example</title>

    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="shared/example.css" />

    <style type="text/css">
        body .x-panel {
            margin-bottom:20px;
        }
        .icon-grid {
            background-image:url(../shared/icons/fam/grid.png) !important;
        }
        .add {
            background-image:url(../shared/icons/fam/add.gif) !important;
        }
        .option {
            background-image:url(../shared/icons/fam/plugin.gif) !important;
        }
        .remove {
            background-image:url(../shared/icons/fam/delete.gif) !important;
        }
        .save {
            background-image:url(../shared/icons/save.gif) !important;
        }
    </style>

    <script type="text/javascript" src="../ext-all-debug.js"></script>
    <script type="text/javascript" src="app2.js"></script>
</head>
<body>
 <div id="simpleCombo"></div>
 <div id="mydiv_id"></div>
<br/>
<div id="grid-example"></div>
</body>
</html>

告诉我解决方案，即“挣扎在墙上”的第二天。

Answer 1

[opt]指定pluginId而不是id

使用getPlugin（）或grid.plugins[0]和“native”.toggleRow（）

plugins: [{
    ptype: 'rowexpander',
    pluginId: 'atata',
    rowBodyTpl : [
        '<p>Company: <b>{company}</b></p>',
        '<p><b>$ {price}</b></p>'
    ]
}],

function open_some_plus(val) {
    grid.getPlugin('atata').toggleRow(val)
}

Answer 2

此代码工作 s ：

//val = 5 for example
var store = grid.getStore();
var expander = grid.plugins[0];
var page = grid.store.currentPage;
var record = store.getAt(val);
expander.toggleRow(val);

ExtJS 4.1 Rowexpander和Grid。展开指定的item.extjs网格Rowexpander

2 个答案: