More example code (6223bfdb) · Commits · extjs / jsduck

template/app/controller/Classes.js

+10 −0

Original line number	Diff line number	Diff line
		@@ -210,6 +210,16 @@ Ext.define('Docs.controller.Classes', {
		}
		classOverview.load(cls);

		Ext.Array.each(Ext.query('.inlineExample'), function(inlineEg) {
		var egId = inlineEg.getAttribute('rel');
		var divId = inlineEg.getAttribute('id');
		var eg = Ext.create('Docs.view.examples.Inline', {
		height: 100,
		renderTo: divId
		});
		eg.showExample(egId);
		});

		this.getOverview().load(cls);

		this.getOverview().setLoading(false);

template/app/model/Example.js

+1 −1

Original line number	Diff line number	Diff line
		@@ -2,7 +2,7 @@
		* Key-value pairs of Docs app settings.
		*/
		Ext.define('Docs.model.Example', {
		fields: ['id', 'primaryClass', 'referencesClasses', 'title', 'description'],
		fields: ['id', 'primaryClass', 'referencesClasses', 'title', 'description', 'location'],
		extend: 'Ext.data.Model',
		proxy: {
		type: 'memory',

template/app/view/cls/Examples.js

+2 −17

Original line number	Diff line number	Diff line
		@@ -26,23 +26,7 @@ Ext.define('Docs.view.cls.Examples', {

		listeners: {
		itemclick: function(view, record, item, index, event) {

		var inlineEg = Ext.getCmp('inlineCodeExample');

		Ext.Ajax.request({
		method : 'GET',
		url : 'doc-resources/' + record.data.id,
		headers : { 'Content-Type' : 'application/json' },

		success : function(response, opts) {
		// inlineEg.setHeight(inlineEg.codeEditor.body.getHeight());
		inlineEg.codeEditor.setValue(response.responseText);

		window.frames['egIframe'].refreshPage(inlineEg.codeEditor.getValue(), inlineEg.cssEditor.getValue());
		},
		failure : function(response, opts) {
		}
		});
		Ext.getCmp('inlineCodeExample').showExample(record.data.location);
		}
		}

		@@ -50,6 +34,7 @@ Ext.define('Docs.view.cls.Examples', {
		{
		region: 'center',
		padding: '10',
		id: 'inlineCodeExample',
		xtype: 'inlineexample'
		}
		]

template/app/view/cls/Overview.js

+13 −1

Original line number	Diff line number	Diff line
		@@ -170,6 +170,18 @@ Ext.define('Docs.view.cls.Overview', {
		'</div>'
		);

		var egId = 0;
		var replaceExample = function() {
		var idx = cls.doc.match(/\{@example ([A-Za-z\/\.]+)\}/);
		if (idx) {
		cls.doc = cls.doc.replace(/\{@example ([A-Za-z\/\.]+)\}/, '<div class="inlineExample" id="eg' + egId + '" rel="' + idx[1] + '"></div>');
		egId += 1;
		replaceExample();
		}
		}

		replaceExample();

		return this.classTpl.apply({
		doc: cls.doc,
		hierarchy: this.renderHierarchy(cls),

template/app/view/examples/inline.js

+55 −31

Original line number	Diff line number	Diff line
		/**
		* Inline example tab panel. Allows code to be demonstrated and edited inline.
		*/
		Ext.define('Docs.view.examples.Inline', {

		extend: 'Ext.tab.Panel',
		alias: 'widget.inlineexample',
		activeTab: 0,
		deferredRender: false,
		style: 'border-color: #bfbfbf;',

		plain: true,
		id: 'inlineCodeExample',
		items: [
		{
		deferredRender: false,

		initComponent: function() {

		Docs.view.examples.Inline.prototype.iframeId = Docs.view.examples.Inline.prototype.iframeId \|\| 0;
		Docs.view.examples.Inline.prototype.iframeId = Docs.view.examples.Inline.prototype.iframeId + 0;

		this.iframeId = "egIframe" + Docs.view.examples.Inline.prototype.iframeId;

		this.items = [{
		id: 'code',
		title: 'Code',
		cls: 'codemirrorCode',
		autoScroll: true
		},
		{
		}];

		this.items.push({
		id: 'preview',
		title: 'Preview',
		bodyPadding: 10,
		html: '<iframe src="egIframe.html" name="egIframe" style="width: 100%; height: 100%; border: 0"></iframe>',
		html: '<iframe src="egIframe.html" name="' + this.iframeId + '" style="width: 100%; height: 100%; border: 0"></iframe>',
		listeners: {
		show: function(a,b,c) {
		window.frames['egIframe'].refreshPage(this.ownerCt.codeEditor.getValue(), this.ownerCt.cssEditor.getValue());
		window.frames[this.ownerCt.iframeId].refreshPage(this.ownerCt.codeEditor.getValue(), this.ownerCt.cssEditor.getValue());
		}
		}
		},
		{
		});

		this.items.push({
		id: 'cssEditor',
		title: 'CSS',
		cls: 'codemirrorCode',
		autoScroll: true
		}
		],
		codeEditor: null,
		cssEditor: null,
		});

		this.callParent(arguments);
		},

		showExample: function(exampleId) {
		var url = '/sencha_examples/' + exampleId;

		var inlineEg = this;
		var url = 'doc-resources/' + exampleId;

		if (exampleId.match(/^https:\/\/api\.github\.com/)) {
		Ext.data.JsonP.request({
		url: exampleId,
		// callbackName: name,
		success: function(json) {
		inlineEg.codeEditor.setValue(json.data.files["basic_grid_panel.js"].content);
		window.frames[inlineEg.iframeId].refreshPage(inlineEg.codeEditor.getValue(), inlineEg.cssEditor.getValue());
		},
		scope: this
		});

		} else {
		Ext.Ajax.request({
		method : 'GET',
		url : url,
		headers : { 'Content-Type' : 'application/json' },

		success : function(response, opts) {
		var doc = Ext.JSON.decode(response.responseText);

		// inlineEg.setHeight(inlineEg.codeEditor.body.getHeight());
		inlineEg.codeEditor.setValue(doc.content);
		inlineEg.cssEditor.setValue(doc.css \|\| '');

		window.frames['egIframe'].refreshPage(inlineEg.codeEditor.getValue(), inlineEg.cssEditor.getValue());
		inlineEg.codeEditor.setValue(response.responseText);
		console.log(inlineEg.iframeId);
		window.frames[inlineEg.iframeId].refreshPage(inlineEg.codeEditor.getValue(), inlineEg.cssEditor.getValue());
		},
		failure : function(response, opts) {
		}
		});
		}


		},

		listeners: {