source: catalog/CompaniesModule/web-app/js/extjs/ux/Ext.ux.TagCloud.js @ 140

Revision 109, 5.5 KB checked in by eugenn, 8 years ago (diff)

extjs 3.2.1

Line 
1Ext.namespace('Ext.ux');
2
3/**
4 * @class Ext.ux.TagCloud
5 * @extends Ext.Component
6 * This class represents a tag cloud with support for remote loading and tag selection
7 * @constructor
8 * Create a new TagCloud
9 * @param {Object} config A configuration object that sets properties for this tag cloud
10 * The configuration object supports these properties:
11         * <ul style="padding:5px;padding-left:16px;">
12             * <li>{Ext.data.Store} store - The data store for the cloud</li>
13             * <li>{String} displayField - The field from the data store to display</li>
14                 * <li>{String} weightField - The field from the data store used to determine the ranking or "weight"</li>
15                 * <li>{Boolean} displayWeight - (Optional) When true, the items in the cloud will also visually show their weight
16             * </ul>
17 */
18Ext.ux.TagCloud = function(config){
19
20    // Call the parent class constructor
21        Ext.ux.TagCloud.superclass.constructor.call(this, config);
22
23        if(this.store)
24                this.setStore(this.store);
25       
26    this.displayField = this.displayField || 'tag';
27    this.weightField = this.weightField || 'count';
28               
29    // private
30    this.addEvents({
31   
32        /**
33         * @event tagselect
34         * Fires when a tag is selected (clicked on)
35         * @param {Ext.ux.TagCloud}     cloud This tag cloud
36         * @param {Ext.data.Record}     record The data record returned from the underlying store
37         * @param {int}                 index The index of the selected item in the tag cloud
38         */
39        'tagselect' : true
40   
41    });
42   
43    this.nodes = [];
44   
45}       
46 
47Ext.extend(Ext.ux.TagCloud, Ext.Component, {
48       
49        /* private */
50    defaultAutoCreate : {tag: "div", cls: "x-cloud"},
51   
52    getDataSource : function(){
53        return this.store;
54    },
55   
56    /*
57         * Sets the store for this cloud
58         * @param {Ext.data.Store} store the store to set
59         */
60        setStore : function(store){
61        // when the store is loaded, automatically refresh the cloud
62                store.on('load', this.refresh, this);
63                this.store = store;
64        // sort alphabetically
65        this.store.remoteSort = false;
66        this.store.sort(this.displayField, 'ASC');
67        },
68
69        // private
70        onRender : function(ct, position){     
71       
72        this.container = ct;
73       
74                if(this.el){
75            this.el = Ext.get(this.el);
76            if(!this.target){
77                ct.dom.appendChild(this.el.dom);
78            }
79        }else {
80            var cfg = this.getAutoCreate();
81            if(!cfg.name){
82                cfg.name = this.name || this.id;
83            }
84            this.el = ct.createChild(cfg, position);
85        }
86       
87                this.list = this.el.createChild({tag: "ol", cls: "x-cloud-ordered-list"});
88       
89        },
90
91        // private
92        refresh : function(){
93               
94                /* First, remove all children */
95                this.clearNodes();
96       
97                /* Determine the spread values */
98                this.getWeightDistribution();
99       
100                var records = this.store.getRange();
101                for(var i=0; i < records.length; i++){
102
103            var count = records[i].data[this.weightField];
104           
105                        var child = this.list.createChild({
106                tag: "li", 
107                cls: "x-cloud-item "+this.getWeightClassification(count),
108                html: '<a href="#">'+records[i].data[this.displayField]+(this.displayWeight ? ' ('+count+')' : '')+'</a>'
109                });
110                       
111                        child.on('click', this.onSelect, this);
112                       
113                }
114               
115                /* Fade the list in */
116        this.list.fadeIn(
117            {
118            duration:0.5,
119            block:true
120            }
121        );
122               
123                /* Store a list of all child nodes */
124        this.nodes = this.list.dom.childNodes;
125               
126        },
127       
128        // private
129        clearNodes : function(){
130        while (this.list.dom.firstChild){
131            this.list.dom.removeChild(this.list.dom.firstChild);
132        }
133        },
134
135    // private
136    onSelect : function(e, t){
137   
138        var item = t.parentNode;
139        var index = this.indexOf(item);
140       
141        /* Remove from selection from any selected children */
142        var selected = this.list.query('.x-cloud-item-selected');
143        if(selected.length > 0)
144            Ext.get(selected[0]).removeClass('x-cloud-item-selected');
145       
146        this.fireEvent('tagselect', this, this.getDataSource().getAt(index), index);
147       
148        // Prevent the link href from being followed
149        Ext.EventObject.stopEvent(e);
150    },
151   
152    // private
153    indexOf : function(node){
154        var ns = this.nodes;
155        for(var i = 0, len = ns.length; i < len; i++){
156            if(ns[i] == node){
157                return i;
158            }
159        }
160        return -1;
161    },
162
163        // private
164        getWeightClassification : function(weight){
165
166                if(weight == this.max)
167                        return 'largest';
168                if(weight == this.min)
169                        return 'smallest';
170                if(weight > (this.min + (this.distribution*2)))
171                        return 'large';
172                if(weight > (this.min + this.distribution))
173                        return 'medium';
174
175                return 'small';
176        },
177
178        // private
179        getWeightDistribution : function(){
180       
181                var records = this.store.getRange();
182        if(records.length==0){
183            this.max = this.min = 0;
184            return;
185        }
186               
187        this.max = records[0].data.count;
188        this.min = records[0].data.count;
189
190                for(var i=0; i < records.length; i++){
191                        var count = records[i].data[this.weightField];
192                        if(count > this.max){
193                                this.max = count;
194                        }
195                        if(count < this.min){
196                                this.min = count;
197                        }
198                }
199
200                if(!this.distribution)
201                        this.distribution = (this.max - this.min) / 5;
202
203        }
204       
205});
Note: See TracBrowser for help on using the repository browser.