1. #1
    Ext User
    Join Date
    Nov 2009
    Posts
    81
    Vote Rating
    0
    Nico33 is on a distinguished road

      0  

    Default Expand a treegrid node doesn't show the good value in the cells, bug in treegrid ?

    Expand a treegrid node doesn't show the good value in the cells, bug in treegrid ?


    Hi all,

    I have a treegrid with this nodes :

    node1 (value = 10)
    |----- node11 (no value)
    |----- node12 (no value)
    node2 (value = 20)
    |----- node21 (no value)

    I'm using a widget in the grid to display the value (this is a progressbar)

    When the treegrid layouts, I can see the good values (see picture 1).
    If I deploy the first node, the progressbar of node2 stays at its position and becomes the value of node11, although it shouldn't (see picture 2).
    If I collapse the node1, I've lost the node2's value (see picture 3).

    Is in an error in my renderer ?

    Here's the source code :

    Code:
    final class MyValue extends BaseTreeModel implements Serializable
    {
    
        private static final long serialVersionUID = -3209667217029014368L;
    
        public MyValue()
        {
        }
        
        public MyValue(String name)
        {
            set("name", name);
        }
    
        public MyValue(String name, double value)
        {
            set("name", name);
            set("value", value);
        }
    
        public MyValue(String name, double value, List<MyValue> children)
        {
            this(name, value);
            
            if (children != null && children.size() > 0)
            {
                for (BaseTreeModel element : children)
                {
                    add(element);
                }
            }
        }
    
        public static MyValue getValues()
        {
            List<MyValue> valuesL2 = new ArrayList<MyValue>();
            valuesL2.add(new MyValue("node11"));
            valuesL2.add(new MyValue("node12"));
    
            List<MyValue> valuesL22 = new ArrayList<MyValue>();
            valuesL22.add(new MyValue("node21"));
            
            List<MyValue> valuesL1 = new ArrayList<MyValue>();
            valuesL1.add(new MyValue("node1", 10, valuesL2));
            valuesL1.add(new MyValue("node2", 20, valuesL22));
    
            MyValue root = new MyValue();
            for (MyValue item : valuesL1)
            {
                root.add(item);
            }
            return root;
    
        }
    }
    
    public class TestTreeGridMain implements EntryPoint
    {
        public void onModuleLoad()
        {
            Window window = new Window();
            window.setSize(900, 900);
            window.add(new TestTreeGrid());
            window.show();
        }
    
        public class TestTreeGrid extends LayoutContainer
        {
            @Override
            protected void onRender(Element parent, int index)
            {
                super.onRender(parent, index);
                setLayout(new FitLayout());
    
                MyValue model = MyValue.getValues();
                
                TreeStore<ModelData> store = new TreeStore<ModelData>();
                List<ModelData> children = model.getChildren();
                store.add(children, true);
                
                ColumnConfig col = new ColumnConfig("name", "Name", 400);
                col.setRenderer(new TreeGridCellRenderer<ModelData>());
        
                ColumnConfig colValue = new ColumnConfig("value", "Value", 100);
                colValue.setRenderer(getRenderer());
                
                ColumnModel cm = new ColumnModel(Arrays.asList(col, colValue));
        
                ContentPanel panel = new ContentPanel();
                panel.setBodyBorder(false);
                panel.setCollapsible(true);  
                panel.setFrame(true);
                panel.setSize(800, 600);
                panel.setLayout(new FitLayout());  
        
                EditorTreeGrid<ModelData> tree = new EditorTreeGrid<ModelData>(store, cm);
                tree.setClicksToEdit(ClicksToEdit.ONE);
                tree.setBorders(true);
                tree.setSize(600, 600);
                tree.setAutoExpandColumn("name");
                tree.setTrackMouseOver(false);
                tree.setExpanded(model, true, true);
                
                tree.getView().layout();
                
                panel.add(tree);
                add(panel);
            }
            
            private GridCellRenderer<BaseModel> getRenderer()
            {
                GridCellRenderer<BaseModel> barRenderer = new GridCellRenderer<BaseModel>()
                {
                    private boolean init;
    
                    public Object render(final BaseModel model, String property, ColumnData config, final int rowIndex,
                            final int colIndex, ListStore<BaseModel> store, Grid<BaseModel> grid)
                    {
                        if (!init)
                        {
                            init = true;
                            grid.addListener(Events.ColumnResize, new Listener<GridEvent<BaseModel>>()
                            {
                                public void handleEvent(GridEvent<BaseModel> be)
                                {
                                    for (int i = 0; i < be.getGrid().getStore().getCount(); i++)
                                    {
                                        Widget widget = be.getGrid().getView().getWidget(i, be.getColIndex());
                                        if (widget instanceof ProgressBar)
                                        {
                                            ProgressBar bar = (ProgressBar)widget;
                                            bar.setWidth(be.getWidth() - 10);
                                            bar.updateProgress(bar.getValue(), "") ;                                    
                                        }
                                    }
                                }
                            });
                        }
                        ProgressBar progressBar = new ProgressBar();
                        if (model.get(property) == null || (model.get(property) instanceof String && ((String)model.get(property)).length() == 0 ))
                        {
                            return "";
                        }
                        else
                        {
                            double value = model.get(property);
                            double val = value / 100.0;
                            progressBar.updateProgress(val, "");
                            progressBar.setToolTip(String.valueOf((int)(val * 100)) + "%");
                            progressBar.setWidth(grid.getColumnModel().getColumnWidth(colIndex) - 10);
                            return progressBar;
                        }
                    }
                };
                return barRenderer;
            }
        }
    }
    Thanks in advance for your help.
    Best regards
    Attached Images

  2. #2
    Ext User
    Join Date
    Nov 2009
    Posts
    81
    Vote Rating
    0
    Nico33 is on a distinguished road

      0  

    Default


    it's better with

    Code:
            private WidgetTreeGridCellRenderer<ModelData> getRenderer()
            {    
                return new WidgetTreeGridCellRenderer<ModelData>()
                {
                    private boolean init;
                    
                    @Override
                    public Widget getWidget(ModelData model, String property, ColumnData config, int rowIndex, int colIndex,
                          ListStore<ModelData> store, Grid<ModelData> grid)
                    {
                        if (!init)
                        {
                            init = true;
                            grid.addListener(Events.ColumnResize, new Listener<GridEvent<BaseModel>>()
                            {
                                public void handleEvent(GridEvent<BaseModel> be)
                                {
                                    for (int i = 0; i < be.getGrid().getStore().getCount(); i++)
                                    {
                                        Widget widget = be.getGrid().getView().getWidget(i, be.getColIndex());
                                        if (widget instanceof ProgressBar)
                                        {
                                            ProgressBar bar = (ProgressBar)widget;
                                            bar.setWidth(be.getWidth() - 10);
                                            bar.updateProgress(bar.getValue(), "") ;                                    
                                        }
                                    }
                                }
                            });
                        }
                        ProgressBar progressBar = new ProgressBar();
                        if (model.get(property) == null || (model.get(property) instanceof String && ((String)model.get(property)).length() == 0 ))
                        {
                            return new Text("");
                        }
                        else
                        {
                            double value = Double.valueOf((String)model.get(property));
                            double val = value / 100.0;
                            progressBar.updateProgress(val, "");
                            progressBar.setToolTip(String.valueOf((int)(val * 100)) + "%");
                            progressBar.setWidth(grid.getColumnModel().getColumnWidth(colIndex) - 10);
                            return progressBar;
                        }
                    }
                };
    but I've to use a String instead of a double because of the render method that does
    Code:
    String text = model.get(property);
    But there's still a problem, I can see a tree folder icon.

  3. #3
    Ext User
    Join Date
    Nov 2009
    Posts
    81
    Vote Rating
    0
    Nico33 is on a distinguished road

      0  

    Default


    I can't override the Render method, If I do it to return the widget

    Code:
    @Override
    public Object render(ModelData model, String property,
            ColumnData config, int rowIndex, int colIndex,
            ListStore<ModelData> store, Grid<ModelData> grid)
    {
        return getWidget(model, property, config, rowIndex, colIndex, store, grid);
    }
    it throws me an exception, because there's no x-tree3-node-text class ...

    How can I do a correct widget renderer ?

    Thanks for your help
    Best regards

  4. #4
    Ext User
    Join Date
    Nov 2009
    Posts
    81
    Vote Rating
    0
    Nico33 is on a distinguished road

      0  

    Default


    I've something quite working with overrinding the getWidgetTemplate method :

    Code:
    TreeGridView treeGridView = new TreeGridView()
    {
        @Override
        public String getWidgetTemplate(ModelData m, String id,
                String text, AbstractImagePrototype icon,
                boolean checkable, Joint joint, int level)
        {
            StringBuffer sb = new StringBuffer();
            sb.append("<div id=\"");
            sb.append(id);
            sb.append("\" class=\"x-tree3-node\">");
            // jumping content when inserting in column with cell widget the column extra width fixes
            sb.append("<div class=\"x-tree3-el\" style=\"width: 1000px;height: auto;\">");
            
            sb.append("<table cellpadding=0 cellspacing=0><tr><td>");
    
            String h = "";
            /*switch (joint) {
              case COLLAPSED:
                h = collapseHtml;
                break;
              case EXPANDED:
                h = expandHtml;
                break;
              default:
                h = "<img src=\"" + GXT.BLANK_IMAGE_URL + "\" style='width: 16px'>";
            }*/
    
            sb.append("</td><td>");
            /*sb.append("</td><td><img src=\"");
            sb.append(GXT.BLANK_IMAGE_URL);
            sb.append("\" style=\"height: 18px; width: ");
            sb.append(level * 18);
            sb.append("px;\" /></td><td  class='x-tree3-el-jnt'>");*/
            sb.append("</td><td  class='x-tree3-el-jnt'>");
            sb.append(h);
            if (checkable) {
              sb.append(GXT.IMAGES.unchecked().getHTML());
            } else {
              sb.append("<span></span>");
            }
            sb.append("</td><td>");
            /*if (icon != null) {
              sb.append(icon.getHTML());
            } else {*/
              sb.append("<span></span>");
            //}
            sb.append("</td><td>");
            sb.append("<span class=\"x-tree3-node-text\">");
            sb.append(text);
            sb.append("</span>");
            sb.append("</td></tr></table>");
    
            sb.append("</div>");
            sb.append("</div>");
    
            return sb.toString();
        }
    };
    
    tree.setView(treeGridView);
    But it's ugly, I've removed all the img.

    I had to use a new WidgetTreeGridCellRenderer for correcting the cast error and remove the icon et joint use

    Code:
    public abstract class WidgetTreeGridCellRenderer<M extends ModelData> extends TreeGridCellRenderer<M> {
    
      @SuppressWarnings("unchecked")
      public Object render(M model, String property, ColumnData config, int rowIndex,
          int colIndex, ListStore<M> store, Grid<M> grid) {
        config.css = "x-treegrid-column";
        
        TreeGrid tree = (TreeGrid)grid;
        TreeStore ts = tree.getTreeStore();
        int level = ts.getDepth(model);
        
        String text = String.Valueof(model.get(property));
        String id = tree.findNode(model).id;
        return tree.getTreeView().getWidgetTemplate(model, id, text, null, false, Joint.NONE, level - 1);
      }
      
      public abstract Widget getWidget(M model, String property, ColumnData config, int rowIndex, int colIndex,
          ListStore<M> store, Grid<M> grid);
    
    }
    But there's 2 problems :

    1) There's many many overriding code and ugly workaround
    2) The widget isn't correctly refreshed. It is for example if I resize the column ...

    I don't know what is bug from gxt or what is misuse from me, but thanks if you read this post to the end

  5. #5
    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


    Which version of GXT are you using? I cannot reproduce this with the latest one.

  6. #6
    Ext User
    Join Date
    Nov 2009
    Posts
    81
    Vote Rating
    0
    Nico33 is on a distinguished road

      0  

    Default


    Thanks Sven to try to help me .
    I'm using gxt 2.1.

    You're right, let's start with a minimal example for the first problem :
    Try to use this code (based on the TreeGridExample) :
    Code:
    import java.util.Arrays;
    import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
    import com.extjs.gxt.ui.client.data.ModelData;
    import com.extjs.gxt.ui.client.store.ListStore;
    import com.extjs.gxt.ui.client.store.TreeStore;
    import com.extjs.gxt.ui.client.util.Margins;
    import com.extjs.gxt.ui.client.widget.ContentPanel;
    import com.extjs.gxt.ui.client.widget.LayoutContainer;
    import com.extjs.gxt.ui.client.widget.ProgressBar;
    import com.extjs.gxt.ui.client.widget.Viewport;
    import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
    import com.extjs.gxt.ui.client.widget.grid.ColumnData;
    import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
    import com.extjs.gxt.ui.client.widget.grid.Grid;
    import com.extjs.gxt.ui.client.widget.layout.AnchorData;
    import com.extjs.gxt.ui.client.widget.layout.AnchorLayout;
    import com.extjs.gxt.ui.client.widget.layout.FitLayout;
    import com.extjs.gxt.ui.client.widget.treegrid.TreeGrid;
    import com.extjs.gxt.ui.client.widget.treegrid.TreeGridCellRenderer;
    import com.extjs.gxt.ui.client.widget.treegrid.WidgetTreeGridCellRenderer;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.google.gwt.user.client.ui.Widget;
    /**
     * Entry point classes define <code>onModuleLoad()</code>.
     */
    public class TestApp implements EntryPoint 
    {
     public void onModuleLoad() 
     {
      Viewport viewport = new Viewport();
      viewport.setLayout(new AnchorLayout());
     
      LayoutContainer container = new LayoutContainer();
         container.setLayout(new FitLayout());
     
         Folder model = TestData.getTreeModel();
         TreeStore<ModelData> store = new TreeStore<ModelData>();
         store.add(model.getChildren(), true);
         ColumnConfig name = new ColumnConfig("name", "Name", 100);
         name.setRenderer(new TreeGridCellRenderer<ModelData>());
         ColumnConfig date = new ColumnConfig("author", "Author", 100);
         ColumnConfig size = new ColumnConfig("genre", "Genre", 100);
         ColumnConfig id = new ColumnConfig("id", "id", 100);
         id.setRenderer(new WidgetTreeGridCellRenderer<ModelData>()
      {
       @Override
       public Widget getWidget(ModelData model, String property, ColumnData config, int rowIndex, int colIndex,
                ListStore<ModelData> store, Grid<ModelData> grid)
       {
        ProgressBar progressBar = new ProgressBar();
        int id = model.get(property);
        double val = id * 100.0 / 15;
        progressBar.updateProgress(val, "");
        progressBar.setToolTip(String.valueOf((int)(val * 100)) + "%");
        progressBar.setWidth(grid.getColumnModel().getColumnWidth(colIndex) - 10);
        return progressBar;
       }
      });
         ColumnModel cm = new ColumnModel(Arrays.asList(name, date, size, id));
         ContentPanel cp = new ContentPanel();
         cp.setBodyBorder(false);
         cp.setHeading("TreeGrid");
         cp.setButtonAlign(HorizontalAlignment.CENTER);
         cp.setLayout(new FitLayout());
         cp.setFrame(true);
         cp.setSize(600, 300);
         TreeGrid<ModelData> tree = new TreeGrid<ModelData>(store, cm);
         tree.setBorders(true);
         tree.setSize(400, 400);
         tree.setAutoExpandColumn("name");
         tree.setTrackMouseOver(false);
         cp.add(tree);
         container.add(cp);
      viewport.add(container , new AnchorData("100% 100%", new Margins(10))); 
     
      RootPanel.get().add(viewport);
     }
    }
    What have changed ?
    - I've added a column with the folder id
    Code:
    ColumnConfig id = new ColumnConfig("id", "id", 100);
    - and added a widget renderer :
    Code:
         id.setRenderer(new WidgetTreeGridCellRenderer<ModelData>()
      {
       @Override
       public Widget getWidget(ModelData model, String property, ColumnData config, int rowIndex, int colIndex,
                ListStore<ModelData> store, Grid<ModelData> grid)
       {
        ProgressBar progressBar = new ProgressBar();
        int id = model.get(property);
        double val = id * 100.0 / 15;
        progressBar.updateProgress(val, "");
        progressBar.setToolTip(String.valueOf((int)(val * 100)) + "%");
        progressBar.setWidth(grid.getColumnModel().getColumnWidth(colIndex) - 10);
        return progressBar;
       }
      });
    this throws me an exception in the render method of the WidgetTreeGridCellRenderer because it makes a :
    Code:
    String text = model.get(property);
    whereas the value of this property is a int. Maybe a
    Code:
    String text = String.valueOf(model.get(property));
    can be more appropriate.
    Can you reproduce this first problem ?

  7. #7
    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


    Yes we can probably change this. For now just overrwrite the render method of the WidgetTreeGridCellRenderer. But why do you use WidgetTreeGridCellRenderer in that case? Does not make sense to me because that cell is not the tree cell.

  8. #8
    Ext User
    Join Date
    Nov 2009
    Posts
    81
    Vote Rating
    0
    Nico33 is on a distinguished road

      0  

    Default


    you mean why I don't use a GridCellRenderer ?

    That's what I tryed to use in my first post, but I encountered problem when expanding items.

  9. #9
    Ext User
    Join Date
    Nov 2009
    Posts
    81
    Vote Rating
    0
    Nico33 is on a distinguished road

      0  

    Default


    Ok
    i'm really a noob !!!

    If i replace
    Code:
    return "";
    with
    Code:
    return new Text();
    It's working ... I've mixed widget and string !! What an awful mistake !


Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi