Generalize all List classes into ThumbList class. (3418ec41) · Commits · extjs / jsduck

template/app/controller/Examples.js

+2 −2

Original line number	Diff line number	Diff line
		@@ -27,8 +27,8 @@ Ext.define('Docs.controller.Examples', {
		this.loadExample(url);
		}
		},
		'samplepanel': {
		exampleclick: function(url) {
		'examplesindex > thumblist': {
		urlclick: function(url) {
		this.loadExample(url);
		}
		}

+2 −2

Original line number	Diff line number	Diff line
		@@ -33,8 +33,8 @@ Ext.define('Docs.controller.Guides', {
		this.handleUrlClick(url, event, this.getTree());
		}
		},
		'guidespanel': {
		guideclick: function(url) {
		'guideindex > thumblist': {
		urlclick: function(url) {
		this.loadGuide('#/' + url);
		}
		},

+3 −3

Original line number	Diff line number	Diff line
		@@ -6,9 +6,9 @@ Ext.define('Docs.controller.Videos', {

		init: function() {
		this.control({
		'videolist': {
		videoclick: function(id) {
		this.openVideo(id);
		'videoindex > thumblist': {
		urlclick: function(url) {
		this.openVideo(url);
		}
		},
		'videostree': {

+20 −23

Original line number	Diff line number	Diff line
		/**
		* View showing a list of guides.
		* View showing a list of clickable items with thumbnails.
		*/
		Ext.define('Docs.view.guides.List', {
		Ext.define('Docs.view.ThumbList', {
		extend: 'Ext.view.View',
		alias: 'widget.guidespanel',
		alias: 'widget.thumblist',

		cls: 'demos',
		itemSelector: 'dl',

		/**
		* @cfg
		* Name of the model field from which to read the URL for urlclick event.
		*/
		urlField: 'url',

		/**
		* @cfg {Ext.XTemplate/String[]} tpl (required)
		* The template to use for rendering.
		* Clickable items must be wrapped inside `<dl>` element.
		*/

		initComponent: function() {
		this.addEvents(
		/**
		* @event
		* Fired when an guide is clicked
		* @param {String} url URL of the guide to load
		* Fired when an item in list is clicked.
		* @param {String} url URL of the item to load
		*/
		'guideclick'
		);

		this.tpl = Ext.create('Ext.XTemplate',
		'<div id="sample-ct">',
		'<tpl for=".">',
		'<div><a name="{url}"></a><h2><div>{group}</div></h2>',
		'<dl>',
		'<tpl for="guides">',
		'<dd ext:url="guide/{name}"><img src="guides/{name}/icon-lg.png"/>',
		'<div><h4>{title}</h4><p>{description}</p></div>',
		'</dd>',
		'</tpl>',
		'<div style="clear:left"></div></dl></div>',
		'</tpl>',
		'</div>'
		'urlclick'
		);

		this.on({
		@@ -63,8 +60,8 @@ Ext.define('Docs.view.guides.List', {
		var t = e.getTarget('dd', 5, true);

		if (t && !e.getTarget('a', 2)) {
		var url = t.getAttributeNS('ext', 'url');
		this.fireEvent('guideclick', url);
		var url = t.getAttributeNS('ext', this.urlField);
		this.fireEvent('urlclick', url);
		}

		return this.callParent(arguments);

+28 −2

Original line number	Diff line number	Diff line
		@@ -5,7 +5,7 @@ Ext.define('Docs.view.examples.Index', {
		extend: 'Ext.container.Container',
		alias: 'widget.examplesindex',
		requires: [
		'Docs.view.examples.List'
		'Docs.view.ThumbList'
		],

		cls: 'all-demos iScroll',
		@@ -25,9 +25,35 @@ Ext.define('Docs.view.examples.Index', {
		data: catalog
		});

		var tpl = Ext.create('Ext.XTemplate',
		'<div id="sample-ct">',
		'<tpl for=".">',
		'<div><a name="{id}"></a><h2><div>{title}</div></h2>',
		'<dl>',
		'<tpl for="samples">',
		'<dd ext:url="{url}"><img src="extjs/examples/shared/screens/{icon}"/>',
		'<div><h4>{text}',
		'<tpl if="status === \'new\'">',
		'<span class="new-sample"> (New)</span>',
		'</tpl>',
		'<tpl if="status === \'updated\'">',
		'<span class="updated-sample"> (Updated)</span>',
		'</tpl>',
		'<tpl if="status === \'experimental\'">',
		'<span class="new-sample"> (Experimental)</span>',
		'</tpl>',
		'</h4><p>{desc}</p></div>',
		'</dd>',
		'</tpl>',
		'<div style="clear:left"></div></dl></div>',
		'</tpl>',
		'</div>'
		);

		this.items = [
		{ xtype: 'container', html: '<h1 class="eg">Examples</h1>' },
		Ext.create('Docs.view.examples.List', {
		Ext.create('Docs.view.ThumbList', {
		tpl: tpl,
		store: store
		})
		];