Question

我有一个控制器和一个视图，并且想要在选择项目时从控制器推一条线。在哪里说onItemSelect：那是我需要打电话的地方，不知道怎么样...... 谢谢。

控制器是这样的：

Ext.define('Application.controller.ItemController', {
// Extend basic controller object
extend: 'Ext.app.Controller',
// Attach store classes to this controller
stores: ['Items'],
// Attach model classes to this controller
models: ['Item'],
// ..and last but not least - the view classes
views: ['item.List', 'item.Show'],
// Refs parameter defines references to certain
// instances of components pointed by selector
refs: [
    {
        // Ref determines the name of the automagic
        // this.get[ref-goes-here] method that returns
        // instance of certain component
        ref : 'itemShowDesc',
        // Select #item-description component in
        // item.Show view
        selector: 'itemShow > #item-description'
    }
],
// when including the controllers in your application, 
// the framework will automatically load the controller 
// and call the init method on it
init: function() {
    this.control({
        'itemList' : {
            // Action to be performed on select
            select: this.onItemSelect
        }
    });
},
onItemSelect: function (selModel, selection) {
    // Executed only when selection is a leaf
    (selection.data.leaf) ? this.getItemShowDesc().addRow(selection.raw.description,'','','','','','') : null;
}

}）;

并且观点是这样的：

Ext.define('Application.view.item.Show', {
extend: 'Ext.grid.Panel',
alias : 'widget.itemShow',
requires: [
    'Ext.selection.CellModel',
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.form.*',
    'Application.model.Item'
],
xtype: 'cell-editing',

title: 'Favorite Books',
frame: true,

initComponent: function() {
    this.cellEditing = new Ext.grid.plugin.CellEditing({
        clicksToEdit: 1
    });

    Ext.apply(this, {
        width: 680,
        height: 350,
        plugins: [this.cellEditing],
        store: new Ext.data.Store({
            // destroy the store if the grid is destroyed
            autoDestroy: true,
            model: Application.model.Item,
            proxy: {
                type: 'ajax',
                // load remote data using HTTP
                url: 'resources/data/grid/books.xml',
                // specify a XmlReader (coincides with the XML format of the returned data)
                reader: {
                    type: 'xml',
                    // records will have a 'plant' tag
                    record: 'book'

                }
            },
            sorters: [{
                property: 'common',
                direction:'ASC'
            }]
        }),
        columns: [{
            header: 'Book Id',
            dataIndex: 'item_id',
            width: 100

        }, {
            header: 'Author',
            dataIndex: 'author',
            width: 100
        },  {
            header: 'Title',
            dataIndex: 'title',
            width: 250
        },{
            header: 'Description',
            dataIndex: 'description',
            width: 495
        },{
            header: 'Price',
            dataIndex: 'price',
            width: 70,
            align: 'right',
            renderer: 'usMoney'               
        },{
            xtype: 'actioncolumn',
            width: 30,
            sortable: false,
            menuDisabled: true,
            items: [{
                icon: 'resources/images/icons/delete.gif',
                tooltip: 'Delete Plant',
                scope: this,
                handler: this.onRemoveClick
            }]
        }],
        selModel: {
            selType: 'cellmodel'
        }

    });

    this.callParent();

    this.on('afterlayout', this.loadStore, this, {
        delay: 1,
        single: true
    })
},
addRow: function(inItemID,inDisplay,inSex,inAuthor,inTitle,inDescription,inPrice){
     // Create a record instance through the ModelManager
    var r = Ext.ModelManager.create({
        item_id: inItemID,
        display: inDisplay,
        sex: inSex,
        author: inAuthor,
        title: inTitle,
        description: inDescription,
        price: inPrice
    }, 'Item');
    store.insert(0, r);
    cellEditing.startEditByPosition({row: 0, column: 0});
}
, 

loadStore: function() {
    this.getStore().load({
        // store loading is asynchronous, use a load listener or callback to handle results
        callback: this.onStoreLoad
    });
},

onStoreLoad: function(){
    Ext.Msg.show({
        title: 'Store Load Callback',
        msg: 'Favorites were loaded, data available for processing',
        icon: Ext.Msg.INFO,
        buttons: Ext.Msg.OK
    });
},


onRemoveClick: function(grid, rowIndex){
    this.getStore().removeAt(rowIndex);
}

}）

Answer 1

您itemShowDesc的参考号码正在选择itemShow的子组件。因此，当您执行this.getItemShowDesc().addRow()时，您会在 #item-description 上调用方法，而不是Application.view.item.Show类。

如何从ExtJS4控制器调用addRow视图方法

1 个答案: