samples.js

ext-2.3.0

        },{
            text: 'ComboBox Templates',
            url: 'form/forum-search.html',
            icon: 'combo-custom.gif',
            desc: 'Customized combo with template-based list rendering, remote loading and paging.'
        }]
    },{
        title: 'Forms',
        samples: [{
            text: 'Dynamic Forms',
            url: 'form/dynamic.html',
            icon: 'form-dynamic.gif',
            desc: 'Various example forms showing collapsible fieldsets, column layout, nested TabPanels and more.'
        },{
            text: 'Ajax with XML Forms',
            url: 'form/xml-form.html',
            icon: 'form-xml.gif',
            desc: 'Ajax-loaded form fields from remote XML data and remote field validation on submit.'
        },{
            text: 'Custom Search Field',
            url: 'form/custom.html',
            icon: 'form-custom.gif',
            desc: 'A TriggerField search extension combined with an XTemplate for custom results rendering.'
        },{
            text: 'Binding a Grid to a Form',
            url: 'form/form-grid.html',
            icon: 'form-grid-binding.gif',
            desc: 'A grid embedded within a FormPanel that automatically loads records into the form on row selection.'
        },{
            text: 'Advanced Validation',
            url: 'form/adv-vtypes.html',
            icon: 'form-adv-vtypes.gif',
            desc: 'Relational form field validation using custom vtypes.'
        },{
            text: 'Checkbox/Radio Groups',
            url: 'form/check-radio.html',
            icon: 'form-check-radio.gif',
            desc: 'Many examples showing different checkbox and radio group configurations.'
        },{
            text: 'File Upload Field',
            url: 'form/file-upload.html',
            icon: 'form-file-upload.gif',
            desc: 'A demo of how to give standard file upload fields a bit of Ext style using a custom class.'
        },{
            text: 'MultiSelect and ItemSelector',
            url: 'multiselect/multiselect-demo.html',
            icon: 'form-multiselect.gif',
            desc: 'Example controls for selecting a list of items in forms.'
        }]
    },{
        title: 'Toolbars and Menus',
        samples: [{
            text: 'Basic Toolbar',
            url: 'menu/menus.html',
            icon: 'toolbar.gif',
            desc: 'Toolbar and menus that contain various components like date pickers, color pickers, sub-menus and more.'
        },{
            text: 'Ext Actions',
            url: 'menu/actions.html',
            icon: 'toolbar-actions.gif',
            desc: 'Bind the same behavior to multiple buttons, toolbar and menu items using the Ext.Action class.'
        }]
    },{
        title: 'Templates and DataView',
        samples: [{
            text: 'Templates',
            url: 'core/templates.html',
            icon: 'templates.gif',
            desc: 'A simple example of rendering views from templates bound to data objects.'
        },{
            text: 'DataView',
            url: 'view/data-view.html',
            icon: 'data-view.gif',
            desc: 'A basic DataView with custom plugins for editable labels and drag selection of items.'
        },{
            text: 'DataView (advanced)',
            url: 'view/chooser.html',
            icon: 'chooser.gif',
            desc: 'A more customized DataView supporting sorting and filtering with multiple templates.'
        }]
    },{
		title   : 'Drag and Drop',
		samples :  [{
			text : 'Grid to Grid Drag and Drop',
			url  : 'dd/dnd_grid_to_grid.html',
			icon : 'dd-gridtogrid.gif',
			desc : 'A simple drag and drop from grid to grid implementation.'
    	},{
			text : 'Grid to FormPanel Drag and Drop',
			url  : 'dd/dnd_grid_to_formpanel.html',
			icon : 'dd-gridtoformpanel.gif',
			desc : 'A basic drag and drop from grid to formpanel.'
    	},{
			text : 'Custom Drag and Drop',
			url  : 'dd/dragdropzones.html',
			icon : 'dd-zones.gif',
			desc : 'Enabling drag and drop between a DataView and a grid using DragZone and DropZone extensions.'
        }]
	},{
        title: 'Miscellaneous',
        samples: [{
            text: 'History',
            url: 'history/history.html',
            icon: 'history.gif',
            desc: 'A History manager that allows the user to navigate an Ext UI via browser back/forward.'
        },{
            text: 'Google Maps',
            url: 'window/gmap.html',
            icon: 'gmap-panel.gif',
            desc: 'A Google Maps wrapper class that enables easy display of dynamic maps in Ext panels and windows.'
        },{
            text: 'StatusBar',
            url: 'statusbar/statusbar-demo.html',
            icon: 'statusbar.gif',
            desc: 'A simple StatusBar that can be dropped into the bottom of any panel to display status text and icons.'
        },{
            text: 'StatusBar (advanced)',
            url: 'statusbar/statusbar-advanced.html',
            icon: 'statusbar-plugin.gif',
            desc: 'Customizing the StatusBar via a plugin to provide automatic form validation monitoring and error linking.'
       },{
            text: 'Slider',
            url: 'slider/slider.html',
            icon: 'slider.gif',
            desc: 'A slider component that supports vertical mode, snapping, tooltips, customized styles and more.'
        },{
            text: 'QuickTips',
            url: 'simple-widgets/qtips.html',
            icon: 'qtips.gif',
            desc: 'Various tooltip and quick tip configuration options including Ajax loading and mouse tracking.'
        },{
            text: 'Progress Bar',
            url: 'simple-widgets/progress-bar.html',
            icon: 'progress.gif',
            desc: 'A basic progress bar component shown in various configurations and with custom styles.'
        },{
            text: 'Panels',
            url: 'panel/panels.html',
            icon: 'panel.gif',
            desc: 'A basic collapsible panel example.'
        },{
            text: 'Resizable',
            url: 'resizable/basic.html',
            icon: 'resizable.gif',
            desc: 'Examples of making any element resizable with various configuration options.'
        },{
            text: 'Spotlight',
            url: 'core/spotlight.html',
            icon: 'spotlight.gif',
            desc: 'A utility for masking everything except a single element on the page to visually highlight it.'
        },{
            text: 'Localization (static)',
            url: 'locale/dutch-form.html',
            icon: 'locale-dutch.gif',
            desc: 'Demonstrates fully localizing a form by including a custom locale script.'
        },{
            text: 'Localization (dynamic)',
            url: 'locale/multi-lang.html',
            icon: 'locale-switch.gif',
            desc: 'Dynamically render various Ext components in different locales by selecting from a locale list.'
        }]
    }];

    for(var i = 0, c; c = catalog[i]; i++){
        c.id = 'sample-' + i;
    }

    var store = new Ext.data.JsonStore({
        idProperty: 'id',
        fields: ['id', 'title', 'samples'],
        data: catalog
    });

    new Ext.Panel({
        autoHeight: true,
        collapsible: true,
        frame: true,
        title: 'View Samples',
        items: new SamplePanel({
            store: store
        })
    }).render('all-demos');

    var tpl = new Ext.XTemplate(
        '<tpl for="."><li><a href="#{id}">{title:stripTags}</a></li></tpl>'
    );
    tpl.overwrite('sample-menu', catalog);

    Ext.select('#sample-spacer').remove();

    setTimeout(function(){
        Ext.get('loading').remove();
        Ext.fly('loading-mask').fadeOut({
			remove:true,
			callback : function() {
				var cp = new Ext.state.CookieProvider();

				if(window.console && window.console.firebug && ! cp.get('hideFBWarning')){
					var tpl = new Ext.Template(
						'<div 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>'			   
					);
					var newEl = tpl.insertFirst('all-demos');
					
					Ext.fly('hideWarning').on('click', function() {
						Ext.fly(newEl).slideOut('t',{remove:true});
						cp.set('hideFBWarning', true);	
					});
					Ext.fly(newEl).slideIn();
				}
				
				
			}
		
		
		});
    }, 250);

});