Ext.define('KitchenSink.controller.Main', {
|
extend: 'Ext.app.Controller',
|
requires: [
|
'KitchenSink.view.*',
|
'Ext.window.Window'
|
],
|
|
stores: [
|
'Companies',
|
'Restaurants',
|
'Files',
|
'States',
|
'BigData'
|
],
|
|
refs: [
|
{
|
ref: 'viewport',
|
selector: 'viewport'
|
},
|
{
|
ref: 'navigation',
|
selector: 'navigation'
|
},
|
{
|
ref: 'contentPanel',
|
selector: 'contentPanel'
|
},
|
{
|
ref: 'descriptionPanel',
|
selector: 'descriptionPanel'
|
},
|
{
|
ref: 'codePreview',
|
selector: 'codePreview'
|
}
|
],
|
|
exampleRe: /^\s*\/\/\s*(\<\/?example>)\s*$/,
|
|
init: function() {
|
this.control({
|
'navigation': {
|
selectionchange: 'onNavSelectionChange'
|
},
|
'viewport': {
|
afterlayout: 'afterViewportLayout'
|
},
|
'codePreview tool[type=maximize]': {
|
click: 'onMaximizeClick'
|
},
|
'contentPanel': {
|
resize: 'centerContent'
|
},
|
'tool[regionTool]': {
|
click: 'onSetRegion'
|
}
|
});
|
},
|
|
onSetRegion: function (tool) {
|
var panel = tool.toolOwner;
|
|
var regionMenu = panel.regionMenu || (panel.regionMenu =
|
Ext.widget({
|
xtype: 'menu',
|
items: [{
|
text: 'North',
|
checked: panel.region === 'north',
|
group: 'mainregion',
|
handler: function () {
|
panel.setBorderRegion('north');
|
}
|
},{
|
text: 'South',
|
checked: panel.region === 'south',
|
group: 'mainregion',
|
handler: function () {
|
panel.setBorderRegion('south');
|
}
|
},{
|
text: 'East',
|
checked: panel.region === 'east',
|
group: 'mainregion',
|
handler: function () {
|
panel.setBorderRegion('east');
|
}
|
},{
|
text: 'West',
|
checked: panel.region === 'west',
|
group: 'mainregion',
|
handler: function () {
|
panel.setBorderRegion('west');
|
}
|
}]
|
}));
|
|
regionMenu.showBy(tool.el);
|
},
|
|
afterViewportLayout: function() {
|
if (!this.navigationSelected) {
|
var id = location.hash.substring(1),
|
navigation = this.getNavigation(),
|
store = navigation.getStore(),
|
node;
|
|
node = id ? store.getNodeById(id) : store.getRootNode().firstChild.firstChild;
|
|
navigation.getSelectionModel().select(node);
|
navigation.getView().focusNode(node);
|
this.navigationSelected = true;
|
}
|
},
|
|
onNavSelectionChange: function(selModel, records) {
|
var record = records[0],
|
text = record.get('text'),
|
xtype = record.get('id'),
|
alias = 'widget.' + xtype,
|
contentPanel = this.getContentPanel(),
|
themeName = Ext.themeName,
|
cmp;
|
|
if (xtype) { // only leaf nodes have ids
|
contentPanel.removeAll(true);
|
|
var className = Ext.ClassManager.getNameByAlias(alias);
|
var ViewClass = Ext.ClassManager.get(className);
|
var clsProto = ViewClass.prototype;
|
if (clsProto.themes) {
|
clsProto.themeInfo = clsProto.themes[themeName];
|
if (themeName === 'gray' || themeName === 'access') {
|
clsProto.themeInfo = Ext.applyIf(clsProto.themeInfo || {}, clsProto.themes.classic);
|
}
|
}
|
|
cmp = new ViewClass();
|
contentPanel.add(cmp);
|
if (cmp.floating) {
|
cmp.show();
|
} else {
|
this.centerContent();
|
}
|
|
contentPanel.setTitle(text);
|
|
document.title = document.title.split(' - ')[0] + ' - ' + text;
|
location.hash = xtype;
|
|
this.updateDescription(clsProto);
|
|
if (clsProto.exampleCode) {
|
this.updateCodePreview(clsProto.exampleCode);
|
} else {
|
this.updateCodePreviewAsync(clsProto, xtype);
|
}
|
}
|
},
|
|
onMaximizeClick: function(){
|
var preview = this.getCodePreview(),
|
code = preview.getEl().down('.prettyprint').dom.innerHTML;
|
|
var w = new Ext.window.Window({
|
rtl: false,
|
baseCls: 'x-panel',
|
maximized: true,
|
title: 'Code Preview',
|
plain: true,
|
cls: 'preview-container',
|
autoScroll: true,
|
bodyStyle: 'background-color:white',
|
html: '<pre class="prettyprint">' + code + '</pre>',
|
closable: false,
|
tools: [{
|
type: 'close',
|
handler: function() {
|
w.hide(preview, function() {
|
w.destroy();
|
});
|
}
|
}]
|
});
|
w.show(preview);
|
},
|
|
processCodePreview: function (clsProto, text) {
|
var me = this,
|
lines = text.split('\n'),
|
removing = false,
|
keepLines = [],
|
tempLines = [],
|
n = lines.length,
|
i, line;
|
|
// Remove all "example" blocks as they are fluff.
|
//
|
for (i = 0; i < n; ++i) {
|
line = lines[i];
|
if (removing) {
|
if (me.exampleRe.test(line)) {
|
removing = false;
|
}
|
} else if (me.exampleRe.test(line)) {
|
removing = true;
|
} else {
|
tempLines.push(line);
|
}
|
}
|
|
// Inline any themeInfo values to clarify the code.
|
//
|
if (clsProto.themeInfo) {
|
var path = ['this', 'themeInfo'];
|
|
function process (obj) {
|
for (var name in obj) {
|
var value = obj[name];
|
|
path.push(name);
|
|
if (Ext.isPrimitive(value)) {
|
if (Ext.isString(value)) {
|
value = "'" + value + "'";
|
}
|
me.replaceValues(tempLines, path.join('.'), value);
|
} else {
|
process(value);
|
}
|
|
path.pop();
|
}
|
}
|
|
process(clsProto.themeInfo);
|
}
|
|
// Remove any lines with remaining (unused) themeInfo. These properties will
|
// be "undefined" for this theme and so are useless to the example.
|
//
|
for (i = 0, n = tempLines.length; i < n; ++i) {
|
line = tempLines[i];
|
if (line.indexOf('themeInfo') < 0) {
|
keepLines.push(line);
|
}
|
}
|
|
var code = keepLines.join('\n');
|
code = Ext.htmlEncode(code);
|
clsProto.exampleCode = code;
|
},
|
|
replaceValues: function (lines, text, value) {
|
var n = lines.length,
|
i, pos, line;
|
|
for (i = 0; i < n; ++i) {
|
line = lines[i];
|
pos = line.indexOf(text);
|
if (pos >= 0) {
|
lines[i] = line.split(text).join(String(value));
|
}
|
}
|
},
|
|
updateCodePreview: function (text) {
|
this.getCodePreview().update(
|
'<pre id="code-preview-container" class="prettyprint">' + text + '</pre>'
|
);
|
prettyPrint();
|
},
|
|
updateCodePreviewAsync: function(clsProto, xtype) {
|
var me = this,
|
className = Ext.ClassManager.getNameByAlias('widget.' + xtype),
|
path = className.replace(/\./g, '/').replace('KitchenSink', 'app') + '.js';
|
|
if (!Ext.repoDevMode) {
|
path = '../../../kitchensink/' + path;
|
}
|
|
Ext.Ajax.request({
|
url: path,
|
success: function(response) {
|
me.processCodePreview(clsProto, response.responseText);
|
me.updateCodePreview(clsProto.exampleCode);
|
}
|
});
|
},
|
|
updateDescription: function (clsProto) {
|
var description = clsProto.exampleDescription,
|
descriptionPanel = this.getDescriptionPanel();
|
|
if (Ext.isArray(description)) {
|
clsProto.exampleDescription = description = description.join('');
|
}
|
|
descriptionPanel.update(description);
|
},
|
|
centerContent: function() {
|
var contentPanel = this.getContentPanel(),
|
body = contentPanel.body,
|
item = contentPanel.items.getAt(0),
|
align = 'c-c',
|
overflowX,
|
overflowY,
|
offsets;
|
|
if (item) {
|
overflowX = (body.getWidth() < (item.getWidth() + 40));
|
overflowY = (body.getHeight() < (item.getHeight() + 40));
|
|
if (overflowX && overflowY) {
|
align = 'tl-tl';
|
offsets = [20, 20];
|
} else if (overflowX) {
|
align = 'l-l';
|
offsets = [20, 0];
|
} else if (overflowY) {
|
align = 't-t';
|
offsets = [0, 20];
|
}
|
|
item.alignTo(contentPanel.body, align, offsets);
|
}
|
}
|
});
|
