1. #1
    Sencha User
    Join Date
    Oct 2008
    Posts
    3
    Vote Rating
    0
    pharod is on a distinguished road

      0  

    Default [GridPanel] Highlight row and column on hover

    [GridPanel] Highlight row and column on hover


    Hi All,

    I'm just starting with ExtJS now.
    My first task is to build custom grid with following extras:

    1) cross-hair like tracking, mean highlight row and column on mouse over
    2) marking / unmarking cells by clicking on them
    3) locked 1st row/column
    4) data is in columns, not rows (fixed number of rows, headings in 1st column, data in following columns)

    I think I can solve (2) by extending cell selection model
    (3) is solved by user extension
    (4) i don't know how to solve at all, so will just work around it (receive data for columns and transpose)

    Can anyone please give me a hint on how should I approach (1) ?

    Why locking is not part of original control? It seems to be must-have for many business users used to Excel...

    Thanks,

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    I think most of your questions are in the Grid FAQ already.

    http://extjs.com/learn/Ext_FAQ_Grid#...fic_grid_cells

    Another version if you replace your array-grid.js file:
    PHP Code:
    /*
     * Ext JS Library 2.2
     * Copyright(c) 2006-2008, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */

    Ext.onReady(function(){

        
    // NOTE: This is an example showing simple state management. During development,
        // it is generally best to disable state management as dynamically-generated ids
        // can change across page loads, leading to unpredictable results.  The developer
        // should ensure that stable state ids are set for stateful components in real apps.
        
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

        var 
    myData = [
            [
    '3m Co',71.72,0.02,0.03,'9/1 12:00am','http://www.google.com'],
            [
    'Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
            [
    'Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
            [
    'American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
            [
    'American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
            [
    'AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
            [
    'Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
            [
    'Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
            [
    'Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
            [
    'E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
            [
    'Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
            [
    'General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
            [
    'General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
            [
    'Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
            [
    'Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
            [
    'Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
            [
    'International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
            [
    'Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
            [
    'JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
            [
    'McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
            [
    'Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
            [
    'Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
            [
    'Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
            [
    'The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
            [
    'The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
            [
    'The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
            [
    'United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
            [
    'Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
            [
    'Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
        ];

        
    // example of custom renderer function
        
    function change(val){
            if(
    val 0){
                return 
    '<span style="color:green;">' val '</span>';
            }else if(
    val 0){
                return 
    '<span style="color:red;">' val '</span>';
            }
            return 
    val;
        }

        
    // example of custom renderer function
        
    function pctChange(val){
            if(
    val 0){
                return 
    '<span style="color:green;">' val '%</span>';
            }else if(
    val 0){
                return 
    '<span style="color:red;">' val '%</span>';
            }
            return 
    val;
        }

        
    // create the data store
        
    var store = new Ext.data.SimpleStore({
            
    fields: [
               {
    name'company'},
               {
    name'price'type'float'},
               {
    name'change'type'float'},
               {
    name'pctChange'type'float'},
               {
    name'lastChange'type'date'dateFormat'n/j h:ia'},
               {
    name'pdf'}
            ]
        });
     
        
    // create the Grid
        
    var grid = new Ext.grid.GridPanel({
            
    tbar:[
            {
                
    text:'Mask Grid',
                
    tooltip'Mask Grid',                                                                
                
    handler: function(){
                    var 
    el grid.getEl();
                    
    el.mask('Load Mask Title...''x-mask-loading');
                    
    grid.getEl().unmask.defer(2000grid, []);
                    
    //grid.getEl().unmask();
                
    }
            },{
                
    text:'Mask Grid Body',
                
    tooltip'Mask Grid',                                                                
                
    handler: function(){
                    
    //grid.getEl().mask('Load Mask Title...', 'x-mask-loading');
                    
    grid.bwrap.mask('Load Mask Title...''x-mask-loading');
                }
            },{
                
    text:'Unmask Grid Body',
                
    tooltip'Unmask Grid',                                                                
                
    handler: function(){
                    
    grid.bwrap.unmask();
                }
            }], 
            
    storestore,
            
    columns: [
                {
    id:'company',header"Company"width160sortabletruedataIndex'company',
                    
    renderer: function(valuemetaDatarecordrowIndexcolIndexstore) {
                        
    //The <a> tag is used to create an anchor to link from
                        //the href attribute is used to address the document to link to
                        //the words between the open and close of the anchor tag will
                        //be displayed as a hyperlink (value).
                        //the target attribute defines where the linked document will
                        //be opened (_blank = open the document in a new browser window)
                        
    var url record.data.pdf;
                        if (
    url) {
                            return 
    '<a href="'+url+'" target="_blank">'
                                 
    value +'</a>';
                        } else {
                            return 
    value
                        
    }
                    }
    //end renderer
                
    },
                {
    header"Price"width75sortabletruerenderer'usMoney'dataIndex'price'},
                {
    header"Change"width75sortabletruerendererchangedataIndex'change'},
                {
    header"% Change"width75sortabletruerendererpctChangedataIndex'pctChange'},
                {
    header"Last Updated"width85sortabletruerendererExt.util.Format.dateRenderer('m/d/Y'), dataIndex'lastChange'},
                {
                    
    id:'pdf',
                    
    header"PDF",
                    
    width40,
                    
    sortablefalse,
                    
    dataIndex'pdf',
                    
    renderer: function(valuemetaDatarecordrowIndexcolIndexstore) {
                        if (
    value) {
                            return 
    'pdf';
                        }
                    }
    //end renderer                
                
    }
            ],
            
    stripeRowstrue,
            
    autoExpandColumn'company',
            
    height:350,
            
    //width:600,
            
    title:'Array Grid'
        
    });

        
    store.on({
            
    load:{
                
    fn: function(){
                    
    //console.info('load fired');
                    //console.dir(grid);
                    //defer required or use override
                    
    var sm grid.getSelectionModel();
                    
    //sm.selectFirstRow().defer(1, sm);
                
    }
            }
        });

        
    grid.on({
            
    render:{
                
    fn: function(){
                    
    //console.info('render fired');
                    
    store.loadData(myData);
                }
            },
            
    cellclick:{
                
    fn: function(gridrowIndexcolumnIndexe){

                    
    // Get the Record
                    
    var record grid.getStore().getAt(rowIndex);  
                    
    // Get field name
                    
    var fieldName grid.getColumnModel().getDataIndex(columnIndex); 
                    var 
    data record.get(fieldName);

                    
    // get grid's <TD> HtmlElement at the specified coordinates
                    
    var cell grid.getView().getCell(rowIndexcolumnIndex);

                    
    // get Ext.Element object
                    
    var el Ext.get(cell);

                    var 
    classOld 'x-grid3-dirty-cell';
                    
                    
    // toggle the cssClass
                    
    if (el.hasClass(classOld)) {
                        
    el.removeClass(classOld);
                    } else {
                        
    el.addClass(classOld);
                    }
                    
    // open another window for url:
                    
    window.open(data);
                }
            }
        });

        
    grid.render('grid-example');
    }); 

  3. #3
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    4 has been discussed but no solution posted to my knowledge. You can search for the topic and find discussions on ideas for how to implement.

  4. #4
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    #1 might be good to post an override so you could have a config option for say "track" or "tracking" where it could accept values for 'row','column',or 'both' to configure how the mouseover reacts.

  5. #5
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Finally, locking WAS part of the original control, but was removed for performance reasons reportedly. Apparently it caused too many issues/bugs/heartaches so the developers gave up on it.

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar