Results 1 to 3 of 3

Thread: Trigger grid.ViewOptions

  1. #1
    Sencha User
    Join Date
    Mar 2019
    Posts
    3
    Vote Rating
    1
      0  

    Default Trigger grid.ViewOptions

    Hello,

    I'm trying to trigger the grid.ViewOptions menu with a button click on my UI rather than a long press on the column header. I've looked through ViewOptions.js in node_modules/@extjs/ext-react-toolkit/src/grid/plugin/ViewOptions.js and see two functions: showViewOptions() and hideViewOptions(), but have been having a hard time exposing these to my button.

    I've tried following a similar pattern to the grid exporter which exposes saveDocumentAs() through a ref on the grid, but this hasn't worked.

    Ext.require(['Ext.grid.plugin.Exporter', 'Ext.grid.plugin.ViewOptions']);

    <Grid
    gridRef={grid => this.grid = grid}
    shadow
    style={{fontSize:11}}
    store={props.store}
    plugins={{gridviewoptions:true, gridexporter:true}}
    >



    customizeGrid=()=>{
    // this.grid.hideViewOptions()
    // this.grid.showViewOptions()
    }



    I've also found that once the viewOptions menu component mounts, it doesn't unmount, so I can select the component in the dom tree and manually add and remove the x-hidden css class to display the menu, but it seems there should be a cleaner way.

    Any feedback or thoughts are appreciated!

    Cheers!
    Christian

  2. #2
    Sencha User
    Join Date
    Mar 2019
    Posts
    3
    Vote Rating
    1
      0  

    Default

    Quote Originally Posted by clamborghini View Post
    Hello,

    I'm trying to trigger the grid.ViewOptions menu with a button click on my UI rather than a long press on the column header. I've looked through ViewOptions.js in node_modules/@extjs/ext-react-toolkit/src/grid/plugin/ViewOptions.js and see two functions: showViewOptions() and hideViewOptions(), but have been having a hard time exposing these to my button.

    I've tried following a similar pattern to the grid exporter which exposes saveDocumentAs() through a ref on the grid, but this hasn't worked.

    Ext.require(['Ext.grid.plugin.Exporter', 'Ext.grid.plugin.ViewOptions']);

    <Grid
    gridRef={grid => this.grid = grid}
    shadow
    style={{fontSize:11}}
    store={props.store}
    plugins={{gridviewoptions:true, gridexporter:true}}
    >



    customizeGrid=()=>{
    // this.grid.hideViewOptions()
    // this.grid.showViewOptions()
    }



    I've also found that once the viewOptions menu component mounts, it doesn't unmount, so I can select the component in the dom tree and manually add and remove the x-hidden css class to display the menu, but it seems there should be a cleaner way.

    Any feedback or thoughts are appreciated!

    Cheers!
    Christian
    I think I'm on a better track - but still not at a solution

    HTML Code:
     <Grid         ref={props.gridRef}        shadow        style={{fontSize:11}}        store={props.store}        plugins={[        {type:'gridviewoptions',        sheet: {          items: [{            docked: 'top',            xtype: 'titlebar',            title: '',            items: [{                xtype: 'button',                text: 'Done',                ui: 'action',                align: 'right',                role: 'donebutton'            }]        }],        lazy:true,        hidden: props.showGridViewOptions,        hideOnMaskTap: true,        enter: 'left',        exit: 'left',        modal: true,        left: 0,        layout: 'fit',        stretchY: true            },        columnList:{            title:'Customize View'          },        }, 'gridexporter']}      >

    it doesn't look like the hidden prop is controlling the component rendering the way I was hoping. Still digging through docs and piecing it together. Any other thoughts out there?

    Much appreciated!!

  3. #3
    Sencha User
    Join Date
    Mar 2019
    Posts
    3
    Vote Rating
    1
      1  

    Default

    Here's my solution if others are interested:


    customizeGrid=()=>{

    const viewOptions = this.grid._plugins[0], //_plugins is an array of your included plugins on the grid - the first item in my config is the viewOptions plugin. this.grid is a ref on the grid
    sheet = viewOptions.getSheet();
    viewOptions.setup()

    sheet.show()

    }


    <Grid
    ref={
    grid=>this.grid = grid}
    shadow
    style={{fontSize:11}}
    store={props.store}
    plugins={[
    {type:'gridviewoptions',
    sheet: {
    items: [{
    docked: 'top',
    xtype: 'titlebar',
    title: '',
    items: [{
    xtype: 'button',
    text: 'Done',
    ui: 'action',
    align: 'right',
    role: 'donebutton'
    }]
    }],
    lazy:true,
    hidden: !props.customizeGrid,
    hideOnMaskTap: true,
    enter: 'right',
    exit: 'right',
    modal: true,
    right: 0,
    layout: 'fit',
    stretchY: true
    },
    columnList:{
    title:'Customize View'
    },
    }, 'gridexporter']}
    >



Posting Permissions

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