[Commits] r2395 - in core/trunk/geoext: examples lib/GeoExt/plugins tests/lib/GeoExt/plugins
commits at geoext.org
commits at geoext.org
Wed Sep 22 14:31:07 CEST 2010
Author: ahocevar
Date: 2010-09-22 14:31:07 +0200 (Wed, 22 Sep 2010)
New Revision: 2395
Added:
core/trunk/geoext/examples/tree-legend.html
core/trunk/geoext/examples/tree-legend.js
core/trunk/geoext/lib/GeoExt/plugins/TreeNodeComponent.js
core/trunk/geoext/tests/lib/GeoExt/plugins/TreeNodeComponent.html
Log:
missing files from r2393 (see #329)
Added: core/trunk/geoext/examples/tree-legend.html
===================================================================
--- core/trunk/geoext/examples/tree-legend.html (rev 0)
+++ core/trunk/geoext/examples/tree-legend.html 2010-09-22 12:31:07 UTC (rev 2395)
@@ -0,0 +1,42 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>GeoExt Legend Tree</title>
+
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script>
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css" />
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css" />
+ <script src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script>
+ <script type="text/javascript" src="../lib/GeoExt.js"></script>
+
+ <script type="text/javascript" src="tree-legend.js"></script>
+
+ <style type="text/css">
+ .legend {
+ padding-left: 18px;
+ }
+ .x-tree-node-el {
+ border-bottom: 1px solid #ddd;
+ padding-bottom: 3px;
+ }
+ .x-tree-ec-icon {
+ width: 3px;
+ }
+ .gx-tree-layer-icon {
+ display: none;
+ }
+ </style>
+
+ </head>
+ <body>
+ <div id="desc">
+ <h1>GeoExt Legend Tree</h1>
+
+ <p>This example shows how to add legends to the layer nodes in a
+ tree.</p>
+
+ <p>The js is not minified so it is readable. See
+ <a href="tree-legend.js">tree-legend.js</a>.</p>
+ </div>
+ </body>
+</html>
Added: core/trunk/geoext/examples/tree-legend.js
===================================================================
--- core/trunk/geoext/examples/tree-legend.js (rev 0)
+++ core/trunk/geoext/examples/tree-legend.js 2010-09-22 12:31:07 UTC (rev 2395)
@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) 2008-2009 The Open Source Geospatial Foundation
+ *
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ */
+
+ /** api: example[tree-legend]
+ * Tree Legend
+ * -----------
+ * Render layer nodes with legends.
+ */
+
+// custom layer node UI class
+var LayerNodeUI = Ext.extend(
+ GeoExt.tree.LayerNodeUI,
+ new GeoExt.tree.TreeNodeUIEventMixin()
+);
+
+Ext.onReady(function() {
+ var mapPanel = new GeoExt.MapPanel({
+ region: "center",
+ center: [146.1569825, -41.6109735],
+ zoom: 6,
+ layers: [
+ new OpenLayers.Layer.WMS("Tasmania State Boundaries",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_state_boundaries"
+ }, {
+ buffer: 0,
+ // exclude this layer from layer container nodes
+ displayInLayerSwitcher: false
+ }),
+ new OpenLayers.Layer.WMS("Water",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_water_bodies",
+ transparent: true,
+ format: "image/gif"
+ }, {
+ buffer: 0
+ }),
+ new OpenLayers.Layer.WMS("Cities",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_cities",
+ transparent: true,
+ format: "image/gif"
+ }, {
+ buffer: 0
+ }),
+ new OpenLayers.Layer.WMS("Tasmania Roads",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_roads",
+ transparent: true,
+ format: "image/gif"
+ }, {
+ buffer: 0
+ })
+ ]
+ });
+
+ var tree = new Ext.tree.TreePanel({
+ region: "east",
+ title: "Layers",
+ width: 250,
+ autoScroll: true,
+ enableDD: true,
+ // apply the tree node component plugin to layer nodes
+ plugins: [{
+ ptype: "gx_treenodecomponent"
+ }],
+ loader: {
+ applyLoader: false,
+ uiProviders: {
+ "custom_ui": LayerNodeUI
+ }
+ },
+ root: {
+ nodeType: "gx_layercontainer",
+ loader: {
+ baseAttrs: {
+ uiProvider: "custom_ui"
+ },
+ createNode: function(attr) {
+ // add a WMS legend to each node created
+ attr.component = {
+ xtype: "gx_wmslegend",
+ layerRecord: mapPanel.layers.getByLayer(attr.layer),
+ showTitle: false,
+ // custom class for css positioning
+ // see tree-legend.html
+ cls: "legend"
+ }
+ return GeoExt.tree.LayerLoader.prototype.createNode.call(this, attr);
+ }
+ }
+ },
+ rootVisible: false,
+ lines: false
+ });
+
+ new Ext.Viewport({
+ layout: "fit",
+ hideBorders: true,
+ items: {
+ layout: "border",
+ items: [
+ mapPanel, tree, {
+ contentEl: desc,
+ region: "west",
+ width: 250,
+ bodyStyle: {padding: "5px"}
+ }
+ ]
+ }
+ });
+});
Added: core/trunk/geoext/lib/GeoExt/plugins/TreeNodeComponent.js
===================================================================
--- core/trunk/geoext/lib/GeoExt/plugins/TreeNodeComponent.js (rev 0)
+++ core/trunk/geoext/lib/GeoExt/plugins/TreeNodeComponent.js 2010-09-22 12:31:07 UTC (rev 2395)
@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) 2008-2009 The Open Source Geospatial Foundation
+ *
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ */
+
+Ext.namespace("GeoExt.plugins");
+
+/** api: (define)
+ * module = GeoExt.plugins
+ * class = TreeNodeComponent
+ */
+
+/** api: constructor
+ * A plugin to create tree node UIs that can have an Ext.Component below the
+ * node's title. Can be plugged into any ``Ext.tree.TreePanel`` and will be
+ * applied to nodes that are extended with the
+ * :class:`GeoExt.Tree.TreeNodeUIEventMixin`.
+ *
+ * If a node is configured with a ``component`` attribute, it will be rendered
+ * with the component in addition to icon and title.
+ */
+
+/** api: example
+ * Sample code to create a tree with a node that has a component:
+ *
+ * .. code-block:: javascript
+ *
+ * var uiClass = Ext.extend(
+ * Ext.tree.TreeNodeUI,
+ * GeoExt.tree.TreeNodeUIEventMixin
+ * );
+ * var tree = new Ext.tree.TreePanel({
+ * plugins: [
+ * new GeoExt.plugins.TreeNodeRadioButton({
+ * listeners: {
+ * "radiochange": function(node) {
+ * alert(node.text + "'s radio button was clicked.");
+ * }
+ * }
+ * })
+ * ],
+ * root: {
+ * nodeType: "node",
+ * uiProvider: uiClass,
+ * text: "My Node",
+ * component: {
+ * xtype: "box",
+ * autoEl: {
+ * tag: "img",
+ * src: "/images/my-image.jpg"
+ * }
+ * }
+ * }
+ * }
+ *
+ * Sample code to create a layer node UI with a radio button:
+ *
+ * .. code-block:: javascript
+ *
+ * var uiClass = Ext.extend(
+ * GeoExt.tree.LayerNodeUI,
+ * new GeoExt.tree.TreeNodeUIEventMixin
+ * );
+ */
+
+GeoExt.plugins.TreeNodeComponent = Ext.extend(Ext.util.Observable, {
+
+ /** private: method[constructor]
+ * :param config: ``Object``
+ */
+ constructor: function(config) {
+ Ext.apply(this.initialConfig, Ext.apply({}, config));
+ Ext.apply(this, config);
+
+ GeoExt.plugins.TreeNodeComponent.superclass.constructor.apply(this, arguments);
+ },
+
+ /** private: method[init]
+ * :param tree: ``Ext.tree.TreePanel`` The tree.
+ */
+ init: function(tree) {
+ tree.on({
+ "rendernode": this.onRenderNode,
+ scope: this
+ });
+ },
+
+ /** private: method[onRenderNode]
+ * :param node: ``Ext.tree.TreeNode``
+ */
+ onRenderNode: function(node) {
+ var rendered = node.rendered;
+ var attr = node.attributes;
+ var component = attr.component || this.component;
+ if(!rendered && component) {
+ var elt = Ext.DomHelper.append(node.ui.elNode, [
+ {"tag": "div"}
+ ]);
+ if(typeof component == "function") {
+ component = component(node, elt);
+ } else if (typeof component == "object" &&
+ typeof component.fn == "function") {
+ component = component.fn.apply(
+ component.scope, [node, elt]
+ );
+ }
+ if(typeof component == "object" &&
+ typeof component.xtype == "string") {
+ component = Ext.ComponentMgr.create(component);
+ }
+ if(component instanceof Ext.Component) {
+ component.render(elt);
+ node.component = component;
+ }
+ }
+ },
+
+ /** private: method[destroy]
+ */
+ destroy: function() {
+ tree.un("rendernode", this.onRenderNode, this);
+ }
+
+});
+
+/** api: ptype = gx_TreeNodeComponent */
+Ext.preg && Ext.preg("gx_treenodecomponent", GeoExt.plugins.TreeNodeComponent);
Added: core/trunk/geoext/tests/lib/GeoExt/plugins/TreeNodeComponent.html
===================================================================
--- core/trunk/geoext/tests/lib/GeoExt/plugins/TreeNodeComponent.html (rev 0)
+++ core/trunk/geoext/tests/lib/GeoExt/plugins/TreeNodeComponent.html 2010-09-22 12:31:07 UTC (rev 2395)
@@ -0,0 +1,221 @@
+<html>
+ <head>
+ <script src="../../../../../openlayers/lib/OpenLayers.js"></script>
+ <script src="../../../../../ext/adapter/ext/ext-base.js"></script>
+ <script src="../../../../../ext/ext-all-debug.js"></script>
+ <script src="../../../../lib/GeoExt.js"></script>
+
+ <script>
+
+ var UI = Ext.extend(
+ GeoExt.tree.LayerNodeUI,
+ new GeoExt.tree.TreeNodeUIEventMixin()
+ );
+
+ function test_ui_component_instance(t) {
+ t.plan(4);
+
+ // setup
+
+ var component, node, tree, ui, elNode;
+
+ component = new Ext.Panel({
+ id: "foo-id",
+ cls: "foo-cls",
+ ctCls: "foo-ct-cls"
+ });
+ node = new GeoExt.tree.LayerNode({
+ uiProvider: UI,
+ layer: new OpenLayers.Layer(),
+ component: component
+ });
+ tree = new Ext.tree.TreePanel({
+ renderTo: "tree",
+ root: node,
+ plugins: [new GeoExt.plugins.TreeNodeComponent()]
+ });
+ ui = node.ui;
+ elNode = Ext.fly(ui.elNode);
+
+ // test
+ t.ok(elNode.last().hasClass("foo-ct-cls"),
+ "the container div is at correct location and " +
+ "has a correct class");
+ t.ok(elNode.last().child("#foo-id"),
+ "the container div contains the panel div");
+ t.ok(elNode.last().child("#foo-id") &&
+ elNode.last().child("#foo-id").hasClass("foo-cls"),
+ "the panel div has a correct class");
+ t.ok(node.component === component,
+ "the component is set in the node");
+
+ // teardown
+
+ tree.destroy();
+ }
+
+ function test_ui_component_config(t) {
+ t.plan(3);
+
+ // setup
+
+ var component, node, tree, ui, elNode;
+
+ component = {
+ xtype: "panel",
+ cls: "foo-cls",
+ ctCls: "foo-ct-cls"
+ };
+ node = new GeoExt.tree.LayerNode({
+ uiProvider: UI,
+ layer: new OpenLayers.Layer(),
+ component: component
+ });
+ tree = new Ext.tree.TreePanel({
+ renderTo: "tree",
+ root: node,
+ plugins: [new GeoExt.plugins.TreeNodeComponent()]
+ });
+ ui = node.ui;
+ elNode = Ext.fly(ui.elNode);
+
+ // test
+ t.ok(elNode.last().hasClass("foo-ct-cls"),
+ "the container div is at correct location and " +
+ "has a correct class");
+ t.ok(elNode.last().child(".foo-cls") ,
+ "the container div contains the panel div, " +
+ "which has a correct class");
+ t.ok(node.component instanceof Ext.Panel,
+ "the component is set in the node");
+
+ // teardown
+
+ tree.destroy();
+ }
+
+ function test_ui_component_function(t) {
+ t.plan(16);
+
+ var component, node, tree, ui, elNode, log;
+
+ // test with a function returning a config object
+ log = [];
+ component = function(n, e) {
+ log.push({n: n, e: e});
+ return {
+ xtype: "panel",
+ cls: "foo-cls",
+ ctCls: "foo-ct-cls"
+ };
+ };
+ node = new GeoExt.tree.LayerNode({
+ uiProvider: UI,
+ layer: new OpenLayers.Layer(),
+ component: component
+ });
+ tree = new Ext.tree.TreePanel({
+ renderTo: "tree",
+ root: node,
+ plugins: [new GeoExt.plugins.TreeNodeComponent()]
+ });
+ ui = node.ui;
+ elNode = Ext.fly(ui.elNode);
+ t.eq(log.length, 1,
+ "[1] factory function called once");
+ t.ok(log.length > 0 && log[0].n === node,
+ "[1] factory function called with node");
+ t.ok(elNode.last().hasClass("foo-ct-cls"),
+ "[1] the container div is at correct location and " +
+ "has a correct class");
+ t.ok(elNode.last().child(".foo-cls") ,
+ "[1] the container div contains the panel div, " +
+ "which has a correct class");
+ t.ok(node.component instanceof Ext.Panel,
+ "[1] the component is set in the node");
+ tree.destroy();
+
+ // test with a function returning a panel instance
+ log = [];
+ component = function(n, e) {
+ log.push({n: n, e: e});
+ return new Ext.Panel({
+ cls: "foo-cls",
+ ctCls: "foo-ct-cls"
+ });
+ };
+ node = new GeoExt.tree.LayerNode({
+ uiProvider: UI,
+ layer: new OpenLayers.Layer(),
+ component: component
+ });
+ tree = new Ext.tree.TreePanel({
+ renderTo: "tree",
+ root: node,
+ plugins: [new GeoExt.plugins.TreeNodeComponent()]
+ });
+ ui = node.ui;
+ elNode = Ext.fly(ui.elNode);
+ t.eq(log.length, 1,
+ "[2] factory function called once");
+ t.ok(log.length > 0 && log[0].n === node,
+ "[2] factory function called with node");
+ t.ok(elNode.last().hasClass("foo-ct-cls"),
+ "[2] the container div is at correct location and " +
+ "has a correct class");
+ t.ok(elNode.last().child(".foo-cls") ,
+ "[2] the container div contains the panel div, " +
+ "which has a correct class");
+ t.ok(node.component instanceof Ext.Panel,
+ "[2] the component is set in the node");
+ tree.destroy();
+
+ // with an object with fn and scope properties
+ log = [];
+ var scope = {"some": "scope"};
+ component = {
+ fn: function(n, e) {
+ log.push({n: n, e: e, s: this});
+ return new Ext.Panel({
+ cls: "foo-cls",
+ ctCls: "foo-ct-cls"
+ });
+ },
+ scope: scope
+ };
+ node = new GeoExt.tree.LayerNode({
+ uiProvider: UI,
+ layer: new OpenLayers.Layer(),
+ component: component
+ });
+ tree = new Ext.tree.TreePanel({
+ renderTo: "tree",
+ root: node,
+ plugins: [new GeoExt.plugins.TreeNodeComponent()]
+ });
+ ui = node.ui;
+ elNode = Ext.fly(ui.elNode);
+ t.eq(log.length, 1,
+ "[3] factory function called once");
+ t.ok(log.length > 0 && log[0].n === node,
+ "[3] factory function called with node");
+ t.ok(log.length > 0 && log[0].s === scope,
+ "[3] factory function called with correct scope");
+ t.ok(elNode.last().hasClass("foo-ct-cls"),
+ "[3] the container div is at correct location and " +
+ "has a correct class");
+ t.ok(elNode.last().child(".foo-cls") ,
+ "[3] the container div contains the panel div, " +
+ "which has a correct class");
+ t.ok(node.component instanceof Ext.Panel,
+ "[3] the component is set in the node");
+ tree.destroy();
+
+ // teardown
+ }
+ </script>
+ </head>
+ <body>
+ <div id="tree" style="width: 100px; height: 100px;"></div>
+ </body>
+</html>
More information about the Commits
mailing list