RPC, grid and many other problems with gxt 3

[Mike_javaJunior]

Hi. I'm trying to change the gxt version of my application from 2.2 to 3.0.1 and this made me a lot of trouble. GXT 3 is designed to make the ui better and developer's life easer, but I don't agree about the last. There were to many chages since 2nd versions so it can't be simply understood.
so, for example: a have a part of program that calls the server for search results and builds the table with this results. Here are how I've made it using extjs.gxt:

package com.messagedna.web.client.widget;

import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.core.XTemplate;
import com.extjs.gxt.ui.client.data.*;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
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.grid.RowExpander;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.RowData;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;
import com.extjs.gxt.ui.client.widget.toolbar.PagingToolBar;
import com.google.gwt.core.client.GWT;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.messagedna.web.client.ServerManagement;
import com.messagedna.web.client.ServerManagementAsync;
import com.messagedna.web.client.data.WebSearchResultItem;


import java.util.ArrayList;
import java.util.List;


/**
 * Panel to view search results.
 */
class SearchPanel extends ContentPanel {
    private final ServerManagementAsync serverManagementSvc = GWT.create(ServerManagement.class);
    private final QueryBuilderPanel queryBuilderPanel;


    public SearchPanel(final String customerId, final String login, final String password) {


        // ------------------ Proxy and loader ---------------------
        final RpcProxy<BasePagingLoadResult<WebSearchResultItem>> proxy = new RpcProxy<BasePagingLoadResult<WebSearchResultItem>>() {
            @Override
            public void load(final Object loadConfig, final AsyncCallback<BasePagingLoadResult<WebSearchResultItem>> callback) {
                final BasePagingLoadConfig config = (BasePagingLoadConfig) loadConfig;
                serverManagementSvc.search(customerId, queryBuilderPanel.getWebSearchRequest(), config, login, password, callback);
            }
        };


        // loader
        final PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy);
        loader.setRemoteSort(true);


        final PagingLoadConfig config = new BasePagingLoadConfig();
        queryBuilderPanel = new QueryBuilderPanel(customerId, config, loader, login, password);




        // ----------------- Results panel ----------------


        final ListStore<WebSearchResultItem> store = new ListStore<WebSearchResultItem>(loader);
        final PagingToolBar toolBar = new PagingToolBar(18);
        toolBar.bind(loader);


        final RowExpander expander = new RowExpander();
        final XTemplate tpl = XTemplate.create("<p><b>Domain ID: </b>{domainId}</p> <p><b>Message ID: </b>{msgId}</p> <p><b>Receive date: </b>{receiveTimestamp}</p> <p><b>Delivery date: </b>{deliveryTimestamp}</p> <p><b>From: </b>{fromEmail}</p> <p><b>To: </b>{toEmail}</p> <p><b>EnvFrom: </b>{envFromEmail}</p> <p><b>EnvTo: </b>{envToEmail}</p> <p><b>Subject: </b>{subject}</p> <p><b>Size: </b>{size}</p> <p><b>Tags: </b>{tags}</p> <p><b>Sender IP: </b>{senderIP}</p> <p><b>Recipient IP: </b>{recipientIP}</p> <p><b>Accept Line: </b>{acceptLine}</p> <p><b>File: </b>{fileName}</p> <p><b>Virus: </b>{virus}</p> <p><b>Note: </b>{note}</p>");
        expander.setTemplate(tpl);


        final Grid<WebSearchResultItem> resultsGrid = new Grid<WebSearchResultItem>(store, getColumnModel(expander));
        resultsGrid.addPlugin(expander);
        resultsGrid.setBorders(true);
        resultsGrid.setStripeRows(true);
        resultsGrid.setAutoExpandColumn("subject");
        resultsGrid.setLoadMask(true);


        final ContentPanel resultsPanel = new ContentPanel();
        resultsPanel.setHeading("Results");
        resultsPanel.setLayout(new FitLayout());
        resultsPanel.add(resultsGrid);
        resultsPanel.setBottomComponent(toolBar);


