docs/resources/docs.js

   1 Ext.BLANK_IMAGE_URL = 'resources/s.gif';
   2
   3 Docs = {};
   4
   5 ApiPanel = function() {
   6     ApiPanel.superclass.constructor.call(this, {
   7         id:'api-tree',
   8         region:'west',
   9         split:true,
  10         width: 280,
  11         minSize: 175,
  12         maxSize: 500,
  13         collapsible: true,
  14         margins:'0 0 5 5',
  15         cmargins:'0 0 0 0',
  16         rootVisible:false,
  17         lines:false,
  18         autoScroll:true,
  19         animCollapse:false,
  20         animate: false,
  21         collapseMode:'mini',
  22         loader: new Ext.tree.TreeLoader({
  23                         preloadChildren: true,
  24                         clearOnLoad: false
  25                 }),
  26         root: new Ext.tree.AsyncTreeNode({
  27             text:'Ext JS',
  28             id:'root',
  29             expanded:true,
  30             children:[Docs.classData]
  31          }),
  32         collapseFirst:false
  33     });
  34     // no longer needed!
  35     //new Ext.tree.TreeSorter(this, {folderSort:true,leafAttr:'isClass'});
  36
  37     this.getSelectionModel().on('beforeselect', function(sm, node){
  38         return node.isLeaf();
  39     });
  40 };
  41
  42 Ext.extend(ApiPanel, Ext.tree.TreePanel, {
  43     initComponent: function(){
  44         this.hiddenPkgs = [];
  45         Ext.apply(this, {
  46             tbar:[ ' ',
  47                         new Ext.form.TextField({
  48                                 width: 200,
  49                                 emptyText:'Find a Class',
  50                 enableKeyEvents: true,
  51                                 listeners:{
  52                                         render: function(f){
  53                         this.filter = new Ext.tree.TreeFilter(this, {
  54                                 clearBlank: true,
  55                                 autoClear: true
  56                         });
  57                                         },
  58                     keydown: {
  59                         fn: this.filterTree,
  60                         buffer: 350,
  61                         scope: this
  62                     },
  63                     scope: this
  64                                 }
  65                         }), ' ', ' ',
  66                         {
  67                 iconCls: 'icon-expand-all',
  68                                 tooltip: 'Expand All',
  69                 handler: function(){ this.root.expand(true); },
  70                 scope: this
  71             }, '-', {
  72                 iconCls: 'icon-collapse-all',
  73                 tooltip: 'Collapse All',
  74                 handler: function(){ this.root.collapse(true); },
  75                 scope: this
  76             }]
  77         })
  78         ApiPanel.superclass.initComponent.call(this);
  79     },
  80         filterTree: function(t, e){
  81                 var text = t.getValue();
  82                 Ext.each(this.hiddenPkgs, function(n){
  83                         n.ui.show();
  84                 });
  85                 if(!text){
  86                         this.filter.clear();
  87                         return;
  88                 }
  89                 this.expandAll();
  90
  91                 var re = new RegExp('^' + Ext.escapeRe(text), 'i');
  92                 this.filter.filterBy(function(n){
  93                         return !n.attributes.isClass || re.test(n.text);
  94                 });
  95
  96                 // hide empty packages that weren't filtered
  97                 this.hiddenPkgs = [];
  98                 this.root.cascade(function(n){
  99                         if(!n.attributes.isClass && n.ui.ctNode.offsetHeight < 3){
 100                                 n.ui.hide();
 101                                 this.hiddenPkgs.push(n);
 102                         }
 103                 });
 104         },
 105     selectClass : function(cls){
 106         if(cls){
 107             var parts = cls.split('.');
 108             var last = parts.length-1;
 109             var res = [];
 110             var pkg = [];
 111             for(var i = 0; i < last; i++){ // things get nasty - static classes can have .
 112                 var p = parts[i];
 113                 var fc = p.charAt(0);
 114                 var staticCls = fc.toUpperCase() == fc;
 115                 if(p == 'Ext' || !staticCls){
 116                     pkg.push(p);
 117                     res[i] = 'pkg-'+pkg.join('.');
 118                 }else if(staticCls){
 119                     --last;
 120                     res.splice(i, 1);
 121                 }
 122             }
 123             res[last] = cls;
 124
 125             this.selectPath('/root/apidocs/'+res.join('/'));
 126         }
 127     }
 128 });
 129
 130
 131 DocPanel = Ext.extend(Ext.Panel, {
 132     closable: true,
 133     autoScroll:true,
 134
 135     initComponent : function(){
 136         var ps = this.cclass.split('.');
 137         this.title = ps[ps.length-1];
 138         Ext.apply(this,{
 139             tbar: ['->',{
 140                 text: 'Config Options',
 141                 handler: this.scrollToMember.createDelegate(this, ['configs']),
 142                 iconCls: 'icon-config'
 143             },'-',{
 144                 text: 'Properties',
 145                 handler: this.scrollToMember.createDelegate(this, ['props']),
 146                 iconCls: 'icon-prop'
 147             }, '-',{
 148                 text: 'Methods',
 149                 handler: this.scrollToMember.createDelegate(this, ['methods']),
 150                 iconCls: 'icon-method'
 151             }, '-',{
 152                 text: 'Events',
 153                 handler: this.scrollToMember.createDelegate(this, ['events']),
 154                 iconCls: 'icon-event'
 155             }, '-',{
 156                 text: 'Direct Link',
 157                 handler: this.directLink,
 158                 scope: this,
 159                 iconCls: 'icon-fav'
 160             }, '-',{
 161                 tooltip:'Hide Inherited Members',
 162                 iconCls: 'icon-hide-inherited',
 163                 enableToggle: true,
 164                 scope: this,
 165                 toggleHandler : function(b, pressed){
 166                      this.body[pressed ? 'addClass' : 'removeClass']('hide-inherited');
 167                 }
 168             }, '-', {
 169                 tooltip:'Expand All Members',
 170                 iconCls: 'icon-expand-members',
 171                 enableToggle: true,
 172                 scope: this,
 173                 toggleHandler : function(b, pressed){
 174                     this.body[pressed ? 'addClass' : 'removeClass']('full-details');
 175                 }
 176             }]
 177         });
 178         DocPanel.superclass.initComponent.call(this);
 179     },
 180
 181     directLink : function(){
 182         var link = String.format(
 183             "<a href=\"{0}\" target=\"_blank\">{0}</a>",
 184             document.location.href+'?class='+this.cclass
 185         );
 186         Ext.Msg.alert('Direct Link to ' + this.cclass,link);
 187     },
 188
 189     scrollToMember : function(member){
 190         var el = Ext.fly(this.cclass + '-' + member);
 191         if(el){
 192             var top = (el.getOffsetsTo(this.body)[1]) + this.body.dom.scrollTop;
 193             this.body.scrollTo('top', top-25, {duration:0.75, callback: this.hlMember.createDelegate(this, [member])});
 194         }
 195     },
 196
 197         scrollToSection : function(id){
 198                 var el = Ext.getDom(id);
 199                 if(el){
 200                         var top = (Ext.fly(el).getOffsetsTo(this.body)[1]) + this.body.dom.scrollTop;
 201                         this.body.scrollTo('top', top-25, {duration:0.5, callback: function(){
 202                 Ext.fly(el).next('h2').pause(0.2).highlight('#8DB2E3', {attr:'color'});
 203             }});
 204         }
 205         },
 206
 207     hlMember : function(member){
 208         var el = Ext.fly(this.cclass + '-' + member);
 209         if(el){
 210             if (tr = el.up('tr')) {
 211                 tr.highlight('#cadaf9');
 212             }
 213         }
 214     }
 215 });
 216
 217
 218 MainPanel = function(){
 219
 220         this.searchStore = new Ext.data.Store({
 221         proxy: new Ext.data.ScriptTagProxy({
 222             url: 'http://extjs.com/playpen/api.php'
 223         }),
 224         reader: new Ext.data.JsonReader({
 225                     root: 'data'
 226                 },
 227                         ['cls', 'member', 'type', 'doc']
 228                 ),
 229                 baseParams: {},
 230         listeners: {
 231             'beforeload' : function(){
 232                 this.baseParams.qt = Ext.getCmp('search-type').getValue();
 233             }
 234         }
 235     });
 236
 237     MainPanel.superclass.constructor.call(this, {
 238         id:'doc-body',
 239         region:'center',
 240         margins:'0 5 5 0',
 241         resizeTabs: true,
 242         minTabWidth: 135,
 243         tabWidth: 135,
 244         plugins: new Ext.ux.TabCloseMenu(),
 245         enableTabScroll: true,
 246         activeTab: 0,
 247
 248         items: {
 249             id:'welcome-panel',
 250             title: 'API Home',
 251             autoLoad: {url: 'welcome.html', callback: this.initSearch, scope: this},
 252             iconCls:'icon-docs',
 253             autoScroll: true,
 254                         tbar: [
 255                                 'Search: ', ' ',
 256                 new Ext.ux.SelectBox({
 257                     listClass:'x-combo-list-small',
 258                     width:90,
 259                     value:'Starts with',
 260                     id:'search-type',
 261                     store: new Ext.data.SimpleStore({
 262                         fields: ['text'],
 263                         expandData: true,
 264                         data : ['Starts with', 'Ends with', 'Any match']
 265                     }),
 266                     displayField: 'text'
 267                 }), ' ',
 268                 new Ext.app.SearchField({
 269                         width:240,
 270                                         store: this.searchStore,
 271                                         paramName: 'q'
 272                     })
 273             ]
 274         }
 275     });
 276 };
 277
 278 Ext.extend(MainPanel, Ext.TabPanel, {
 279
 280     initEvents : function(){
 281         MainPanel.superclass.initEvents.call(this);
 282         this.body.on('click', this.onClick, this);
 283     },
 284
 285     onClick: function(e, target){
 286         if(target = e.getTarget('a:not(.exi)', 3)){
 287             var cls = Ext.fly(target).getAttributeNS('ext', 'cls');
 288             e.stopEvent();
 289             if(cls){
 290                 var member = Ext.fly(target).getAttributeNS('ext', 'member');
 291                 this.loadClass(target.href, cls, member);
 292             }else if(target.className == 'inner-link'){
 293                 this.getActiveTab().scrollToSection(target.href.split('#')[1]);
 294             }else{
 295                 window.open(target.href);
 296             }
 297         }else if(target = e.getTarget('.micon', 2)){
 298             e.stopEvent();
 299             var tr = Ext.fly(target.parentNode);
 300             if(tr.hasClass('expandable')){
 301                 tr.toggleClass('expanded');
 302             }
 303         }
 304     },
 305
 306     loadClass : function(href, cls, member){
 307         var id = 'docs-' + cls;
 308         var tab = this.getComponent(id);
 309         if(tab){
 310             this.setActiveTab(tab);
 311             if(member){
 312                 tab.scrollToMember(member);
 313             }
 314         }else{
 315             var autoLoad = {url: href};
 316             if(member){
 317                 autoLoad.callback = function(){
 318                     Ext.getCmp(id).scrollToMember(member);
 319                 }
 320             }
 321             var p = this.add(new DocPanel({
 322                 id: id,
 323                 cclass : cls,
 324                 autoLoad: autoLoad,
 325                 iconCls: Docs.icons[cls]
 326             }));
 327             this.setActiveTab(p);
 328         }
 329     },
 330
 331         initSearch : function(){
 332                 // Custom rendering Template for the View
 333             var resultTpl = new Ext.XTemplate(
 334                 '<tpl for=".">',
 335                 '<div class="search-item">',
 336                     '<a class="member" ext:cls="{cls}" ext:member="{member}" href="output/{cls}.html">',
 337                                 '<img src="resources/images/default/s.gif" class="item-icon icon-{type}"/>{member}',
 338                                 '</a> ',
 339                                 '<a class="cls" ext:cls="{cls}" href="output/{cls}.html">{cls}</a>',
 340                     '<p>{doc}</p>',
 341                 '</div></tpl>'
 342             );
 343
 344                 var p = new Ext.DataView({
 345             applyTo: 'search',
 346                         tpl: resultTpl,
 347                         loadingText:'Searching...',
 348             store: this.searchStore,
 349             itemSelector: 'div.search-item',
 350                         emptyText: '<h3>Use the search field above to search the Ext API for classes, properties, config options, methods and events.</h3>'
 351         });
 352         },
 353
 354         doSearch : function(e){
 355                 var k = e.getKey();
 356                 if(!e.isSpecialKey()){
 357                         var text = e.target.value;
 358                         if(!text){
 359                                 this.searchStore.baseParams.q = '';
 360                                 this.searchStore.removeAll();
 361                         }else{
 362                                 this.searchStore.baseParams.q = text;
 363                                 this.searchStore.reload();
 364                         }
 365                 }
 366         }
 367 });
 368
 369
 370 Ext.onReady(function(){
 371
 372     Ext.QuickTips.init();
 373
 374     var api = new ApiPanel();
 375     var mainPanel = new MainPanel();
 376
 377     api.on('click', function(node, e){
 378          if(node.isLeaf()){
 379             e.stopEvent();
 380             mainPanel.loadClass(node.attributes.href, node.id);
 381          }
 382     });
 383
 384     mainPanel.on('tabchange', function(tp, tab){
 385         api.selectClass(tab.cclass);
 386     });
 387
 388     var viewport = new Ext.Viewport({
 389         layout:'border',
 390         items:[ {
 391             cls: 'docs-header',
 392             height: 36,
 393             region:'north',
 394             xtype:'box',
 395             el:'header',
 396             border:false,
 397             margins: '0 0 5 0'
 398         }, api, mainPanel ]
 399     });
 400
 401     api.expandPath('/root/apidocs');
 402
 403     // allow for link in
 404     var page = window.location.href.split('?')[1];
 405     if(page){
 406         var ps = Ext.urlDecode(page);
 407         var cls = ps['class'];
 408         mainPanel.loadClass('output/' + cls + '.html', cls, ps.member);
 409     }
 410
 411     viewport.doLayout();
 412
 413         setTimeout(function(){
 414         Ext.get('loading').remove();
 415         Ext.get('loading-mask').fadeOut({remove:true});
 416     }, 250);
 417
 418 });
 419
 420
 421 Ext.app.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
 422     initComponent : function(){
 423         if(!this.store.baseParams){
 424                         this.store.baseParams = {};
 425                 }
 426                 Ext.app.SearchField.superclass.initComponent.call(this);
 427                 this.on('specialkey', function(f, e){
 428             if(e.getKey() == e.ENTER){
 429                 this.onTrigger2Click();
 430             }
 431         }, this);
 432     },
 433
 434     validationEvent:false,
 435     validateOnBlur:false,
 436     trigger1Class:'x-form-clear-trigger',
 437     trigger2Class:'x-form-search-trigger',
 438     hideTrigger1:true,
 439     width:180,
 440     hasSearch : false,
 441     paramName : 'query',
 442
 443     onTrigger1Click : function(){
 444         if(this.hasSearch){
 445             this.store.baseParams[this.paramName] = '';
 446                         this.store.removeAll();
 447                         this.el.dom.value = '';
 448             this.triggers[0].hide();
 449             this.hasSearch = false;
 450                         this.focus();
 451         }
 452     },
 453
 454     onTrigger2Click : function(){
 455         var v = this.getRawValue();
 456         if(v.length < 1){
 457             this.onTrigger1Click();
 458             return;
 459         }
 460                 if(v.length < 2){
 461                         Ext.Msg.alert('Invalid Search', 'You must enter a minimum of 2 characters to search the API');
 462                         return;
 463                 }
 464                 this.store.baseParams[this.paramName] = v;
 465         var o = {start: 0};
 466         this.store.reload({params:o});
 467         this.hasSearch = true;
 468         this.triggers[0].show();
 469                 this.focus();
 470     }
 471 });
 472
 473
 474 /**
 475  * Makes a ComboBox more closely mimic an HTML SELECT.  Supports clicking and dragging
 476  * through the list, with item selection occurring when the mouse button is released.
 477  * When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}
 478  * on inner elements.  Re-enabling editable after calling this will NOT work.
 479  *
 480  * @author Corey Gilmore
 481  * http://extjs.com/forum/showthread.php?t=6392
 482  *
 483  * @history 2007-07-08 jvs
 484  * Slight mods for Ext 2.0
 485  */
 486 Ext.ux.SelectBox = function(config){
 487         this.searchResetDelay = 1000;
 488         config = config || {};
 489         config = Ext.apply(config || {}, {
 490                 editable: false,
 491                 forceSelection: true,
 492                 rowHeight: false,
 493                 lastSearchTerm: false,
 494         triggerAction: 'all',
 495         mode: 'local'
 496     });
 497
 498         Ext.ux.SelectBox.superclass.constructor.apply(this, arguments);
 499
 500         this.lastSelectedIndex = this.selectedIndex || 0;
 501 };
 502
 503 Ext.extend(Ext.ux.SelectBox, Ext.form.ComboBox, {
 504     lazyInit: false,
 505         initEvents : function(){
 506                 Ext.ux.SelectBox.superclass.initEvents.apply(this, arguments);
 507                 // you need to use keypress to capture upper/lower case and shift+key, but it doesn't work in IE
 508                 this.el.on('keydown', this.keySearch, this, true);
 509                 this.cshTask = new Ext.util.DelayedTask(this.clearSearchHistory, this);
 510         },
 511
 512         keySearch : function(e, target, options) {
 513                 var raw = e.getKey();
 514                 var key = String.fromCharCode(raw);
 515                 var startIndex = 0;
 516
 517                 if( !this.store.getCount() ) {
 518                         return;
 519                 }
 520
 521                 switch(raw) {
 522                         case Ext.EventObject.HOME:
 523                                 e.stopEvent();
 524                                 this.selectFirst();
 525                                 return;
 526
 527                         case Ext.EventObject.END:
 528                                 e.stopEvent();
 529                                 this.selectLast();
 530                                 return;
 531
 532                         case Ext.EventObject.PAGEDOWN:
 533                                 this.selectNextPage();
 534                                 e.stopEvent();
 535                                 return;
 536
 537                         case Ext.EventObject.PAGEUP:
 538                                 this.selectPrevPage();
 539                                 e.stopEvent();
 540                                 return;
 541                 }
 542
 543                 // skip special keys other than the shift key
 544                 if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {
 545                         return;
 546                 }
 547                 if( this.lastSearchTerm == key ) {
 548                         startIndex = this.lastSelectedIndex;
 549                 }
 550                 this.search(this.displayField, key, startIndex);
 551                 this.cshTask.delay(this.searchResetDelay);
 552         },
 553
 554         onRender : function(ct, position) {
 555                 this.store.on('load', this.calcRowsPerPage, this);
 556                 Ext.ux.SelectBox.superclass.onRender.apply(this, arguments);
 557                 if( this.mode == 'local' ) {
 558                         this.calcRowsPerPage();
 559                 }
 560         },
 561
 562         onSelect : function(record, index, skipCollapse){
 563                 if(this.fireEvent('beforeselect', this, record, index) !== false){
 564                         this.setValue(record.data[this.valueField || this.displayField]);
 565                         if( !skipCollapse ) {
 566                                 this.collapse();
 567                         }
 568                         this.lastSelectedIndex = index + 1;
 569                         this.fireEvent('select', this, record, index);
 570                 }
 571         },
 572
 573         render : function(ct) {
 574                 Ext.ux.SelectBox.superclass.render.apply(this, arguments);
 575                 if( Ext.isSafari ) {
 576                         this.el.swallowEvent('mousedown', true);
 577                 }
 578                 this.el.unselectable();
 579                 this.innerList.unselectable();
 580                 this.trigger.unselectable();
 581                 this.innerList.on('mouseup', function(e, target, options) {
 582                         if( target.id && target.id == this.innerList.id ) {
 583                                 return;
 584                         }
 585                         this.onViewClick();
 586                 }, this);
 587
 588                 this.innerList.on('mouseover', function(e, target, options) {
 589                         if( target.id && target.id == this.innerList.id ) {
 590                                 return;
 591                         }
 592                         this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
 593                         this.cshTask.delay(this.searchResetDelay);
 594                 }, this);
 595
 596                 this.trigger.un('click', this.onTriggerClick, this);
 597                 this.trigger.on('mousedown', function(e, target, options) {
 598                         e.preventDefault();
 599                         this.onTriggerClick();
 600                 }, this);
 601
 602                 this.on('collapse', function(e, target, options) {
 603                         Ext.getDoc().un('mouseup', this.collapseIf, this);
 604                 }, this, true);
 605
 606                 this.on('expand', function(e, target, options) {
 607                         Ext.getDoc().on('mouseup', this.collapseIf, this);
 608                 }, this, true);
 609         },
 610
 611         clearSearchHistory : function() {
 612                 this.lastSelectedIndex = 0;
 613                 this.lastSearchTerm = false;
 614         },
 615
 616         selectFirst : function() {
 617                 this.focusAndSelect(this.store.data.first());
 618         },
 619
 620         selectLast : function() {
 621                 this.focusAndSelect(this.store.data.last());
 622         },
 623
 624         selectPrevPage : function() {
 625                 if( !this.rowHeight ) {
 626                         return;
 627                 }
 628                 var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);
 629                 this.focusAndSelect(this.store.getAt(index));
 630         },
 631
 632         selectNextPage : function() {
 633                 if( !this.rowHeight ) {
 634                         return;
 635                 }
 636                 var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);
 637                 this.focusAndSelect(this.store.getAt(index));
 638         },
 639
 640         search : function(field, value, startIndex) {
 641                 field = field || this.displayField;
 642                 this.lastSearchTerm = value;
 643                 var index = this.store.find.apply(this.store, arguments);
 644                 if( index !== -1 ) {
 645                         this.focusAndSelect(index);
 646                 }
 647         },
 648
 649         focusAndSelect : function(record) {
 650                 var index = typeof record === 'number' ? record : this.store.indexOf(record);
 651                 this.select(index, this.isExpanded());
 652                 this.onSelect(this.store.getAt(record), index, this.isExpanded());
 653         },
 654
 655         calcRowsPerPage : function() {
 656                 if( this.store.getCount() ) {
 657                         this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
 658                         this.rowsPerPage = this.maxHeight / this.rowHeight;
 659                 } else {
 660                         this.rowHeight = false;
 661                 }
 662         }
 663
 664 });
 665
 666 Ext.Ajax.on('requestcomplete', function(ajax, xhr, o){
 667     if(typeof urchinTracker == 'function' && o && o.url){
 668         urchinTracker(o.url);
 669     }
 670 });