Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User ykey's Avatar
    Join Date
    Mar 2010
    Location
    USA
    Posts
    245
    Vote Rating
    27
    ykey has a spectacular aura about ykey has a spectacular aura about

      2  

    Default TypeToScroll Grid Plugin

    TypeToScroll Grid Plugin


    About a month ago someone had asked for a grid plugin that would scroll as you typed in a grid. I took a quick shot at it back then and I didn't see any others out there so I put some more work into it.

    TypeToScroll Plugin 1.0 Beta
    Mouse-over then type to scroll in the grid. Your query will become more specific as you type.
    Can use the current sorted column's rendered values or store values. Works best in simple grids and does not work in more advanced grid types across multiple pages or buffering.

    Tested in IE9, Chrome, and Firefox from 4.1.0+
    I have attached an demo that you can drop right into your ExtJS 4.1 examples folder.
    Or view the jsfiddle: http://jsfiddle.net/exaDt/3/

    Code:
    /**
     * Grid TypeToScroll plugin.
     *
     * Mouse-over then type to scroll in the following grid. Your query will become more specific as you type.
     *
     * Uses the current sorted column's rendered values or the base store data depending on configuration. Works 
     * best in simple grids. Does not work in more advanced grids across multiple pages or with buffering.
     *
     * Example
     *    var plugin = Ext.create('Ext.ux.grid.plugin.TypeToScroll', {
     *        selectNodeOnScroll: true, 
     *        useStoreData: true
     *    });    
     *        
     *    var grid = Ext.create('Ext.grid.Panel', {
     *        width: 700,
     *        height: 250,
     *        title: 'Employees',
     *        store: 'People',
     *        plugins: 'typetoscroll',
     *        columns: [
     *            {
     *                   text: 'Name',
     *                  flex: 1,
     *                  sortable: true,
     *                dataIndex: 'name'
     *              },
     *              {
     *                  text: 'Position',
     *                  width: 125,
     *                  sortable: true,
     *                  dataIndex: 'position',
     *                   nodeScroll: false         // Disable node scrolling for this column
     *              }
     *        ],
     *        renderTo: Ext.getBody()
     *    });    
     */
    Ext.define('Ext.ux.grid.plugin.TypeToScroll', {
        extend: 'Ext.AbstractPlugin',
        alias: 'plugin.typetoscroll',
        
        config: {
            /**
             * true to select the node on scroll, false to only bring it into view
             */
            selectNodeOnScroll: false,
    
    
            /**
             * true to use the store data, false to use the rendered view nodes
             */
            useStoreData: false
        },
        
        init: function(grid) {
            this.grid = grid;                
            this.input = "";
            
            if (!this.grid.rendered) {
                this.grid.on('render', this.bindEvents, this, { single: true });
                this.grid.on('sortchange', this.focusGrid, this);    // Keep focus after sort
                
            } else {
                this.bind();
            }
        },
        
        focusGrid: function() {
            this.grid.getView().focus();
        },
        
        bindEvents: function() {
            var el = this.grid.getEl();
            
            el.on('mouseenter', function() {
                this.focusGrid();            
                el.on('keypress', this.updateListenTask, this);            
                el.on("mouseleave", this.cancelTask, this, { single: true });
            }, this);
        },
        
        clearState: function() {
            this.input = "";
            this.previousIndex = null;
        },
        
        updateListenTask: function(event) {
            if (!this.updateTask) {
                this.updateTask = Ext.create('Ext.util.DelayedTask', Ext.bind(function() {
                    this.updateTask.cancel();                                            
                    this.clearState();
                }, this));
            }
            
            this.input += String.fromCharCode(event.getKey());
            this.scrollToPosition(this.input);
            
            this.updateTask.delay(300);
        },
        
        cancelTask: function() {
            var el = this.grid.getEl();
            
            el.un('keypress', this.updateListenTask, this);
            
            if (this.updateTask) {
                this.updateTask.cancel();
            }
        },
        
        scrollToPosition: function(value) {
            var grid = this.grid,        
                store = grid.getStore(), 
                sorter = this.determineSorter(store),
                property, column, columnIdx, idx;
            
            // Only if plugin is enabled
            if (this.disabled) {
                return;
            }
            
            // Only if grid is sorted by column
            if (sorter) {                        
                property = sorter.property;
                        
                if (property) {                        
                    column = grid.down('gridcolumn[dataIndex="' + property + '"]');                            
                                    
                    if (column.nodeScroll === false) {
                        return;
                    }
                    
                    if (this.useStoreData === true) {
                        idx = this.findStoreIndex(property, value);
                        
                    } else {
                        columnIdx = Ext.Array.indexOf(grid.columns, column);
                        idx = this.findViewIndex(property, value, columnIdx);
                    }
                    
                    this.focus(idx);
                }            
            }
        },
        
        /**
         * Ignore the grouped grid sorter. Return first sorter with a direction.
         */
        determineSorter: function(store) {
            var sorters = store.sorters.items,
                sorter,    i, len;
            
            for(i=0, len=sorters.length; i < len; i++) {
                sorter = sorters[i];
                
                if (sorter.direction) {
                    return sorter;
                }
            }
        },    
        
        findStoreIndex: function(property, value) {
            var store = this.grid.getStore(),
                record = store.findRecord(property, value);
                
            return store.indexOf(record);
        },
        
        /**
         * Search through the gridview dom nodes for the value.
         */
        findViewIndex: function(property, value, columnIdx) {
            var grid = this.grid,
                view = grid.getView(),
                nodes = view.getNodes(),
                valueLen = value.length,
                i, len, node, childNode, content;        
    
    
            for (i=0, len=nodes.length; i < len; i++) {                    
                node = nodes[i];
                childNode = node.childNodes[columnIdx];
                content = childNode.textContent || childNode.innerText;
            
                if (content.toLowerCase().slice(0, valueLen) === value) {        
                    return i;
                }
            }
            
            return -1;
        },
        
        /**
         * Focus or select the provided index based on configuration.
         */
        focus: function(idx) {
            var view = this.grid.getView();
            
            if (this.previousIndex === idx || idx === -1) {
                return;
            }
            
            if (this.selectNodeOnScroll === true) {
                view.getSelectionModel().select(idx);    
                
            } else {                        
                view.focusRow(idx);
            }
            
            this.previousIndex = idx;
        },
        
        destroy: function() {
            if (this.updateTask) {
                this.updateTask.cancel();    
                delete this.updateTask;
            }
        }
    });
    Attached Files
    Last edited by ykey; 5 Aug 2012 at 4:28 PM. Reason: Code tweak

  2. #2
    Sencha Premium Member harrydeluxe's Avatar
    Join Date
    Jul 2007
    Location
    Nürnberg, Germany
    Posts
    78
    Vote Rating
    29
    harrydeluxe has a spectacular aura about harrydeluxe has a spectacular aura about

      0  

    Default


    nice idea!
    DELACAP | Github
    "don't code today what you can't debug tomorrow"

  3. #3
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    303
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


    Great idea ykey, thanks for sharing with us. Just a note, it just searchs through the sorter field. For example I've a grid that is sorted by key field.(i.e. userId) But at the same time I want to scroll by typing name. It'll be amazing if you can add this option. Also I tried to add nodeScroll : false config to all columns except name. It didn't solved this problem too.
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  4. #4
    Sencha User ykey's Avatar
    Join Date
    Mar 2010
    Location
    USA
    Posts
    245
    Vote Rating
    27
    ykey has a spectacular aura about ykey has a spectacular aura about

      0  

    Default


    The user experience didn't really make sense in practice when using unsorted data from my early testing so I abandoned the idea. Could you maybe talk about how you would expect the plugin to behave when using unsorted data for the search field.

    Say you have the following data in an unsorted grid column:
    a
    j
    d
    a
    c
    j

    If you type j it will scroll to line 2. If you quickly type j again it will parse as 'jj' and will stay on line 2. You would never get to the second 'j'. Maybe something like using the tab key or something? Let me know what you were thinking here.

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Vote Rating
    0
    Rudolf Bargholz is on a distinguished road

      0  

    Default


    Hi ykey,

    The following might be a useful rule of thumb for the user experience:

    1) If the user presses Backspace, the search cache ought to be cleared. If the user then presses a key, the search will start anew. Perhaps one would have to use another key to clear the search cache.
    2) If the user presses a key the first matching record would be found. If they then press + the next line matching the search criterion will be selected. In your example below, entering j and then + would select the second list line starting with a j.
    3) If the user then presses - the previous line matching the search criterion will be selected.
    (2) and (3) allow a user to scroll up or down the list based on the search filter entered.
    4) If the user presses Home the first line ought to be selected
    5) If the user presses End the last line ought to be selected
    6) If the user enters * and then search characters, the search ought to be over all columns in the list. For example: entering *j will search for the first line in which any of the columns in the list contain a j.

    a b
    c cja
    d e
    ajb x

    In the example above, entering *j would select the second line. Entering + would then select the fourth line. Entering Backspace and then *jb would first select the second line, then the fourth line. Entering Backspace and then *ja would first select the second line, then remain on the second line. Entering Backspace and then *a*x would first select the first line, then the second line.

    I am only starting with ExtJS development, but we use these rules in our current development environment and they have been very useful over the years. The rules are independent of the sorting of the list. And searching for strings with + or - are not a normal use case.

    Additional rules that might be useful would be CTRL + Home to select the first matching entry in the list and CTRL + End to select the last matching entry in the list. This would make sense if I used + to navigate the matching records and want to navigate to the first or last matching element.

    No idea if these rules match the requirements of others and if this is possible in your component. Thanks for putting this component on the market.

    Regards

    Rudolf Bargholz
    Last edited by Rudolf Bargholz; 17 Aug 2012 at 7:39 AM. Reason: Added an example of how the navigation would work