1. #1
    Sencha User
    Join Date
    Jan 2008
    Posts
    72
    Vote Rating
    0
    csextjs is on a distinguished road

      0  

    Default Grid Highlight

    Grid Highlight


    Hi Everyone,

    Still new to this EXTJS but managed to create my first GRID.
    But unlike the array-grid example, I can not hightlight the row as I click on it.
    And also, as I hover over a row, I can't get it to hightlight.

    How can I fix this?

    Thank you in advance.

  2. #2
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    You'll have to post some code (in [code/] tags) for further study.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #3
    Sencha User
    Join Date
    Jan 2008
    Posts
    72
    Vote Rating
    0
    csextjs is on a distinguished road

      0  

    Default


    Thanks. Here it is.

    Ext.onReady(function(){
    var toprid=0; botrid=0;
    var thestat = document.getElementById('stat').value;
    var thestatdscrp;
    if (thestat == 'O') { thestatdscrp='Open' };
    if (thestat == 'C') { thestatdscrp='Closed' };

    // create the Data Store
    var store = new Ext.data.Store({
    // load using script tags for cross domain, if the data in on the same domain as
    // this page, an HttpProxy would be better
    proxy: new Ext.data.HttpProxy({
    url: 'workorder?stat=' + thestat + '&'
    }),

    // create reader that reads the Topic records
    reader: new Ext.data.JsonReader({
    root: 'worder',
    totalProperty: 'totalcount',
    id: 'recid',
    fields: [ 'recid',
    'wodate', 'custname', 'wono', 'grpid', 'city', 'state', 'priority', 'duedate', 'orderby', 'reqtype', 'rmemo', 'woaction'
    ]
    }),

    // turn on remote sorting
    remoteSort: true
    });
    store.setDefaultSort('wodate', 'asc');

    // pluggable renders
    function renderTopic(value, p, record){
    // alert('fid: ' + fid);
    return String.format(
    '<b><a href="woform?t={2}" target="_blank">{0}</a></b><br>By {1}',
    value, record.data.orderby, record.data.recid);
    }
    function renderId(value, p, record){
    return String.format(
    '{1}',
    value, record.id);
    }
    //function renderLast(value, p, r){
    // return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
    //}

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store
    var cm = new Ext.grid.ColumnModel([{
    id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
    header: "ID",
    dataIndex: 'id',
    width: 80,
    hidden: true
    // renderer: renderId
    },{
    header: "Location",
    dataIndex: 'custname',
    width: 85,
    renderer: renderTopic
    },{
    header: "Date",
    dataIndex: 'wodate',
    width: 20,
    align: 'left'
    },{
    header: "Group",
    dataIndex: 'grpid',
    width: 15,
    align: 'center'
    },{
    header: "W/O No.",
    dataIndex: 'wono',
    width: 20,
    align: 'left'
    },{
    header: "City",
    dataIndex: 'city',
    width: 35,
    align: 'center'
    },{
    header: "State",
    dataIndex: 'state',
    width: 11,
    align: 'center'
    },{
    header: "Pr",
    dataIndex: 'priority',
    width: 10,
    align: 'center'
    },{
    header: "Due Date",
    dataIndex: 'duedate',
    width: 20,
    align: 'center'
    }]);

    // by default columns are sortable
    cm.defaultSortable = true;

    var grid = new Ext.grid.GridPanel({
    el:'grid-example',
    // width:700,
    height:500,
    // autoHeight: true,
    autoWidth: true,
    title: 'Work Orders - ' + thestatdscrp,
    store: store,
    stripeRows: true,
    cm: cm,
    trackMouseOver:false,
    sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
    loadMask: true,
    viewConfig: {
    forceFit:true,
    enableRowBody:true,
    showPreview:true,
    getRowClass : function(record, rowIndex, p, store){
    var compimg = '';
    if (record.data.reqtype == 'C') {
    compimg='<img src="images/complain.gif" alt="" border="0" align="middle"></img>&nbsp;'
    }
    if(this.showPreview){
    p.body = '<p>'+compimg+'<font color="green">'+record.data.rmemo+'</font><br><br>'+record.data.woaction+'</p>';
    return 'x-grid3-row-expanded';
    }
    return 'x-grid3-row-collapsed';
    }
    },
    plugins:[new Ext.ux.grid.Search({
    mode:'remote' // local
    ,iconCls:false
    ,dateFormat:'m/d/Y'
    })],
    bbar: new Ext.PagingToolbar({
    pageSize: 12,
    store: store,
    displayInfo: true,
    displayMsg: 'Displaying Work Orders {0} - {1} of {2}',
    emptyMsg: "No Work-Orders to display",
    items:[
    '-', {
    pressed: true,
    enableToggle:true,
    text: 'Show Preview',
    cls: 'x-btn-text-icon details',
    toggleHandler: toggleDetails
    }]
    }),
    tbar: new Ext.Toolbar({
    items:[
    '-',{
    pressed: true,
    enableToggle:true,
    text: 'Add',
    cls: '',
    toggleHandler: ''
    },'-',{
    pressed: true,
    enableToggle:true,
    text: 'Delete',
    cls: '',
    toggleHandler: 'doDel'
    }]
    })
    });

    // var gridFoot = grid.getView().getFooterPanel(true);
    grid.render();
    grid.doLayout();

    grid.getSelectionModel().selectFirstRow();

    // trigger the data store load
    store.load({params:{start:0, limit:12, stat:thestat}});

    function toggleDetails(btn, pressed){
    var view = grid.getView();
    view.showPreview = pressed;
    view.refresh();
    }

    function doDel(){
    var m = grid.getSelections();
    if(m.length > 0)
    {
    Ext.MessageBox.confirm('Message', 'Do you really want to delete them?' , doDel2);
    }
    else
    {
    Ext.MessageBox.alert('Error', 'Please select at least one item to delete');
    }
    }

    function doDel2(btn){
    alert('delete this...')
    }
    });

  4. #4
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    Can you wrap that in [code/] tags please?
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  5. #5
    Sencha User
    Join Date
    Jan 2008
    Posts
    72
    Vote Rating
    0
    csextjs is on a distinguished road

      0  

    Default


    I am sorry. Did I do that right?

  6. #6
    Ext User cadudecastroalves's Avatar
    Join Date
    Mar 2007
    Location
    Rio de Janeiro, Brazil
    Posts
    98
    Vote Rating
    0
    cadudecastroalves is on a distinguished road

      0  

    Default


    Replace this line:
    PHP Code:
    sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn} ) 
    To this:
    PHP Code:
    sm: new Ext.grid.CheckboxSelectionModel() 
    Cadu de Castro Alves
    Ext-user
    http://www.cadudecastroalves.com/

  7. #7
    Ext User cadudecastroalves's Avatar
    Join Date
    Mar 2007
    Location
    Rio de Janeiro, Brazil
    Posts
    98
    Vote Rating
    0
    cadudecastroalves is on a distinguished road

      0  

    Default


    Quote Originally Posted by csextjs View Post
    I am sorry. Did I do that right?
    You used QUOTE tags instead of CODE tags. You can use PHP tags, too.
    Cadu de Castro Alves
    Ext-user
    http://www.cadudecastroalves.com/

  8. #8
    Sencha User
    Join Date
    Jan 2008
    Posts
    72
    Vote Rating
    0
    csextjs is on a distinguished road

      0  

    Default


    Wow, that fixed it. The clicked row is now highlighted.

    Now, the other issue, highlight the row as I hover over the row.

    Thank you.

  9. #9
    Ext User cadudecastroalves's Avatar
    Join Date
    Mar 2007
    Location
    Rio de Janeiro, Brazil
    Posts
    98
    Vote Rating
    0
    cadudecastroalves is on a distinguished road

      0  

    Default


    From GridPanel docs:

    Code:
    trackMouseOver : Boolean 
    True to highlight rows when the mouse is over. Default is true.
    Check your code. Do you see something different? Please, guy. Read the docs before ask for a question. This is really simple. If you just copy and paste an example code, you never will learn how to do anything.
    Cadu de Castro Alves
    Ext-user
    http://www.cadudecastroalves.com/

  10. #10
    Sencha User
    Join Date
    Jan 2008
    Posts
    72
    Vote Rating
    0
    csextjs is on a distinguished road

      0  

    Default


    That was it. I had it,trackMouseOver, set to false.
    I will study the docs before posting next time.

    Thanks again Everyone.