        setHeading("Search");
        setLayout(new RowLayout(Style.Orientation.VERTICAL));
        add(queryBuilderPanel, new RowData(1, 300, new Margins(4)));
        add(resultsPanel, new RowData(1, 1, new Margins(4)));


        // Load live flow data
        config.setOffset(0);
        config.setLimit(15);
        loader.load(config);


    }


    private ColumnModel getColumnModel(final RowExpander expander) {
        final List<ColumnConfig> resultsConfigs = new ArrayList<ColumnConfig>();


        resultsConfigs.add(expander);


        ColumnConfig column;


        column = new ColumnConfig("domainId", "Domain ID", 50);
        column.setSortable(false);
        resultsConfigs.add(column);


        column = new ColumnConfig("msgId", "Message ID", 100);
        column.setSortable(false);
        resultsConfigs.add(column);


        column = new ColumnConfig("receiveTimestamp", "Receive date", 100);
        column.setDateTimeFormat(DateTimeFormat.getFormat("dd/MM/yy HH:mm:ss"));
        column.setSortable(false);
        resultsConfigs.add(column);


        column = new ColumnConfig("deliveryTimestamp", "Delivery date", 100);
        column.setDateTimeFormat(DateTimeFormat.getFormat("dd/MM/yy HH:mm:ss"));
        column.setSortable(false);
        resultsConfigs.add(column);




        column = new ColumnConfig("fromEmail", "From", 200);
        column.setSortable(false);
        resultsConfigs.add(column);


        column = new ColumnConfig("toEmail", "To", 200);
        column.setSortable(false);
        resultsConfigs.add(column);


        column = new ColumnConfig("envFromEmail", "EnvFrom", 100);
        column.setSortable(false);
        resultsConfigs.add(column);


        column = new ColumnConfig("envToEmail", "EnvTo", 100);
        column.setSortable(false);
        resultsConfigs.add(column);


        column = new ColumnConfig("subject", "Subject", 300);
        column.setSortable(false);
        resultsConfigs.add(column);


        column = new ColumnConfig("size", "Size", 50);
        column.setSortable(false);
        resultsConfigs.add(column);


        column = new ColumnConfig("tags", "Tags", 90);
        column.setSortable(false);
        resultsConfigs.add(column);


        column = new ColumnConfig("senderIP", "SIP", 75);
        column.setSortable(false);
        resultsConfigs.add(column);


        column = new ColumnConfig("recipientIP", "RIP", 75);
        column.setSortable(false);
        resultsConfigs.add(column);


        column = new ColumnConfig("acceptLine", "Accept Line", 75);
        column.setSortable(false);
        resultsConfigs.add(column);


        column = new ColumnConfig("fileName", "File", 50);
        column.setSortable(false);
        resultsConfigs.add(column);


        column = new ColumnConfig("virus", "Virus", 50);
        column.setSortable(false);
        resultsConfigs.add(column);


        column = new ColumnConfig("note", "Note", 50);
        column.setSortable(false);
        resultsConfigs.add(column);


        return new ColumnModel(resultsConfigs);
    }
}

It's not enough just to change the library and make only a few changes. Actually I need to make the client side of the application from scratch again, but there are no even any tutorials that descrybes how to work with sencha gxt.
So I ask for help or even for tutorial.

[aclsoftware]

Hi Mike,

I agree. I too am struggling with finding examples I can learn from. I simple wish to load a combobox with values from a RequestFactory but cannot find simple examples that work.

I am really struggling with this. If I manage to achieve it I will post up my code for you to follow. If anyone else can help aswell to get us both moving it would be appreciated.

Good luck

ACL

[Mike_javaJunior]

you are right. It would be very nice of sencha to produce something like a table which shows how main classes of sencha match to the classes from com.extjs package. or how to realise the main situations using sencha in comparison with extjs

[Mike_javaJunior]

this seems to me that I've found the part of the answer at: http://stackoverflow.com/questions/1...77161#10577161