Generate layout and add side accordion container
/*
* @File : layout.js
*/
require([ "dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/dom-style", "dojo/dom-attr",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer",
"dojo/domReady!" ],
function(dom, on, domConstruct, domStyle, domAttr,
BorderContainer, ContentPane, AccordionContainer) {
var app = new BorderContainer({
id : "appContainer",
design : "headline"
}, dom.byId("app"));
var topPane = new ContentPane({
id : "topPane",
region : "top",
style : "background-color:#E1EBFD;height:auto;"
}, dom.byId("headerDiv"));
var leftPane = new ContentPane({
id : "leftPane",
region : "left",
splitter : true,
style : "background-color:#E1EBFD;width:25%;padding:0; margin:0;overflow:hidden;"
});
var mainPane = new ContentPane({
id : "mainPane",
region : "center",
content:"
Main Pane
"
});
var btmPane = new ContentPane({
id : "btmPane",
region : "bottom",
content:"
Main Pane
"
});
app.addChild(topPane);
app.addChild(leftPane);
app.addChild(mainPane);
//app.addChild(btmPane);
app.startup();
// -----------------------------------------
});
require(["dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/dom-style", "dojo/dom-attr",
"dijit/layout/ContentPane", "dijit/layout/AccordionContainer",
"dojo/domReady!"],
function(dom, on, domConstruct, domStyle, domAttr,
ContentPane, AccordionContainer) {
var ctnr = new AccordionContainer({
style : "height:100%;"
});
ctnr.addChild(new ContentPane({
title : "List Posts",
content : "Create/Edit Blog Posts",
style : ""
}));
ctnr.addChild(new ContentPane({
title : "Calendar/ToDo",
content : "Hi how are you?"
}));
ctnr.addChild(new ContentPane({
title : "Wiki",
content : "Edit Wiki"
}));
ctnr.placeAt(dom.byId("leftPane"));
ctnr.resize();
});
Now generate form elements for blog updates
/**
*
* @ File blogEdit.js
*/
/**
* @author Anang Phatak
*/
require([ "dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/dom-style", "dojo/ready",
"dojo/dom-attr",
"dojox/layout/TableContainer",
"dijit/registry",
"dijit/form/Form","dijit/form/TextBox", "dijit/form/Button",
"dijit/TitlePane",
"dijit/Editor",
"dijit/_editor/plugins/FullScreen",
"dijit/_editor/plugins/TextColor",
"dijit/_editor/plugins/FontChoice",
"dijit/_editor/plugins/LinkDialog",
"dijit/_editor/plugins/Print",
"dijit/_editor/plugins/ViewSource",
// "dojox/editor/plugins/PrettyPrint",
// "dojox/editor/plugins/PageBreak",
// "dojox/editor/plugins/ShowBlockNodes",
// "dojox/editor/plugins/Preview",
// "dojox/editor/plugins/Save",
// "dojox/editor/plugins/ToolbarLineBreak",
// "dojox/editor/plugins/NormalizeIndentOutdent",
// "dojox/editor/plugins/Breadcrumb",
// "dojox/editor/plugins/FindReplace",
// "dojox/editor/plugins/PasteFromWord",
// "dojox/editor/plugins/InsertAnchor",
// "dojox/editor/plugins/CollapsibleToolbar",
// "dojox/editor/plugins/TextColor",
// "dojox/editor/plugins/Blockquote",
// "dojox/editor/plugins/Smiley",
// "dojox/editor/plugins/UploadImage",
"dojox/editor/plugins/TablePlugins",
"dojox/html/entities",
"dojo/domReady!" ],
function(dom, on, domConstruct, domStyle, ready, domAttr,
TableContainer,
registry, Form, TextBox, Button,
TitlePane, Editor,
FullScreen, TextColor, FontChoice, LinkDialog, Print, ViewSource,
TablePlugins,
entities
// PrettyPrint,
// PageBreak,
// ShowBlockNodes,
// Preview,
// Save,
// ToolbarLineBreak,
// NormalizeIndentOutdent,
// Breadcrumb,
// FindReplace,
// PasteFromWord,
// InsertAnchor,
// CollapsibleToolbar,
// TextColor,
// Blockquote,
// Smiley,
// UploadImage
) {
ready(function () {
var tp = new TitlePane({
title:"Login to jBlog",
open:true
});
var frm = new Form({
action: '',
method: 'post',
label: "Login to jBlog",
onSubmit:function () {
console.log(arguments);
return false;
}
});
var tc = new TableContainer({
id:"loginCntr",
cols:1,
showLabels:true,
orientation:"horiz",
valign:"top",
label:"Login to jBlog"
});
var titleTxt = new TextBox({
id:"txtTitle",
name:"blogTitle",
label: "Blog Title:",
placeHolder: "New Blog Title",
style:"width:100%;",
required:true
});
var btnSubmit = new Button({
id:"btnSubmit",
type:"Submit",
label: "Submit"
});
var editor = new Editor({
id : "blogEditor",
label : "Blog Text",
extraPlugins : [
'fullscreen',
'foreColor',
'hiliteColor',
'createLink',
'insertImage',
"|",
'insertTable',
'print',
'viewsource',
"|",
{
name : "dijit/_editor/plugins/FontChoice",
command : 'fontName',
values : [ 'Segoe UI', 'Calibri', 'Courier New',
'Helvetica', 'Verdana', 'Myriad', 'Garamond' ]
},
'fontSize',
'formatBlock'],
"class" : "nihilo",
"style" : "font-family:Courier New, font-size:8pt;"
});
on(editor, 'change', function(v) {
console.log(entities.encode(v));
});
tc.addChild(titleTxt);
tc.placeAt(frm);
editor.placeAt(frm);
btnSubmit.placeAt(frm, "last");
frm.placeAt(dom.byId("mainPane"));
});
});
