Question

我想在Ext App中与控制器通信视图，但我无法访问控制器，我在树状面板内的tbar中有一个按钮，但按钮不执行控制器...

我有这段代码：

观点：

Ext.require('Ext.slider.*');
Ext.define('app.view.ViewTablaContenido', {
extend: 'Ext.window.Window',
id: 'viewTablaContenido',
shadow: false, 
alias: 'widget.tablaContenido',  

initComponent: function() {

    var anchoPanatallaRes = window.screen.width;
    var altoPantallaRes = window.screen.height;

    var anchoTOC = 330;
    var altoTOC = 473;

    if (anchoPanatallaRes <= 1024) {
        anchoTOC = 282;
        altoTOC = 373;
    }
    var treeStore = Ext.getStore('capa');

    function addUrl(value, p, record) {
        return value ? Ext.String.format(
                '<a href="'+value+'"target="_blank"'+'>Ver metadato'+'</a>'
        ):'';
    }

    var tree = Ext.create('Ext.tree.Panel', {
        title: '',
        id: "arbolTabla", 
        width: anchoTOC,
        height: altoTOC,            
        reserveScrollbar: true,
        loadMask: true,
        useArrows: true,
        rootVisible: false,
        store: 'capa',
        allowDeselect : true,
        border : true,
        animate: true,
        listeners: {
            checkchange: function(node, checked, eOpts) {
            },
            select: function( record, index, eOpts ){
                console.log('Elemento seleccionado:', record, index, eOpts);
            },
            beforedeselect: function( record, index, eOpts ){
                console.log("Elemento deseleccionado :", record);
            }
        },
        columns: [{
            xtype: 'treecolumn',
            text: 'Capa',
            flex: 5,
            sortable: true,
            dataIndex: 'titulo'
        },{
            text: 'Metadato',
            flex: 2,
            dataIndex: 'url',
            renderer: addUrl
        }],

        tbar: [{
            labelWidth: 100,
            xtype: 'triggerfield',
            fieldLabel: 'Nombre capa:',
            triggerCls: 'x-form-clear-trigger',
            onTriggerClick: function() {
                this.reset();
                treeStore.clearFilter();
                this.focus();
            },
            enableKeyEvents: true,
            listeners: {
                keyup: function() {
                    var field = tree.down('textfield'),
                    v;

                    try {
                        v = new RegExp(field.getValue(), 'i');
                        treeStore.filter({
                            filterFn: function(node) {
                                var children = node.childNodes,
                                len = children && children.length,

                                visible = node.isLeaf() ? v.test(node.get('nombre')) : false,   i;

                                for (i = 0; i < len && !(visible = children[i].get('visible')); i++);

                                return visible;
                            },
                            id: 'campoFiltroCapa'
                        });
                    } catch (e) {
                        field.markInvalid('Expresión no valida');
                    }
                },
                buffer: 250
            }
        }, {
            xtype : 'button',
            text: 'Click',
            id : 'btnApagarCapas',
            action: 'apagarCapas',
            tooltip : 'Apagar todas las capas',
            padding:0
        }]
    });


    Ext.apply(this, {
        title: 'TABLA CONTENIDO',           
        constrain: true,
        header : {
            titlePosition : 2,
            titleAlign : 'center'
        },
        closable : false,
        width : anchoTOC,
        height : altoTOC,
        x : 20,
        y : 270,
        layout : 'fit',
        animCollapse : true,
        collapsible : true,
        collapseDirection : Ext.Component.DIRECTION_LEFT,
        listeners : {
            collapse : function(p) {
            }, 
            render: function(ev,eOpts){

            }
        },
        items: [tree,],
    });
    this.callParent(arguments);
}
});

控制器：

Ext.define('app.controller.ControlTablaContenido', {
extend: 'Ext.app.Controller',
views : ['ViewTablaContenido'],
init: function() {
    this.control({
        'viewTablaContenido button[action=apagarCapas]': { 
            click: this.apagarCapas  
        },
        'viewTablaContenido':{
            render: this.renderizar
        }
    });

    console.log("antes de funcion");
},

apagarCapas : function(boton, e){
    alert("BUTTON PRESS!!");
},
renderizar: function(){
    alert("Rebder function");
}
});

Answer 1

看起来你的选择器错了。

而不是：

'viewTablaContenido button[action=apagarCapas]'

使用（xtype）：

'tablaContenido button[action=apagarCapas]'

或（id）：

'#viewTablaContenido button[action=apagarCapas]'

ExtJS通过视图访问控制器

1 个答案: