5 Ext.define('Ext.samples.SamplePanel', {
6 extend: 'Ext.view.View',
7 alias: 'widget.samplepanel',
14 tpl : Ext.create('Ext.XTemplate',
15 '<div id="sample-ct">',
17 '<div><a name="{id}"></a><h2><div>{title}</div></h2>',
19 '<tpl for="samples">',
20 '<dd ext:url="{url}"><img src="shared/screens/{icon}"/>',
22 '<tpl if="this.isNew(values.status)">',
23 '<span class="new-sample"> (New)</span>',
25 '<tpl if="this.isUpdated(values.status)">',
26 '<span class="updated-sample"> (Updated)</span>',
28 '<tpl if="this.isExperimental(values.status)">',
29 '<span class="new-sample"> (Experimental)</span>',
31 '</h4><p>{desc}</p></div>',
34 '<div style="clear:left"></div></dl></div>',
37 isExperimental: function(status){
38 return status == 'experimental';
40 isNew: function(status){
41 return status == 'new';
43 isUpdated: function(status){
44 return status == 'updated';
48 onContainerClick: function(e) {
49 var group = e.getTarget('h2', 3, true);
52 group.up('div').toggleCls('collapsed');
56 onItemClick : function(record, item, index, e){
57 var t = e.getTarget('dd', 5, true);
59 if (t && !e.getTarget('a', 2)) {
60 var url = t.getAttributeNS('ext', 'url');
64 return this.callParent(arguments);
69 Ext.onReady(function() {
71 (Ext.defer(function() {
72 // Instantiate Ext.App instance
73 var App = Ext.create('Ext.App', {});
75 var catalog = Ext.samples.samplesCatalog;
77 for (var i = 0, c; c = catalog[i]; i++) {
81 var store = Ext.create('Ext.data.JsonStore', {
83 fields : ['id', 'title', 'samples'],
87 var panel = Ext.create('Ext.Panel', {
89 renderTo : Ext.get('all-demos'),
92 items : Ext.create('Ext.samples.SamplePanel', {
97 var tpl = Ext.create('Ext.XTemplate',
98 '<tpl for="."><li><a href="#{id}">{title:stripTags}</a></li></tpl>'
100 tpl.overwrite('sample-menu', catalog);
102 Ext.select('#sample-spacer').remove();
104 var headerEl = Ext.get('hd'),
105 footerEl = Ext.get('ft'),
106 bodyEl = Ext.get('bd'),
107 sideBoxEl = bodyEl.down('div[class=side-box]'),
108 titleEl = bodyEl.down('h1#pagetitle');
110 var doResize = function() {
111 var windowHeight = Ext.getDoc().getViewSize(false).height;
113 var footerHeight = footerEl.getHeight() + footerEl.getMargin().top,
114 titleElHeight = titleEl.getHeight() + titleEl.getMargin().top,
115 headerHeight = headerEl.getHeight() + titleElHeight;
117 var warnEl = Ext.get('fb');
118 var warnHeight = warnEl ? warnEl.getHeight() : 0;
120 var availHeight = windowHeight - ( footerHeight + headerHeight + 14) - warnHeight;
121 var sideBoxHeight = sideBoxEl.getHeight();
123 panel.setHeight((availHeight > sideBoxHeight) ? availHeight : sideBoxHeight);
127 Ext.EventManager.onWindowResize(doResize);
129 var firebugWarning = function () {
130 var cp = Ext.create('Ext.state.CookieProvider');
132 if(window.console && window.console.firebug && ! cp.get('hideFBWarning')){
133 var tpl = Ext.create('Ext.Template',
134 '<div id="fb" style="border: 1px solid #FF0000; background-color:#FFAAAA; display:none; padding:15px; color:#000000;"><b>Warning: </b> Firebug is known to cause performance issues with Ext JS. <a href="#" id="hideWarning">[ Hide ]</a></div>'
136 var newEl = tpl.insertFirst('all-demos');
138 Ext.fly('hideWarning').on('click', function() {
139 Ext.fly(newEl).slideOut('t',{remove:true});
140 cp.set('hideFBWarning', true);
143 Ext.fly(newEl).slideIn();
148 var hideMask = function () {
149 Ext.get('loading').remove();
150 Ext.fly('loading-mask').animate({
153 callback: firebugWarning
157 Ext.defer(hideMask, 250);