* @class Roo.doc.Example
* @extends Roo.bootstrap.Component
* Example Element class
- * @cfg {String} lang (phpcode|programlisting) section type.
- * @cfg {String} code
+ * @cfg {String} title short title describing example
+ * @cfg {String} lang (php|txt|sql) code language.
+ * @cfg {String} code example code
+ * @cfg {String} output The expected output from the code
+ * @cfg {String} outputlang php|txt|sql) output language
*
*
* @constructor
Roo.extend(Roo.doc.Example, Roo.bootstrap.Component, {
-
+ title : '',
lang: 'php',
code : '',
+ output : '',
+ outputlang : 'txt',
getAutoCreate : function(){
// no colour highlighting in here....
+ var code = hljs ? hljs.highlight(this.lang,this.code).value :
+ String.format('{0}',this.code).replace(/\n/g, '<br/>');
+
+ Roo.log("code=" + code);
var cfg ={
-
- cls : this.lang,
-
+ cls : 'panel panel-info',
cn : [
{
- tag: 'code',
- html : String.format('{0}',this.code).replace(/\n/g, '<br/>')
+ cls : 'panel-heading',
+ html : this.title
+ },
+ {
+ cls : 'panel-body',
+ cn : [
+ {
+ tag: 'pre',
+ cls : 'lang-' + this.lang,
+ html : code
+ }
+ ]
}
]
};
+ if (this.output) {
+
+ var out = hljs ? hljs.highlight(this.outputlang,this.output).value :
+ String.format('{0}',this.output).replace(/\n/g, '<br/>');
+ cfg.cn.push(
+
+ {
+ cls : 'panel-footer',
+ cn : {
+ tag: 'pre',
+ html : out
+ }
+ }
+
+
+ );
+ }
+
+
return cfg;
}