Results 1 to 3 of 3

Thread: onRowOut / MouseOut event trigger on Grid when mouse is over a row's widget

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    6
    Vote Rating
    0
      0  

    Default onRowOut / MouseOut event trigger on Grid when mouse is over a row's widget

    I have created a grid that in the last column has widgets (Buttons), I have enabled "setTrackMouseOver" and "getSelectionModel().setLocked(true)". The issue is the following: when the mouse pointer is over a row this one is highlighted and a mouseOver/onRowOver event is triggered as expected, but as soon as the mouse pointer is over any of the widgets (located in the last column), a onRowOut / MouseOut event is triggered removing the highlighting of the row. That is an improper behavior since the cursor is still over the row.
    I'm attaching a couple of pictures where the issue is shown, along with the code that I'm using to create the grid.

    Thanks in advance for your help on this, it is much appreciated.


    Code:
        private ContentPanel agentsTestGridPanel(){
            ContentPanel panel = new ContentPanel();
            panel.setLayout(new FitLayout());
            panel.setHeading("Agents");
            panel.setScrollMode(Scroll.AUTOY);
            
            Button buttonAddAgent = new Button("ADD Agent"){
                @Override
                protected void onClick(ComponentEvent ce) {
                    System.out.println(" Button pressed");
                }
            };
            
            buttonAddAgent.setIconStyle("icon-add");
            ToolBar toolBar = new ToolBar();
            toolBar.setAlignment(HorizontalAlignment.RIGHT);
            toolBar.add(buttonAddAgent);
            panel.setTopComponent(toolBar);
            
            ColumnConfig nameCol = new ColumnConfig("name", "<div style=\"color:#000000;\">Name</div>", 120);
            ColumnConfig ontoCol = new ColumnConfig("ontology", "<div style=\"color:#000000;\">Ontology</div>", 150);
            ColumnConfig readCol = new ColumnConfig("read", "<div style=\"color:#000000;\">Read</div>", 45);
            ColumnConfig writeCol = new ColumnConfig("write", "<div style=\"color:#000000;\">Write</div>", 45);
            ColumnConfig actionsCol = new ColumnConfig("actions", "<div style=\"color:#000000;\">Actions</div>", 150);
            actionsCol.setDataIndex("actionsCell");
            actionsCol.setRenderer(new GridCellRenderer(){
                
                @Override
                public Widget render(ModelData model, String property,
                        com.extjs.gxt.ui.client.widget.grid.ColumnData config,
                        int rowIndex, int colIndex, ListStore store, Grid grid) {
                    
                    return getActionButtonsPanel();
                }
                
                private ContentPanel getActionButtonsPanel(){
                    ContentPanel panel = new ContentPanel();
                    panel.setLayout(new FillLayout(Orientation.HORIZONTAL));
                    panel.setHeaderVisible(false);
                    panel.setBodyBorder(false);
                    panel.setLayoutOnChange(true);
                    panel.setBodyStyle("backgroundColor: white;");
                    
                    Button viewButton = new Button();
                    Button editButton = new Button();
                    Button deleteButton = new Button();
                    Button duplicateButton = new Button();
                    
                    viewButton.setIconStyle("icon-view");
                    editButton.setIconStyle("icon-edit");
                    deleteButton.setIconStyle("icon-delete");
                    duplicateButton.setIconStyle("icon-duplicate");
                    
                    viewButton.setWidth(16);
                    editButton.setWidth(16);
                    deleteButton.setWidth(16);
                    duplicateButton.setWidth(16);
                    
                    viewButton.setHeight(16);
                    editButton.setHeight(16);
                    deleteButton.setHeight(16);
                    duplicateButton.setHeight(16);
                    
                    viewButton.setToolTip("View agent");
                    editButton.setToolTip("Edit agent");
                    deleteButton.setToolTip("Delete agent");
                    duplicateButton.setToolTip("Duplicate agent");
                    
                    panel.add(viewButton, new RowData(0.25, 1.0, new Margins(0)));
                    panel.add(editButton, new RowData(0.25, 0.25, new Margins(0)));
                    panel.add(deleteButton, new RowData(0.25, 0.25, new Margins(0)));
                    panel.add(duplicateButton, new RowData(0.25, 0.25, new Margins(0)));
                    
                    //panel.setVisible(false);
    
                    return panel;
                }
    
            });
    Attached Images Attached Images

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976
    Vote Rating
    131
      0  

    Default

    Increase the row and cellselectordepth on the gridview. There is a setter for it.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    6
    Vote Rating
    0
      0  

    Default

    Thank you!

    By the way, sorry for the delay.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •