1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    129
    Vote Rating
    0
    blay is on a distinguished road

      0  

    Default BaseModelData which contains another BaseModelData: working with Grids

    BaseModelData which contains another BaseModelData: working with Grids


    I wanna create an editable grid with one of the fields being a ComboBox (with "Source" type, which is a BaseModelData class). So the grid has to be binded to a store (with type "Exchange", which is a BaseModelData class too) and a ColumnModel. Until now, the BaseModelData classes I´ve worked with had only simple typed attributes (String, int, double, etc), so in the ColumnConfig I just set the 'id' attribute to the key of the BaseModelData map (for example, c1.setId("name")).
    So, what I don´t know in this new case is how to set the ColumnConfig in order to display one of the attributes, for example, the "name" of the Source, which is contained in the Exchange object, because by doing c1.setId("source") , the grid shows a string which references the object.

    So, in resume, I want a grid where I can fill rows with information to create new Exchange objects which will be added to the store binded to the grid. One of the fields of that grid must be a ComboBox of "Source" type (not has Enum type, it has BaseModelData type). How can I do it?

    Thanks

  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


    You can access nested values with "." separator. It would be something like "source.name" than.

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    129
    Vote Rating
    0
    blay is on a distinguished road

      0  

    Default


    Thanks, that works to show the field. But I´m still doing something wrong because I don´t see a comboBox on the grid.
    This is my code:

    ListStore<MockCurrency> currencies = new ListStore<MockCurrency>();
    currencies.add(MockData.getCurrencyExamples());

    List<ColumnConfig> columnConfigs = new ArrayList<ColumnConfig>();

    ComboBox<MockCurrency> comboCurrency = new ComboBox<MockCurrency>();
    comboCurrency.setTriggerAction(TriggerAction.ALL);
    comboCurrency.setStore(currencies);
    comboCurrency.setDisplayField("name");

    CellEditor editor = new CellEditor(comboCurrency);

    ColumnConfig c1 = new ColumnConfig();
    c1.setId("sourceCurrency.name");
    c1.setHeader("Divisa origen");
    c1.setWidth(150);
    c1.setEditor(editor);
    columnConfigs.add(c1);

    ColumnModel columnModel = new ColumnModel(columnConfigs);

    ListStore<MockExchangeType> store = new ListStore<MockExchangeType>();
    store.add(MockData.getExchangeTypeExamples2());

    Grid newGrid = new Grid<MockExchangeType>(store,columnModel);
    newGrid.setBorders(true);
    newGrid.setStripeRows(true);
    newGrid.getView().setForceFit(true);

    What is shown is a column with the sourceCurrency.name value of the data returned by the MockData.getExchangeTypeExamples2(), but not the comboBox to select and change that value.

    What am I doing wrong?

    Thx

  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


    If you want to use a CellEditor, you need to use an EditorGrid. You can need to click on the cell to active the combobox: http://www.sencha.com/examples/explo...l#editablegrid

  5. #5
    Sencha User
    Join Date
    Oct 2010
    Posts
    129
    Vote Rating
    0
    blay is on a distinguished road

      0  

    Default


    Ok, now I´m using the EditorGrid. Only making that change, I get a ClassCastException when I click on the cell. So I need to override the methods of the CellEditor. In the example of your link, they use a SimpleComboBox, but in this case, using ComboBox, the method findModel needs 2 arguments, and even filling them, it´s a protected method and don´t have visibility. I have been looking for information about this, and all examples I´ve found are using the SimpleComboBox.
    The 2 classes I use here which extend BaseModelData are:

    MockCurrency {

    public void setCurrency(String currency){
    set("name",currency);
    }
    public String getCurrency(){
    return get("name");
    }

    }

    MockExchangeType who has several "attrributes", being one of them of type "MockCurrency".

    Thanks

  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


    What classcastexception do you get?

    You should post a small, standalone testcase of your problem that implements EntryPoint. You should only one public class, if you need more, you should use inner classes.

  7. #7
    Sencha User
    Join Date
    Oct 2010
    Posts
    129
    Vote Rating
    0
    blay is on a distinguished road

      0  

    Default


    Here is the code:

    Code:
    public class CurrencyExchange implements EntryPoint {
        
        /**
         * This is the entry point method.
         */
        FormPanel form;
        EditorGrid<MockExchangeType> grid;
        
        public void onModuleLoad() {
            
            LayoutContainer lc = new LayoutContainer();
            final BorderLayout layout = new BorderLayout();
            lc.setLayout(layout);  
            lc.setStyleAttribute("padding", "10px");  
            
            ContentPanel north = new ContentPanel();  
            ContentPanel center = new ContentPanel(); 
            center.setHeaderVisible(false);
            center.setLayout(new FitLayout());
            
            
            
            //añado grid
            grid = createGrid();
            center.add(grid);
                
            BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);  
            centerData.setMargins(new Margins(0));
    
            center.setSize(-1,400);
            
            lc.add(center,centerData);  
            
            RootPanel.get().add(lc);
        }
        
        
        private FormPanel createForm(){
            
            //Creo los contenedores. Un FormPanel
            FormPanel panel = new FormPanel();
            FormData formData = new FormData("60%");  
            panel.setFrame(true);  
            panel.setHeading("Alta tipo de cambio");  
            panel.setSize(Window.getClientWidth() - 40, -1);  
            panel.setLabelAlign(LabelAlign.LEFT);  
            panel.setButtonAlign(HorizontalAlignment.CENTER);  
            panel.setLayout(new ColumnLayout());
    
            LayoutContainer main = new LayoutContainer();  
            main.setLayout(new ColumnLayout());  
        
            LayoutContainer left = new LayoutContainer();  
            left.setStyleAttribute("paddingRight", "10px");  
            left.setLayout(new FormLayout());  
    
            LayoutContainer right = new LayoutContainer();  
            right.setStyleAttribute("paddingLeft", "10px");  
            right.setLayout(new FormLayout());
            
            //Creación de los elementos del formulario
            ComboBox<Type> comboTypes = createComboType();
            ComboBox<MockSource> comboSources = createComboSource();
            
            //Estado inicial de los elementos del formulario
            comboSources.setEnabled(false);
            
            //Elementos del formulario a la izda
            left.add(comboTypes,formData);
            //Elementos del formulario a la dcha
            right.add(comboSources);
            
            main.add(left, new ColumnData(.5));  
            main.add(right, new ColumnData(.5));  
    
            panel.add(main, new FormData("100%"));  
    
    
            return panel;
    
        }
    
        private ComboBox<Type> createComboType(){
            ListStore<Type> types;
            
            ComboBox<Type> combo = new ComboBox<Type>();
            combo.setFieldLabel("Tipo de cambio");
            combo.setAllowBlank(false); //campos obligatorios
            combo.setTypeAhead(true);
            combo.setTriggerAction(TriggerAction.ALL); 
            combo.setEditable(false);
            //cargo los valores que se pueden escoger
            types = new ListStore<Type>();
            types.add(getTypes());
            combo.setStore(types);
            combo.setDisplayField("name");
            
            return combo;
        }
        
        private List<Type> getTypes(){
            //TODO invocar al SSO para que nos devuelva qué tipos puede crear
            //implementación de prueba con MockData
            return MockData.getTypes();
        }
    
        private ComboBox<MockSource> createComboSource(){
            ListStore<MockSource> sources;
            
            ComboBox<MockSource> combo = new ComboBox<MockSource>();
            combo.setFieldLabel("Fuente");
            combo.setAllowBlank(false); //campos obligatorios
            combo.setTypeAhead(true);
            combo.setTriggerAction(TriggerAction.ALL); 
            combo.setEditable(false);
            //cargo los valores que se pueden escoger
            sources = new ListStore<MockSource>();
            sources.add(getSources());
            combo.setStore(sources);
            combo.setDisplayField("name");
            
            return combo;
        }
        
        private List<MockSource> getSources(){
            //TODO invocar al SSO para que nos devuelva qué tipos puede crear
            //implementación de prueba con MockData
            return MockData.getSourceExamples();
        }
    
        private EditorGrid<MockExchangeType> createGrid(){
            ListStore<MockCurrency> currencies = new ListStore<MockCurrency>();
            currencies.add(MockData.getCurrencyExamples());
            
            //Configuración de las columnas del grid
            List<ColumnConfig> columnConfigs = new ArrayList<ColumnConfig>();
            
            
            //Defino el comboBox y su editor asociado sobreescribiendo los métodos preprocess
            //y postProcess para evitar un ClassCastException
            final ComboBox<MockCurrency> comboCurrency = new ComboBox<MockCurrency>();  
            comboCurrency.setTriggerAction(TriggerAction.ALL);  
            comboCurrency.setStore(currencies);
            comboCurrency.setDisplayField("name");
            CellEditor editor = new CellEditor(comboCurrency); 
            
            ColumnConfig c1 = new ColumnConfig();
            c1.setId("sourceCurrency.name");
            c1.setHeader("Divisa origen");
            c1.setWidth(150);
            c1.setEditor(editor);
            columnConfigs.add(c1);
            
            //ColumnModel
            ColumnModel columnModel = new ColumnModel(columnConfigs);
            
            //Store para el grid
            ListStore<MockExchangeType> store = new ListStore<MockExchangeType>();
            store.add(MockData.getExchangeTypeExamples2());
            
            EditorGrid<MockExchangeType> newGrid = new EditorGrid<MockExchangeType>(store,columnModel);
            newGrid.setBorders(true);  
            newGrid.setStripeRows(true); 
            
            return newGrid;
        }
    
    
        public class MockCurrency extends BaseModelData{
            
            private String name;
            
            public MockCurrency(String name){
                set("name", name);
            }
    
            public String getName() {
                return name;
            }
    
            public void setName(String name) {
                set("name", name);
            }
    
            
    
        }
        
        
        public class MockExchangeType extends BaseModelData{
            
            private DateTimeFormat df = DateTimeFormat.getFormat("MM/dd/yy");
    
            public MockExchangeType(String name,String source, MockCurrency sourceCurrency, String
                    targetCurrency, String startDate, String finishDate, double value){
                set("name", name);
                set("source",source);
                set("sourceCurrency", sourceCurrency);
                set("targetCurrency", targetCurrency);
                set("startDate",df.parse(startDate));
                set("finishDate",df.parse(finishDate));
                set("value", value);
                
            }
            
    
            public String getSourceCurrency() {
                return get("sourceCurrency");
            }
    
            public void setSourceCurrency(String sourceCurrency) {
                set("sourceCurrency",sourceCurrency);
            }
    
            public String getTargetCurrency() {
                return get("targetCurrency");
            }
    
            public void setTargetCurrency(String targetCurrency) {
                set("targetCurrency",targetCurrency);
            }
    
            public Date getStartDate() {
                return get("startDate");
            }
    
            public void setStartDate(Date startDate) {
                set("startDate", startDate);
            }
    
            public Date getFinishDate() {
                return get("finishDate");
            }
    
            public void setFinishDate(Date finishDate) {
                set("finishDate",finishDate);
            }
    
            public double getValue() {
                return get("value");
            }
    
            public void setValue(double value) {
                set("value",value);
            }
    
    
            public String getName() {
                return get("name");
            }
    
            public void setName(String name) {
                set("name", name);
            }
            
            public String getSource(){
                return get("source");
            }
            
            public void setSource(String source){
                set("source",source);
            }
            
            
        }
            
    }

    The exception is


    java.lang.ClassCastException: java.lang.String cannot be cast to com.extjs.gxt.ui.client.data.ModelData
    at com.extjs.gxt.ui.client.widget.form.ComboBox.setValue(ComboBox.java:1)
    at com.extjs.gxt.ui.client.widget.Editor.startEdit(Editor.java:425)
    at com.extjs.gxt.ui.client.widget.grid.EditorSupport.deferStartEditing(EditorSupport.java:200)
    at com.extjs.gxt.ui.client.widget.grid.EditorSupport$2.execute(EditorSupport.java:139)
    at com.google.gwt.user.client.CommandExecutor.doExecuteCommands(CommandExecutor.java:310)
    at com.google.gwt.user.client.CommandExecutor$2.run(CommandExecutor.java:205)
    at com.google.gwt.user.client.Timer.fire(Timer.java:141)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:157)
    at com.google.gwt.dev.shell.BrowserChannel.reactToMessagesWhileWaitingForReturn(BrowserChannel.java:1714)
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:165)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:120)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:507)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:264)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
    at com.google.gwt.core.client.impl.Impl.apply(Impl.java)
    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:188)
    at sun.reflect.GeneratedMethodAccessor13.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:157)
    at com.google.gwt.dev.shell.BrowserChannel.reactToMessages(BrowserChannel.java:1669)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:401)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:222)
    at java.lang.Thread.run(Unknown Source)

    I´ve read about overriding methods of CellEditor, but I don´t know exaclty how. T

    Thx for your help

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


    There are classes missing. Type and MockData are missing for example. MockSource ism issing too

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


    Just from reading your code:

    Code:
     ColumnConfig c1 = new ColumnConfig();
        c1.setId("sourceCurrency.name");
    sourceCurrency represents a String and so never can have any nested value.

  10. #10
    Sencha User
    Join Date
    Oct 2010
    Posts
    129
    Vote Rating
    0
    blay is on a distinguished road

      0  

    Default


    Let me check again the code I´ve wrote.
    About c1.setId("sourceCurrency.name")...why this is wrong?

    I mean, the MockExchangeType has one property of type MockCurrency which has a property of type STring. The store of the grid has MockExchangeType. So, how should I show the name of the MockCurrency property of the MockExchangeType ?

Similar Threads

  1. How to use BaseModel and BaseModelData
    By brendand in forum Community Discussion
    Replies: 6
    Last Post: 22 Jan 2012, 5:27 AM
  2. NoClassDefFoundError BaseModelData
    By chaby in forum Ext GWT: Discussion
    Replies: 4
    Last Post: 8 Apr 2010, 3:53 AM
  3. BaseModelData and serialization
    By debnet in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 23 Dec 2009, 6:56 AM
  4. Cloning BaseModelData
    By FireGlow in forum Ext GWT: Help & Discussion (1.x)
    Replies: 1
    Last Post: 7 Jul 2009, 2:28 AM
  5. BaseModelData question
    By Bugs in forum Ext GWT: Help & Discussion (1.x)
    Replies: 3
    Last Post: 4 Dec 2008, 3:36 AM

Thread Participants: 1