Roo/doc/Example.js

[roojs1] / Roo / doc / Example.js

diff --git a/Roo/doc/Example.js b/Roo/doc/Example.js
index d1af400..b6b560b 100644 (file)
--- a/Roo/doc/Example.js
+++ b/Roo/doc/Example.js
@@ -5,10 +5,12 @@
 
 /**
  * @class Roo.doc.Example
- * @extends Roo.bootstrap.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) section type.
+ * @cfg {String} code  example code
+ * @cfg {String} output The expected output from the code
  *
  * 
  * @constructor
@@ -16,32 +18,60 @@
  * @param {Object} config The config object
  */
 
-Roo.mailer.Example = function(config){
-    Roo.mailer.Example.superclass.constructor.call(this, config);
+Roo.doc.Example = function(config){
+    Roo.doc.Example.superclass.constructor.call(this, config);
 };
 
-Roo.extend(Roo.mailer.Example, Roo.bootstrap.Component,  {
-    
+Roo.extend(Roo.doc.Example, Roo.bootstrap.Component,  {
     
+    title : '',
     lang:   'php',
     code : '',
+    output : '',
     
     getAutoCreate : function(){
         
         // no colour highlighting in here....
         
+        var code = hljs ? hljs.highlight(this.lang.toUpperCase(),this.code) : String.format('{0}',this.code).replace(/\n/g, '<br/>');
+        
+        
         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) {
+            cfg.cn.push(
+
+                {
+                    cls : 'panel-footer',
+                    cn : {
+                        tag: 'code',
+                        html :  String.format('{0}',this.output).replace(/\n/g, '<br/>')
+                    }
+                }
+            
+                
+            );
+        }
+        
+        
        
         return cfg;
     }