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

      0  

    Default 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 - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,964
    Vote Rating
    11
    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 Premium Member
    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 - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,964
    Vote Rating
    11
    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 Premium Member
    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 Premium Member
    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 Premium Member
    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.