← Back to branch summary

~cdparra/gelee/trunk

« back to all changes in this revision

Viewing changes to webui/ecosystem/workspace/extjs/docs/source/Checkable.html

  • Committer: parra
  • Date: 2010-03-15 15:56:56 UTC
  • Revision ID: svn-v4:ac5bba68-f036-4e09-846e-8f32731cc928:trunk/gelee:1448
merged gelee at svn

Show diffs side-by-side

added added

removed removed

Lines of Context:
webui/ecosystem/workspace/extjs/docs/source/Checkable.html
 
1
<html>
 
2
<head>
 
3
  <title>The source code</title>
 
4
    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
 
5
    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
 
6
</head>
 
7
<body  onload="prettyPrint();">
 
8
    <pre class="prettyprint lang-js">
 
9
Ext.ns('Ext.ux.MultiCombo');
 
10
<div id="method-Ext.ux.TaskBar.TaskButton-MultiCombo.Checkable"></div>/**
 
11
 * Checkable
 
12
 * @plugin
 
13
 */
 
14
Ext.ux.MultiCombo.Checkable = function(cfg) {
 
15
        Ext.apply(this, cfg);
 
16
};
 
17
Ext.ux.MultiCombo.Checkable.prototype = {
 
18
        <div id="cfg-Ext.ux.TaskBar.TaskButton-checkSelector"></div>/**
 
19
         * @cfg {String} checkSelector DomQuery config for locating checkbox
 
20
         */
 
21
        checkSelector: 'input[type=checkbox]',
 
22
        <div id="cfg-Ext.ux.TaskBar.TaskButton-itemSelector"></div>/**
 
23
         * @cfg {String} itemSelector The itemSelector used with Combo's internal DataView [x-combo-list]
 
24
         */
 
25
        itemSelector : 'x-combo-list',
 
26
        <div id="cfg-Ext.ux.TaskBar.TaskButton-cls"></div>/**
 
27
         * @cfg {String} cls
 
28
         */
 
29
        cls: 'combo-checkable',
 
30
        <div id="cfg-Ext.ux.TaskBar.TaskButton-selectAllText"></div>/**
 
31
         * @cfg {String} selectAllText The "SELECT ALL" phrase [Select All]
 
32
         */
 
33
        selectAllText: 'Select All',
 
34
        <div id="cfg-Ext.ux.TaskBar.TaskButton-clearAllText"></div>/**
 
35
         * @cfg {String} clearAllText the text to display for "clear all" link
 
36
         */
 
37
        clearAllText : 'clear all',
 
38
 
 
39
        <div id="cfg-Ext.ux.TaskBar.TaskButton-separatorHtml"></div>/**
 
40
         * @cfg {String} separatorHtml arbitrary html rendered after Checkable controls.  Can be used to add an
 
41
         * html separator markup.
 
42
         */
 
43
        separatorHtml : '',
 
44
 
 
45
        // private {Boolean} checked
 
46
        checked : null,
 
47
 
 
48
        init : function(combo) {
 
49
                this.combo = combo;
 
50
                var checkable = this;
 
51
                var id = Ext.id();
 
52
                var cls = combo.itemSelector || this.itemSelector;
 
53
 
 
54
                if (!combo.tpl) {
 
55
                        combo.tpl =['<tpl for=".">','<div class="'+cls+'-item">{'+combo.displayField+'}</div>','</tpl>']       .  join('');
 
56
                }
 
57
                combo.tpl = [
 
58
                        '<div class="plugin ' + this.cls + '">',
 
59
                                '<span class="' + this.cls + '-select-all">',
 
60
                                        '<input id="'+id+'" type="checkbox" />&nbsp;<label>'+this.selectAllText+'</label>',
 
61
                                '</span>',
 
62
                                '&nbsp;<span class="'+this.cls+'-clear-all">(<a href="#">' + this.clearAllText + '</a>)</span>',
 
63
                        '</div>',
 
64
                        this.separatorHtml
 
65
                ].join('') + combo.tpl.replace(new RegExp('({'+combo.displayField+'})'), "<input type=\"checkbox\" <tpl if=\"values._checked\">checked</tpl> />&nbsp;<label>$1</label>");
 
66
 
 
67
                combo.on('initview', function(c, dv) {
 
68
                        dv.on('containerclick', this.onContainerClick.createDelegate(this));
 
69
                        dv.on('selectionchange', this.onSelectionChange.createDelegate(this));
 
70
                        dv.el.on('mouseover', this.onViewOver, this);
 
71
                },this);
 
72
                combo.on('select', this.onSelect.createDelegate(this));
 
73
        },
 
74
 
 
75
    onViewOver : function(ev, node){
 
76
                var target = ev.getTarget('.' + this.cls, 5);
 
77
                if (target) {
 
78
                        this.combo.clearHighlight();
 
79
                        Ext.fly(target).addClass(this.combo.highlightClass);
 
80
                }
 
81
        if(this.inKeyMode){ // prevent key nav and mouse over conflicts
 
82
            return;
 
83
        }
 
84
        return;
 
85
    },
 
86
 
 
87
        onSelect : function(rec, index) {
 
88
                // anything?
 
89
        },
 
90
 
 
91
        <div id="method-Ext.ux.TaskBar.TaskButton-getCheckbox"></div>/**
 
92
         * getCheckbox
 
93
         * @return {DomNode}
 
94
         */
 
95
        getCheckbox : function() {
 
96
                return this.combo.view.el.child('.'+this.cls+' '+this.checkSelector, true);
 
97
        },
 
98
 
 
99
        <div id="method-Ext.ux.TaskBar.TaskButton-onSelectionChange"></div>/**
 
100
         * onSelectChange Fired by MultiCombo
 
101
         * @param {Object} dv
 
102
         * @param {Object} rs
 
103
         */
 
104
        onSelectionChange : function(dv, rs) {
 
105
                this.checked = (rs.length > 0 && rs.length == this.combo.store.getCount()) ? true : false;
 
106
                this.getCheckbox().checked = this.checked;
 
107
 
 
108
                var selector = this.checkSelector;
 
109
                setTimeout(function() {
 
110
                        dv.el.select(dv.itemSelector + ' ' + selector).each(function(f) {
 
111
                                f.dom.checked = false;
 
112
                        });
 
113
                        dv.el.select('.' + dv.selectedClass + ' ' + selector).each(function(f) {
 
114
                                f.dom.checked = true;
 
115
                        });
 
116
                },1);
 
117
        },
 
118
 
 
119
        <div id="method-Ext.ux.TaskBar.TaskButton-selectNext"></div>/**
 
120
         * selectNext Called by MultiCombo.  use this to apply hover-class to this row.
 
121
         * @param {Object} sender
 
122
         */
 
123
        selectNext: function(sender) {
 
124
                sender.view.el.child('.' + this.cls).addClass(sender.highlightClass);
 
125
        },
 
126
 
 
127
        <div id="method-Ext.ux.TaskBar.TaskButton-selectPrev"></div>/**
 
128
         * selectPrev Called by MultiCombo, use this to apply hover class to row.
 
129
         * @param {Object} sender
 
130
         */
 
131
        selectPrev : function(sender) {
 
132
                sender.view.el.child('.' + this.cls).addClass(sender.highlightClass);
 
133
        },
 
134
 
 
135
        <div id="method-Ext.ux.TaskBar.TaskButton-onEnter"></div>/**
 
136
         * onEnter Called by MultiCombo
 
137
         * @param {Object} sender
 
138
         */
 
139
        onEnter : function(sender) {
 
140
                this.setChecked(!this.checked);
 
141
        },
 
142
 
 
143
        <div id="method-Ext.ux.TaskBar.TaskButton-onContainerClick"></div>/**
 
144
         * onContainerClick Fired by MultiCombo
 
145
         * @param {Object} dv
 
146
         * @param {Object} ev
 
147
         */
 
148
        onContainerClick : function(dv, ev) {
 
149
                var btnClearAll = ev.getTarget('.'+this.cls+'-clear-all');
 
150
                if (btnClearAll) {
 
151
                        this.clearAll();
 
152
                }
 
153
                else {
 
154
                        this.setChecked(!this.checked);
 
155
                }
 
156
                return false;
 
157
        },
 
158
 
 
159
        // private selectAll
 
160
        selectAll : function() {
 
161
                var value = [];
 
162
                this.combo.store.each(function(r) { value.push(r.data[this.combo.valueField]); },this);
 
163
                this.combo.setValue(value);
 
164
                this.combo.selectByValue(this.combo.getValue());
 
165
                this.combo.focus();
 
166
        },
 
167
 
 
168
        // private clearAll
 
169
        clearAll : function() {
 
170
                this.combo.updateValue([]);
 
171
                this.combo.selectByValue([]);
 
172
                this.combo.view.clearSelections();
 
173
                this.combo.focus();
 
174
        this.combo.fireEvent('clearall', this.combo);
 
175
        },
 
176
 
 
177
        <div id="method-Ext.ux.TaskBar.TaskButton-setChecked"></div>/**
 
178
         * setChecked
 
179
         * @param {Object} v
 
180
         */
 
181
        setChecked : function(v) {
 
182
                if (v == this.checked) {
 
183
                        return;
 
184
                }
 
185
                this.checked = v;
 
186
                this.getCheckbox().checked = this.checked;
 
187
                if (this.checked == true) {
 
188
                        this.selectAll();
 
189
                }
 
190
                else {
 
191
                        this.clearAll();
 
192
                }
 
193
        }
 
194
}</pre>    
 
195
</body>
 
196
</html>
 
 
b'\\ No newline at end of file'