1. #1
    Ext User
    Join Date
    Apr 2010
    Posts
    3
    Vote Rating
    0
    dAnnn is on a distinguished road

      0  

    Default Tree Grid Widget Renderer

    Tree Grid Widget Renderer


    Hi,

    I have a few problems with my Tree Grid and was wondering if you guys could help me.

    Firstly, I have this Grid:

    treeGrid.jpg

    In the final column I am rendering a button, however it also renders the folder images like it does in the second column but I do not want these in this column. Can anyone tell me how to remove these?

    My second problem is with the Tree Grid, I have used the method setLoadMask(true) but no load mask appears when my data is loaded using a TreeLoader with rpc. Is this a know issue or is there some work around.

    I can post code but it is pretty much the same as the sample source code.

    Thanks,
    Dan.

  2. #2
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    I can post code but it is pretty much the same as the sample source code.
    SO what is the differents? There has to be something, else the result should be the same.

  3. #3
    Ext User
    Join Date
    Apr 2010
    Posts
    3
    Vote Rating
    0
    dAnnn is on a distinguished road

      0  

    Default


    Ok, here is my code then:

    Code:
            RpcProxy<List<JobModel>> proxy = new RpcProxy<List<JobModel>>() {
    
                @Override
                protected void load(Object loadConfig,
                        AsyncCallback<List<JobModel>> callback) {
                    System.out.println("Calling remote service");
                    jobService.getJobChildren((JobModel) loadConfig, callback);
    
                }
            };
    
            final TreeLoader<JobModel> loader = new BaseTreeLoader<JobModel>(proxy) {
                @Override
                public boolean hasChildren(JobModel parent) {
                    System.out.println("Parent: " + parent);
                    if (parent == null) {
                        return false;
                    } else {
                        return parent.getHasChildJobs();
                    }
                }
            };
    
            TreeStore<JobModel> store = new TreeStore<JobModel>(loader);
            
    
            List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
    
            CheckBoxSelectionModel<JobModel> sm = new CheckBoxSelectionModel<JobModel>();
    
            columns.add(sm.getColumn());
            ColumnConfig jobId = new ColumnConfig(JobModelColumnNames.JOB_ID.toString(), "Job ID", 40);
            jobId.setRenderer(new TreeGridCellRenderer<JobModel>());
            columns.add(jobId);
            columns.add(new ColumnConfig(JobModelColumnNames.JOB_NAME.toString(),"Job Name", 150));
            columns.add(new ColumnConfig(JobModelColumnNames.PROGRAM.toString(),"Program", 100));
            columns.add(new ColumnConfig(JobModelColumnNames.PROGRAM_MODULE_VERSION.toString(), "Version", 150));
            columns.add(new ColumnConfig(JobModelColumnNames.WORKUNITS.toString(),"Workunits", 40));
            columns.add(new ColumnConfig(JobModelColumnNames.RESULTS.toString(),"Results (completed/total)", 70));
            columns.add(new ColumnConfig(JobModelColumnNames.ERRORS.toString(),"Errors (receive/total)", 100));
            columns.add(new ColumnConfig(JobModelColumnNames.STATUS.toString(),"Status", 50));
            columns.add(new ColumnConfig(JobModelColumnNames.CREATOR.toString(),"Created By", 70));
            ColumnConfig linkToGridMP = new ColumnConfig("linkToGridMP","Link To GridMP", 50);
    
            linkToGridMP.setRenderer(new WidgetTreeGridCellRenderer<JobModel>() {
    
                @Override
                public Widget getWidget(final JobModel model, String property,
                        ColumnData config, int rowIndex, int colIndex,
                        ListStore<JobModel> store, Grid<JobModel> grid) {
    
                    Button btnGridLink = new Button("Link");
                    btnGridLink
                            .addSelectionListener(new SelectionListener<ButtonEvent>() {
    
                                @Override
                                public void componentSelected(ButtonEvent ce) {
    
                                    //do redirect.
    
                                }
                            });
    
                    return btnGridLink;
    
                }
            });
                    
            columns.add(linkToGridMP);
    
            ColumnModel cm = new ColumnModel(columns);
            
    
            TreeGrid<JobModel> treeGrid = new TreeGrid<JobModel>(store, cm);
            treeGrid.setLoadMask(true);
            treeGrid.setBorders(true);
            treeGrid.setId("jobTreeGrid");
    
            treeGrid.setStateful(true);
            treeGrid.getTreeView().setBufferEnabled(false);
            treeGrid.setAutoExpand(true);
                    
            treeGrid.setSelectionModel(sm);
            treeGrid.addPlugin(sm);
    For the Widget rendering my code is very similar to the sample, but in the sample you want to render the icon for the node or the leaf whereas I do not want this.

    As for the loading mask I am probably making some stupid error.

  4. #4
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Remove the WidgetTreeGridCellRenderer and use the normal GridCellRenderer

  5. #5
    Ext User
    Join Date
    Apr 2010
    Posts
    3
    Vote Rating
    0
    dAnnn is on a distinguished road

      0  

    Default


    Thanks very much, that works perfectly now.

    Any ideas on the loading mask?

  6. #6
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Any ideas on the loading mask?
    I will look for that for GXT 2.2

  7. #7
    Sencha Premium Member
    Join Date
    Nov 2010
    Posts
    43
    Vote Rating
    0
    ravikiran1226 is on a distinguished road

      0  

    Default


    Steps to mask your TreeGrid
    a) Override the After Rendered (onAfterRenderView) method which exists in TreeGrid.Mask the treegrid here
    b) Override the onLoad method in TreeStore.Unmask the TreeGrid

  8. #8
    Sencha User
    Join Date
    Mar 2013
    Posts
    13
    Vote Rating
    -1
    rt.karthik87 is an unknown quantity at this point

      0  

    Default Tree Grid with ComboBox

    Tree Grid with ComboBox


    Hi

    I need a tree panel like this. the tree column must have a combo box . And i created the combo box in a different manner.



    My requirement is when i clicked on edit check box i want to show the drop down else i want to show the label. one more important thing is i don't want to use editor in tree column.

    I am not sure the below codes are correct.

    this is my piece of code.

    xtype: 'treecolumn',
    flex: 2,
    resizable : false,
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {

    if(record.get('editable') && record.get('type') == 'Country'){

    var lookupStore;
    if(record.get('type') == 'Product'){
    lookupStore = Ext.getStore('ProductStore');
    }else if(record.get('type') == 'Business'){
    lookupStore = Ext.getStore('BusinessStore');
    }else{
    return value;
    }

    var cntBusId = Ext.id();

    Ext.Function.defer(function(){

    var cntBusDetDropDown = new Ext.form.ComboBox({

    renderTo : 'row1' + cntBusId,
    name : 'cntBusDetComb' + cntBusId,
    id : 'cntBusDetComb' + cntBusId,
    queryMode : 'local',
    store : lookupStore,
    displayField : 'value',
    valueField : 'key',
    value : record.get('countryBusinessName'),
    listeners: {
    select : function(combo, records, eOpts){
    if(record.get('type') == 'Product'){
    record.set('productCode', this.getValue());
    }else if(record.get('type') == 'Business'){
    record.set('busCode', this.getValue());
    }
    record.set('countryBusinessName',records[0].data.value);
    }


    }
    });
    }, 25);



    return (Ext.String.format('<div align=center id="row1{0}" />', cntBusId));


    }else{
    return value;
    }

    },
    dataIndex: 'countryBusinessName'


    In the above code, i used defer function. Is there any other way to create the renderer.