Question

我想在树状面板的树列中放置一个链接，实际上我可以将我想要的链接放在列中，但链接显示的是一个文件夹和我在另一列中的复选框，我的问题是如何删除这些元素并保持链接？

A graphical explanation 我有这段代码：

这是treepanel的视图：

    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: '',
        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) {
                console.log('nodo seleccionado:', node, checked, eOpts);
            }
        },
        columns: [{
            xtype: 'treecolumn',
            text: 'Capa',
            flex: 4,
            sortable: true,
            dataIndex: 'nombre'
        },{
            xtype: 'treecolumn',
            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,

                                //Visibilidad de los hijos 
                                visible = node.isLeaf() ? v.test(node.get('nombre')) : false,   i;

                                //Visibilidad de los padres
                                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
            }
        }]
    });

    Ext.apply(this, {
        title: 'TABLA CONTENIDO',
        id: 'ventanaCapas',
        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) {
            }
        },
        items: [tree],
    });
    this.callParent(arguments);
}

模特：

Ext.define('app.model.modeloCapa', {
extend: 'Ext.data.Model',
fields: ['nombre','url'],

proxy: {
    type: 'ajax',
    url: "data/jsontestqmodel.json",  
    reader: {
        type    : 'json',
        root    : 'Result',
    }
}});

商店：

Ext.define('app.store.capa', {
extend: 'Ext.data.TreeStore',
requires: 'app.model.modeloCapa',
model: 'app.model.modeloCapa'
});

我正在使用的JSON文件：

{"Result": [{
"nombre": "Transporte Marítimo Fluvial",
"id": 74,
"Result": [{    
        "id": 268,
        "titulo": "puerto_p_25k",
        "url": "http://172.17.2.157:8080/geoserver/sigtierras/wms",
        "nombre": "puerto_p_25k",
        "metadato": "",
        "wfs": false,
        "leaf": true,
        "checked": false
}]},{
"nombre": "Entidades Territoriales y Unidades Admin",
"id": 65,
"Result": [{
        "id": 239,
        "titulo": "limite_25k",
        "url": "http://172.17.2.157:8080/geoserver/sigtierras/wms",
        "nombre": "limite_25k",
        "metadato": "",
        "wfs": false,
        "leaf": true,
        "checked": false
},{
        "id": 319,
        "titulo": "administrativo_p_25k",
        "url": "http://172.17.2.157:8080/geoserver/sigtierras/wms",
        "nombre": "administrativo_p_25k",
        "metadato": "",
        "wfs": false,
        "leaf": true,
        "checked": false
    }
]},{
"nombre": "Instalaciones Construcciones para el Transporte",
"id": 67,
"Result": [{
        "id": 269,
        "titulo": "red_alta_tension_25k",
        "url": "http://172.17.2.157:8080/geoserver/sigtierras/wms",
        "nombre": "red_alta_tension_25k",
        "metadato": "",
        "wfs": false,
        "leaf": true,
        "checked": false

},{
        "id": 260,
        "titulo": "peaje_25k",
        "url": "http://172.17.2.157:8080/geoserver/sigtierras/wms",
        "nombre": "peaje_25k",
        "metadato": "",
        "wfs": false,
        "leaf": true,
        "checked": false

},{
        "id": 275,
        "titulo": "torre_25k",
        "url": "http://172.17.2.157:8080/geoserver/sigtierras/wms",
        "nombre": "torre_25k",
        "metadato": "",
        "wfs": false,
        "leaf": true,
        "checked": false
},{
        "id": 266,
        "titulo": "puente_l_25k",
        "url": "http://172.17.2.157:8080/geoserver/sigtierras/wms",
        "nombre": "puente_l_25k",
        "metadato": "",
        "wfs": false,
        "leaf": true,
        "checked": false
},{
        "id": 267,
        "titulo": "puente_p_25k",
        "url": "http://172.17.2.157:8080/geoserver/sigtierras/wms",
        "nombre": "puente_p_25k",
        "metadato": "",
        "wfs": false,
        "leaf": true,
        "checked": false
},{

        "id": 259,
        "titulo": "paso_nivel_25k",
        "url": "http://172.17.2.157:8080/geoserver/sigtierras/wms",
        "nombre": "paso_nivel_25k",
        "metadato": "",
        "wfs": false,
        "leaf": true,
        "checked": false
},{
        "id": 223,
        "titulo": "antena_25k",
        "url": "http://172.17.2.157:8080/geoserver/sigtierras/wms",
        "nombre": "antena_25k",
        "metadato": "",
        "wfs": false,
        "leaf": true,
        "checked": false
},{
        "id": 273,
        "titulo": "terminal_p_25k",
        "url": "http://172.17.2.157:8080/geoserver/sigtierras/wms",
        "nombre": "terminal_p_25k",
        "metadato": "",
        "wfs": false,
        "leaf": true,
        "checked": false
},{
        "id": 265,
        "titulo": "poste_25k",
        "url": "http://172.17.2.157:8080/geoserver/sigtierras/wms",
        "nombre": "poste_25k",
        "metadato": "",
        "wfs": false,
        "leaf": true,
        "checked": false
},{
        "id": 276,
        "titulo": "tuberia_25k",
        "url": "http://172.17.2.157:8080/geoserver/sigtierras/wms",
        "nombre": "tuberia_25k",
        "metadato": "",
        "wfs": false,
        "leaf": true,
        "checked": false
}]
}]
}

Answer 1

只需删除第二个treecolumn上的xtype即可。它将默认为gridcolumn，因此它看起来像普通的网格列。

ExtJS将链接放在树面板

1 个答案: