[Commits] r1507 - in core/trunk/geoext: examples lib lib/GeoExt/widgets/tree tests tests/lib/GeoExt/widgets/tree
commits at geoext.org
commits at geoext.org
Fri Nov 27 20:27:47 CET 2009
Author: elemoine
Date: 2009-11-27 20:27:46 +0100 (Fri, 27 Nov 2009)
New Revision: 1507
Added:
core/trunk/geoext/lib/GeoExt/widgets/tree/RadioButtonMixin.js
core/trunk/geoext/tests/lib/GeoExt/widgets/tree/RadioButtonMixin.html
Modified:
core/trunk/geoext/examples/tree.js
core/trunk/geoext/lib/GeoExt.js
core/trunk/geoext/lib/GeoExt/widgets/tree/LayerNode.js
core/trunk/geoext/tests/lib/GeoExt/widgets/tree/LayerNode.html
core/trunk/geoext/tests/list-tests.html
Log:
radio button ui as a mixin, r=ahocevar (closes #169)
Modified: core/trunk/geoext/examples/tree.js
===================================================================
--- core/trunk/geoext/examples/tree.js 2009-11-27 09:40:44 UTC (rev 1506)
+++ core/trunk/geoext/examples/tree.js 2009-11-27 19:27:46 UTC (rev 1507)
@@ -91,6 +91,11 @@
)
]
});
+
+ // create our own layer node UI class, using the RadioButtonMixin
+ var LayerNodeUI = Ext.extend(
+ GeoExt.tree.LayerNodeUI, new GeoExt.tree.RadioButtonMixin()
+ );
// using OpenLayers.Format.JSON to create a nice formatted string of the
// configuration for editing it in the UI
@@ -104,7 +109,10 @@
// in the code that we use as handlers for the tree's insert and
// append events to make these radio buttons change the active layer.
loader: {
- baseAttrs: {radioGroup: "foo"}
+ baseAttrs: {
+ radioGroup: "foo",
+ uiProvider: "use_radio"
+ }
}
}, {
nodeType: "gx_layer",
@@ -141,7 +149,10 @@
loader: new Ext.tree.TreeLoader({
// applyLoader has to be set to false to not interfer with loaders
// of nodes further down the tree hierarchy
- applyLoader: false
+ applyLoader: false,
+ uiProviders: {
+ "use_radio": LayerNodeUI
+ }
}),
root: {
nodeType: "async",
Modified: core/trunk/geoext/lib/GeoExt/widgets/tree/LayerNode.js
===================================================================
--- core/trunk/geoext/lib/GeoExt/widgets/tree/LayerNode.js 2009-11-27 09:40:44 UTC (rev 1506)
+++ core/trunk/geoext/lib/GeoExt/widgets/tree/LayerNode.js 2009-11-27 19:27:46 UTC (rev 1507)
@@ -15,11 +15,6 @@
*/
GeoExt.tree.LayerNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
- /** private: property[radio]
- * ``Ext.Element``
- */
- radio: null,
-
/** private: method[constructor]
*/
constructor: function(config) {
@@ -36,11 +31,6 @@
}
GeoExt.tree.LayerNodeUI.superclass.render.apply(this, arguments);
var cb = this.checkbox;
- if (a.radioGroup && this.radio === null) {
- this.radio = Ext.DomHelper.insertAfter(cb,
- ['<input type="radio" class="gx-tree-layer-radio" name="',
- a.radioGroup, '_radio"></input>'].join(""));
- }
if(a.checkedGroup) {
// replace the checkbox with a radio button
var radio = Ext.DomHelper.insertAfter(cb,
@@ -59,10 +49,7 @@
* :param e: ``Object``
*/
onClick: function(e) {
- if (e.getTarget('.gx-tree-layer-radio', 1)) {
- this.radio.defaultChecked = this.radio.checked;
- this.fireEvent("radiochange", this.node);
- } else if(e.getTarget('.x-tree-node-cb', 1)) {
+ if(e.getTarget('.x-tree-node-cb', 1)) {
this.toggleCheck(this.isChecked());
} else {
GeoExt.tree.LayerNodeUI.superclass.onClick.apply(this, arguments);
@@ -122,13 +109,6 @@
r.name = r.name + "_clone";
});
ghostNode.appendChild(n);
- },
-
- /** private: method[destroy]
- */
- destroy: function() {
- delete this.radio;
- GeoExt.tree.LayerNodeUI.superclass.destroy.apply(this, arguments);
}
});
@@ -159,12 +139,6 @@
* the checkedGroup attribute is a string, identifying the options group
* for the node.
*
- * If the node has a radioGroup attribute configured, the node will be
- * rendered with a radio button next to the checkbox. This works like the
- * checkbox with the checked attribute, but radioGroup is a string that
- * identifies the options group. Clicking the radio button will fire a
- * radioChange event.
- *
* To use this node type in a ``TreePanel`` config, set ``nodeType`` to
* "gx_layer".
*/
@@ -218,13 +192,6 @@
}
this.defaultUI = this.defaultUI || GeoExt.tree.LayerNodeUI;
- this.addEvents(
- /** api: event[radiochange]
- * Notifies listener when a differnt radio button was selected.
- * Will be called with the currently selected node as argument.
- */
- "radiochange"
- );
Ext.apply(this, {
layer: config.layer,
Added: core/trunk/geoext/lib/GeoExt/widgets/tree/RadioButtonMixin.js
===================================================================
--- core/trunk/geoext/lib/GeoExt/widgets/tree/RadioButtonMixin.js (rev 0)
+++ core/trunk/geoext/lib/GeoExt/widgets/tree/RadioButtonMixin.js 2009-11-27 19:27:46 UTC (rev 1507)
@@ -0,0 +1,103 @@
+/**
+ * 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.tree");
+
+/** api: (define)
+ * module = GeoExt.tree
+ * class = RadioButtonMixin
+ */
+
+/** api: constructor
+ * A mixin to create tree node UIs with radio buttons. Can be mixed in
+ * any ``Ext.tree.TreeNodeUI`` class, and in particular in
+ * :class:`GeoExt.data.LayerNodeUI`.
+ *
+ * A tree node using an ``Ext.tree.TreeNodeUI`` with a
+ * ``GeoExt.tree.RadioButtonMixin`` mixed into it generates a ``radiochange``
+ * event when the radio button is clicked. A ``radiochange`` listener
+ * receives the tree node whose radio button was clicked as its first
+ * argument.
+ *
+ * If the node has a radioGroup attribute configured, the node will be
+ * rendered with a radio button next to the checkbox. This works like the
+ * checkbox with the checked attribute, but radioGroup is a string that
+ * identifies the options group.
+ *
+ */
+
+/** api: example
+ * Sample code to create a layer node UI with a radio button:
+ *
+ * .. code-block:: javascript
+ *
+ * var uiClass = Ext.extend(
+ * GeoExt.tree.LayerNodeUI,
+ * GeoExt.tree.RadioButtonMixin
+ * );
+ *
+ * Sample code to create a tree node UI with a radio button:
+ *
+ * .. code-block:: javascript
+ *
+ * var uiClass = Ext.extend(
+ * Ext.tree.TreeNodeUI,
+ * new GeoExt.tree.RadioButtonMixin
+ * );
+ */
+
+GeoExt.tree.RadioButtonMixin = function() {
+ return (function() {
+ /** private: property[superclass]
+ * ``Ext.tree.TreeNodeUI`` A reference to the superclass that is
+ * extended with this mixin object.
+ */
+ var superclass;
+
+ return {
+ /** private: method[constructor]
+ * :param node: ``Ext.tree.TreeNode`` The tree node.
+ */
+ constructor: function(node) {
+ node.addEvents(
+ "radiochange"
+ );
+ superclass = arguments.callee.superclass;
+ superclass.constructor.apply(this, arguments);
+ },
+
+ /** private: method[render]
+ * :param bulkRender: ``Boolean``
+ */
+ render: function(bulkRender) {
+ if(!this.rendered) {
+ superclass.render.apply(this, arguments);
+ var a = this.node.attributes;
+ if(a.radioGroup) {
+ Ext.DomHelper.insertBefore(this.anchor,
+ ['<input type="radio" class="gx-tree-radio" name="',
+ a.radioGroup, '_radio"></input>'].join(""));
+ }
+ }
+ },
+
+ /** private: method[onClick]
+ * :param e: ``Object``
+ */
+ onClick: function(e) {
+ var el = e.getTarget('.gx-tree-radio', 1);
+ if(el) {
+ el.defaultChecked = el.checked;
+ this.fireEvent("radiochange", this.node);
+ } else {
+ superclass.onClick.apply(this, arguments);
+ }
+ }
+ };
+ })();
+};
Modified: core/trunk/geoext/lib/GeoExt.js
===================================================================
--- core/trunk/geoext/lib/GeoExt.js 2009-11-27 09:40:44 UTC (rev 1506)
+++ core/trunk/geoext/lib/GeoExt.js 2009-11-27 19:27:46 UTC (rev 1507)
@@ -93,6 +93,7 @@
"GeoExt/widgets/tips/LayerOpacitySliderTip.js",
"GeoExt/widgets/tips/ZoomSliderTip.js",
"GeoExt/widgets/tree/LayerNode.js",
+ "GeoExt/widgets/tree/RadioButtonMixin.js",
"GeoExt/widgets/tree/LayerLoader.js",
"GeoExt/widgets/tree/LayerContainer.js",
"GeoExt/widgets/tree/BaseLayerContainer.js",
Modified: core/trunk/geoext/tests/lib/GeoExt/widgets/tree/LayerNode.html
===================================================================
--- core/trunk/geoext/tests/lib/GeoExt/widgets/tree/LayerNode.html 2009-11-27 09:40:44 UTC (rev 1506)
+++ core/trunk/geoext/tests/lib/GeoExt/widgets/tree/LayerNode.html 2009-11-27 19:27:46 UTC (rev 1507)
@@ -30,7 +30,7 @@
function test_render(t) {
- t.plan(8);
+ t.plan(6);
var layer = new OpenLayers.Layer("foo");
@@ -41,15 +41,10 @@
var node = new GeoExt.tree.LayerNode({
layer: "foo",
- radioGroup: "group",
checkedGroup: "check"
});
-
- node.on("radiochange", function() {
- t.ok(arguments[0] === node, "radiochange event triggered with the selected node as first argument");
- });
-
- var panel = new Ext.tree.TreePanel({
+
+ var panel = new Ext.tree.TreePanel({
renderTo: "tree",
root: node
});
@@ -58,10 +53,7 @@
t.ok(node.layer === layer, "layer found on detected map panel");
t.ok(node.ui.checkbox, "node has a checkbox");
- t.ok(node.ui.radio, "node has a radio button");
- // simulate a click event for testing the radiochange event
- node.ui.onClick({getTarget: function() {return true}});
-
+
t.eq(node.ui.checkbox.type, "radio", "checkbox rendered as radio button when checkedGroup is configured");
t.eq(node.ui.checkbox.name, "check_checkbox", "option group name set correctly according to checkedGroup");
Added: core/trunk/geoext/tests/lib/GeoExt/widgets/tree/RadioButtonMixin.html
===================================================================
--- core/trunk/geoext/tests/lib/GeoExt/widgets/tree/RadioButtonMixin.html (rev 0)
+++ core/trunk/geoext/tests/lib/GeoExt/widgets/tree/RadioButtonMixin.html 2009-11-27 19:27:46 UTC (rev 1507)
@@ -0,0 +1,57 @@
+<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>
+
+ function test_render(t) {
+
+ t.plan(2);
+
+ var layer = new OpenLayers.Layer("foo");
+
+ var mapPanel = new GeoExt.MapPanel({
+ layers: [layer],
+ allOverlays: true
+ });
+
+ var ui = Ext.extend(
+ GeoExt.tree.LayerNodeUI,
+ new GeoExt.tree.RadioButtonMixin()
+ );
+
+ var node = new GeoExt.tree.LayerNode({
+ layer: "foo",
+ radioGroup: "group",
+ uiProvider: ui
+ });
+
+ node.on("radiochange", function() {
+ t.ok(arguments[0] === node, "radiochange event triggered with the selected node as first argument");
+ });
+
+ var panel = new Ext.tree.TreePanel({
+ renderTo: "tree",
+ root: node
+ });
+
+ mapPanel.on("render", function() {
+ t.ok(Ext.Element.get(node.ui.anchor.previousSibling).hasClass("gx-tree-radio"), "node has a radio button");
+ // simulate a click event for testing the radiochange event
+ node.ui.onClick({getTarget: function() {return true}});
+ });
+
+ mapPanel.render("map");
+
+ mapPanel.destroy();
+ }
+ </script>
+ </head>
+ <body>
+ <div id="map" style="width: 100px; height: 100px;"></div>
+ <div id="tree" style="width: 100px; height: 100px;"></div>
+ </body>
+</html>
Modified: core/trunk/geoext/tests/list-tests.html
===================================================================
--- core/trunk/geoext/tests/list-tests.html 2009-11-27 09:40:44 UTC (rev 1506)
+++ core/trunk/geoext/tests/list-tests.html 2009-11-27 19:27:46 UTC (rev 1507)
@@ -26,6 +26,7 @@
<li>lib/GeoExt/widgets/tree/LayerContainer.html</li>
<li>lib/GeoExt/widgets/tree/LayerLoader.html</li>
<li>lib/GeoExt/widgets/tree/LayerNode.html</li>
+ <li>lib/GeoExt/widgets/tree/RadioButtonMixin.html</li>
<li>lib/GeoExt/widgets/tree/LayerParamLoader.html</li>
<li>lib/GeoExt/widgets/tree/LayerParamNode.html</li>
<li>lib/GeoExt/widgets/LegendImage.html</li>
More information about the Commits
mailing list