[Dojo-interest] Button has no themeing

Kenneth G. Franqueiro kgf at dojotoolkit.org
Tue Apr 2 15:37:43 EDT 2013


It looks like you didn't add the claro class to your body tag.  All of
dijit's (and dgrid's) skin styles only apply to children of an element
with a class matching the theme being loaded.

--Ken

On 4/2/2013 3:35 PM, Sam Carleton wrote:
> I am trying to wire up my first real dojo button, but it is simply a
> box, not nice theme applied to it.  I am figuring I am missing something
> obviouse, but I simply am not seeing it.  Here is the code:
> 
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
> 
> <html>
>     <head>
>         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
>         <title>The Admin Page</title>
>         <link rel="stylesheet" type="text/css" href="/winsgt/resources/css/style.css">
> 		<link rel="stylesheet" type="text/css" href="/js/dojo/1.8.3/dgrid/css/dgrid.css"/>
> 		<link rel="stylesheet" type="text/css" href="/js/dojo/1.8.3/dgrid/css/skins/claro.css" />
>         <link rel="stylesheet" type="text/css" href="/js/dojo/1.8.3/dijit/themes/claro/claro.css">
> 		<link rel="stylesheet" type="text/css" href="/js/dojo/1.8.3/dojo/resources/dojo.css" />
> 
> 		
>         <style type="text/css">
> 
> 			
> 	.wideCols .field-username { width: 15%; }
> 	.wideCols .field-firstName { width: 15%; }
> 	.wideCols .field-lastName { width: 20%; }
> 	.wideCols .field-email { width: 40%; }
> 	.wideCols .field-enabled { width: 10%; }
> </style>
> 
> 		<script type="text/javascript">
> 			dojoConfig = {
>         		has: {
>             		"dojo-firebug": true,
>             		"dojo-debug-messages": true
>         		},
>     		};
> 		</script>
> 		
>     	<script src="/js/dojo/1.8.3/dojo/dojo.js" 
>     			type="text/javascript" 
>     			data-dojo-config="async: true" >
>     	</script>
>     </head>
>     <body>
>         <div id="bodyWrapper">
>             <div id="header">
>                 Win Score Game Tracker
>             </div>
>             <div id="navigation">
> 			
>                 <a href="/winsgt">HOME</a>
>                 <a href="#">ABOUT</a>
> 				<a href="/winsgt/logout">Logout</a>
>             </div>
>             <div id="pageBody">
>                 <div id="content">
>                     <h1>Users</h1>
> 	
> 
> 	<a href="/winsgt/admin/addUser">Add User</a> <button type="button" id="saveNode"></button>
> 	<div id="result1"></div>
> 
> 	<div id="grid" class="wideCols"></div>
> 	<!-- <button type="button" id="save" onclick="grid.save()">Save</button>  -->
> 	
> 
> 	<script type="text/javascript">
> 		var viewModel;
> 
> 		require([ "dojo/store/JsonRest",
> 		          "dojo/_base/declare",
> 				  "dgrid/OnDemandGrid",
> 				  "dgrid/Selection", 
> 				  "dgrid/editor",
> 				  "dgrid/selector",
> 				  "dijit/form/Button", 
> 				  "dojo/domReady!" 
> 		        ], function(JsonRest, declare, OnDemandGrid, Selection, editor, selector, Button) {
> 		
> 			var userAccountStore = new JsonRest({
> 				idProperty : "userAccountId",
> 				target : "/winsgt/userMgr/"
> 			});
> 			
> 			viewModel = { 
> 					userAccountStore: userAccountStore,
> 					dataChanged: false,
> 					};
> 
> 			window.grid = new (declare([OnDemandGrid, Selection]))({				
> 				store : viewModel.userAccountStore,			
> 				columns:  [ selector({ label: 'radio'}, "radio"),
> 				            { label: "Username", field: "username"}, 
> 							editor({ label: "First Name", field: "firstName", editor: "text", editOn: "dblclick"}), 
> 							editor({ label: "Last Name", field: "lastName", editor: "text", editOn: "dblclick"}), 
> 							editor({ label: "Email", field: "email", editor: "text", editOn: "dblclick"}), 
> 							editor({ label: "Enabled", field: "enabled"}, "checkbox")],
> 			}, "grid");	
> 			
> 			grid.on("dgrid-datachange", function(evt){
> 				console.log("data changed: ", evt.oldValue, " -> ", evt.value);
> 				console.log("cell: ", evt.cell, evt.cell.row.id <http://evt.cell.row.id>);
> 				viewModel.dataChanged = true;
> 			});
> 			grid.on("dgrid-editor-show", function(evt){
> 				console.log("show editOn editor: ", evt);
> 			});
> 			grid.on("dgrid-editor-hide", function(evt){
> 				console.log("hide editOn editor: ", evt);
> 			});			
> 		
> 	        var saveButton = new Button({
> 	            label: "Click me!",
> 	            onClick: function (){ grid.save(); viewModel.dataChanged = false;}
> 	        }, "saveNode");
> 		});
> 		
> 	</script>
>                 </div>
>             </div>
>             <div id="footer">
>             </div>
>         </div>
>     </body>
> </html>
> 
> 
> 
> 
> ________________________________________________________
> Dojo Toolkit: http://dojotoolkit.org/
> Tutorials: http://dojotoolkit.org/documentation/
> Reference Guide: http://dojotoolkit.org/reference-guide
> API Documentation: http://dojotoolkit.org/api
> 
> Dojo-interest at mail.dojotoolkit.org
> To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


More information about the Dojo-interest mailing list