如何访问ExtJs MVC中的插件

用户名

我正在尝试使用“添加新记录”按钮将工具栏添加到网格中。

Sencha提供的代码示例如下:

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor: 1,
        autoCancel: false
    });

    // create the grid and specify what field you want
    // to use for the editor at each column.
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        tbar: [{
            text: 'Add Employee',
            iconCls: 'employee-add',
            handler : function() {
                rowEditing.cancelEdit();

                // Create a model instance
                var r = Ext.create('Employee', {
                    name: 'New Guy',
                    email: '[email protected]',
                    start: new Date(),
                    salary: 50000,
                    active: true
                });

                store.insert(0, r);
                rowEditing.startEdit(0, 0);
            }
        }],
        //etc...
    });

示例:http : //dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/row-editing.html

由于我使用MVC模式,因此无法将其应用于代码。这是我的代码:

Ext.define('RateManagement.view.Grids.AirShipmentGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'AirShipmentGrid',
    plugins: [
        {
            clicksToMoveEditor: 1,
            autoCancel: false,
            ptype: 'rowediting'
        },
        'bufferedrenderer'
    ],
    tbar: [{
            text: 'Add Rate',
            //iconCls: 'rate-add',
            handler : function() {
                rowEditing.cancelEdit(); // rowEditing is not defined...

                // Create a model instance
                var r = Ext.create('Employee', {
                    name: 'New Guy',
                    email: '[email protected]',
                    start: new Date(),
                    salary: 50000,
                    active: true
                });

                store.insert(0, r);
                rowEditing.startEdit(0, 0); // rowEditing is not defined...
            }
        }],
    // etc...
});

如何访问“ rowEditing”插件以调用它的必需方法?

罗伯·博尔曼

按钮的处理程序将对按钮的引用作为第一个参数。您可以将该引用与componentquery一起使用,以获取对包含它的网格面板的引用。gridPanel有一个getPlugin方法,您可以使用该方法获取基于pluginId的插件。唯一需要确保的是为插件提供一个pluginId,否则Grid找不到它。这应该工作:

Ext.define('RateManagement.view.Grids.AirShipmentGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'AirShipmentGrid',
    plugins: [
        {
            clicksToMoveEditor: 1,
            autoCancel: false,
            ptype: 'rowediting',
            pluginId: 'rowediting'
        },
        'bufferedrenderer'
    ],
    tbar: [{
            text: 'Add Rate',
            //iconCls: 'rate-add',
            handler : function(button) {
                var grid = button.up('gridpanel');
                var rowEditing = grid.getPlugin('rowediting');
                rowEditing.cancelEdit(); // rowEditing is now defined... :)

                // Create a model instance
                var r = Ext.create('Employee', {
                    name: 'New Guy',
                    email: '[email protected]',
                    start: new Date(),
                    salary: 50000,
                    active: true
                });

                store.insert(0, r);
                rowEditing.startEdit(0, 0); // rowEditing is not defined...
            }
        }],
    // etc...
});

干杯,罗布

编辑:添加了完整的示例:-转到http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/grid/row-editing.html-打开javascript控制台-在其中粘贴以下代码

它将创建一个带有按钮的第二个网格,该按钮可找到行编辑插件并取消您的编辑。双击一行以开始编辑,单击tbar中的按钮将其取消。奇迹般有效。确保已指定pluginId,否则网格的getPlugin方法找不到它。

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*',
    'Ext.form.*'
]);

Ext.onReady(function() {
    // Define our data model
    Ext.define('Employee', {
        extend: 'Ext.data.Model',
        fields: [
            'name',
            'email', {
                name: 'start',
                type: 'date',
                dateFormat: 'n/j/Y'
            }, {
                name: 'salary',
                type: 'float'
            }, {
                name: 'active',
                type: 'bool'
            }
        ]
    });

    // Generate mock employee data
    var data = (function() {
        var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
            firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
            lastLen = lasts.length,
            firstLen = firsts.length,
            usedNames = {},
            data = [],
            s = new Date(2007, 0, 1),
            eDate = Ext.Date,
            now = new Date(),
            getRandomInt = Ext.Number.randomInt,

            generateName = function() {
                var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
                if (usedNames[name]) {
                    return generateName();
                }
                usedNames[name] = true;
                return name;
            };

        while (s.getTime() < now.getTime()) {
            var ecount = getRandomInt(0, 3);
            for (var i = 0; i < ecount; i++) {
                var name = generateName();
                data.push({
                    start: eDate.add(eDate.clearTime(s, true), eDate.DAY, getRandomInt(0, 27)),
                    name: name,
                    email: name.toLowerCase().replace(' ', '.') + '@sencha-test.com',
                    active: getRandomInt(0, 1),
                    salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
                });
            }
            s = eDate.add(s, eDate.MONTH, 1);
        }

        return data;
    })();

    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        // destroy the store if the grid is destroyed
        autoDestroy: true,
        model: 'Employee',
        proxy: {
            type: 'memory'
        },
        data: data,
        sorters: [{
            property: 'start',
            direction: 'ASC'
        }]
    });

    // create the grid and specify what field you want
    // to use for the editor at each column.
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [{
            header: 'Name',
            dataIndex: 'name',
            flex: 1,
            editor: {
                // defaults to textfield if no xtype is supplied
                allowBlank: false
            }
        }, {
            header: 'Email',
            dataIndex: 'email',
            width: 160,
            editor: {
                allowBlank: false,
                vtype: 'email'
            }
        }, {
            xtype: 'datecolumn',
            header: 'Start Date',
            dataIndex: 'start',
            width: 105,
            editor: {
                xtype: 'datefield',
                allowBlank: false,
                format: 'm/d/Y',
                minValue: '01/01/2006',
                minText: 'Cannot have a start date before the company existed!',
                maxValue: Ext.Date.format(new Date(), 'm/d/Y')
            }
        }, {
            xtype: 'numbercolumn',
            header: 'Salary',
            dataIndex: 'salary',
            format: '$0,0',
            width: 90,
            editor: {
                xtype: 'numberfield',
                allowBlank: false,
                minValue: 1,
                maxValue: 150000
            }
        }, {
            xtype: 'checkcolumn',
            header: 'Active?',
            dataIndex: 'active',
            width: 60,
            editor: {
                xtype: 'checkbox',
                cls: 'x-grid-checkheader-editor'
            }
        }],
        renderTo: 'editor-grid',
        width: 600,
        height: 400,
        title: 'Employee Salaries',
        frame: true,
        tbar: [{
            text: 'Cancel editing Plugin',
            handler: function(button) {
                var myGrid = button.up('grid');
                var myPlugin = myGrid.getPlugin('rowediting')

                myPlugin.cancelEdit();
                console.log(myPlugin);
            }
        }],
        plugins: [{
            clicksToMoveEditor: 1,
            autoCancel: false,
            ptype: 'rowediting',
            pluginId: 'rowediting'
        }]
    });
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Extjs中访问父母宽度?

来自分类Dev

如何在Asp.net MVC中实现插件/插件?

来自分类Dev

如何访问ExtJS中从aspx.cs页设置的cookie

来自分类Dev

如何在 MVC 4 中包含基于 JavaScript 的插件?

来自分类Dev

如何从方法中访问jQuery插件变量?

来自分类Dev

如何在插件中访问Vue $ refs?

来自分类Dev

如何从方法中访问jQuery插件变量?

来自分类Dev

如何在ExtJS 6中禁用Aria可访问性警告

来自分类Dev

在插件脚本中访问 Cordova 插件变量

来自分类Dev

如何从插件访问组织?

来自分类Dev

从ExtJS 5.1中的方法访问Singleton值

来自分类Dev

无法访问ExtJS中的关联模型

来自分类Dev

如何从cordova插件中的服务中访问活动?

来自分类Dev

将日历插件添加到MVC 5 / Bootstrap 3中,不确定如何导入文件

来自分类Dev

将日历插件添加到MVC 5 / Bootstrap 3中,不确定如何导入文件

来自分类Dev

如何在Extjs中使用插件

来自分类Dev

如何从Angular控制器中的Phonegap插件访问值?

来自分类Dev

如何在测试中访问插件选项?(Python鼻子)

来自分类Dev

如何在Firefox插件脚本中访问DOM?

来自分类Dev

如何从Wordpress插件目录中访问静态文件

来自分类Dev

Brightscript插件:如何在processEvent中访问用户变量

来自分类Dev

如何从插件内部访问查询中给定的上下文?

来自分类Dev

如何在node.js插件中访问Local <String>

来自分类Dev

如何从Django CMS占位符中的插件访问模板块

来自分类Dev

如何防止MVC Controller中的并发访问?

来自分类Dev

如何防止MVC Controller中的并发访问?

来自分类Dev

如何在extjs中添加“€”?

来自分类Dev

如何过滤extjs中的存储?

来自分类Dev

如何访问hapi插件名称?

Related 相关文章

热门标签

归档