Issues with Editable Grid

[luizp.ribeiro]

I've created one screen with Editable Grid based on GXT example.
I have four columns. The first one is a live search field (model field) and the others are string TextField.
When I select one value from the live search field, the others fields need to be filled with the value selected.
My problem is about the grid behavior. When I add more than one line in the grid, the values are changed with the value of the current changing line.

Here is my code:

package com.freightgate.isf.client;

import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.event.GridEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.event.ToolBarEvent;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.grid.CellEditor;
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.EditorGrid;
import com.extjs.gxt.ui.client.widget.grid.GridView;
import com.extjs.gxt.ui.client.widget.grid.SummaryColumnConfig;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.toolbar.TextToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.freightgate.isf.client.model.ItemUI;
import com.freightgate.isf.client.model.ListItemUI;
import com.freightgate.isf.client.util.ServicesFactory;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.RootPanel;

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

public class NewItemsGrid extends LayoutContainer implements EntryPoint {
    private ListStore<ListItemUI> storeList;
    private TextField<String> desc;
    private TextField<String> hts;
    private TextField<String> country;
    private TextField<String> manuf;
    private ComboBox<ItemUI> itemNum;
    protected int currentLine;

    public NewItemsGrid() {
        // Set Layout
        setLayout( new FlowLayout( 10 ) );

        storeList = new ListStore<ListItemUI>();
        storeList.add( new LinkedList<ListItemUI>() );

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

        // Item number column
        SummaryColumnConfig numberColumn = new SummaryColumnConfig( "number", "Item Number", 20 );
        loadItemNumberField();
        numberColumn.setEditor( new CellEditor( itemNum ) {
            @Override
            public Object preProcessValue( Object value ) {
                if( value == null ) {
                    return value;
                }

                return itemNum.getPropertyEditor().convertStringValue( value.toString() );
            }

            @Override
            public Object postProcessValue( Object value ) {
                if( value == null ) {
                    return value;
                }
                return( ( ItemUI ) value );
            }
        } );
        configs.add( numberColumn );

        // Desciption column
        SummaryColumnConfig descColumn = new SummaryColumnConfig( "description", "Description", 80 );
        desc = new TextField<String>();
        desc.setAllowBlank( false );
        desc.setAutoValidate( true );
        descColumn.setEditor( new CellEditor( desc ) );
        configs.add( descColumn );

        // HTS column
        SummaryColumnConfig htsColumn = new SummaryColumnConfig( "hts", "HTS", 20 );
        hts = new TextField<String>();
        hts.setAllowBlank( false );
        hts.setAutoValidate( true );
        htsColumn.setEditor( new CellEditor( hts ) );
        configs.add( htsColumn );

        // CountryUI column
        SummaryColumnConfig countryColumn = new SummaryColumnConfig( "country", "Country", 20 );
        country = new TextField<String>();
        country.setAllowBlank( false );
        country.setAutoValidate( true );
        countryColumn.setEditor( new CellEditor( country ) );
        configs.add( countryColumn );

        // Manufacterer column
        SummaryColumnConfig manufColumn = new SummaryColumnConfig( "manufacturer", "Manufacturer", 20 );
        manuf = new TextField<String>();
        manuf.setAllowBlank( false );
        manuf.setAutoValidate( true );
        manufColumn.setEditor( new CellEditor( manuf ) );
        configs.add( manufColumn );

        ColumnModel cm = new ColumnModel( configs );
        GridView summary = new GridView();
        summary.setForceFit( true );
        final EditorGrid<ItemUI> grid = new EditorGrid<ItemUI>( storeList, cm );
        grid.setBorders( true );
        grid.setView( summary );
        grid.getView().setShowDirtyCells( false );
        grid.addListener( Events.BeforeEdit, new Listener<GridEvent>() {
            public void handleEvent( GridEvent e ) {
                currentLine = e.rowIndex;
            }
        } );

        // Defines the toolbar for the add button
        ToolBar toolBar = new ToolBar();
        TextToolItem addButton = new TextToolItem( "Add Item" );
        addButton.setIconStyle( "add" );
        addButton.addSelectionListener( new SelectionListener<ToolBarEvent>() {
            @Override
            public void componentSelected( ToolBarEvent ce ) {
                grid.stopEditing();
                storeList.add( new ListItemUI() );
            }
        } );
        toolBar.add( addButton );

        // Sets the content panel
        ContentPanel panel = new ContentPanel();
        panel.setTopComponent( toolBar );
        panel.setHeading( "Items" );
        panel.setIconStyle( "icon-table" );
        panel.setCollapsible( false );
        panel.setFrame( false );
        panel.setHeight( 450 );
        panel.setWidth( 850 );
        panel.setLayout( new FitLayout() );
        panel.add( grid );
        add( panel );
    }

    private void loadItemNumberField() {
        ListStore<ItemUI> storeLocal = loadItemsValues();
        itemNum = new ComboBox<ItemUI>() {
            @Override
            protected void onSelect( ItemUI model, int index ) {
                ListItemUI currentItem = storeList.getAt( currentLine );
                if( currentItem == null ) {
                    return;
                }
                currentItem.setItem( model );
                currentItem.setDescription( model.getDescription() );
                currentItem.setHts( model.getHts() );
                currentItem.setCountry( model.getCountry() );
                currentItem
                        .setManufacturer( model.getManufacturer() != null && model.getManufacturer().size() > 0 ? model
                                .getManufacturer().get( 0 ) : null );
                storeList.update( currentItem );
                GWT.log( "Updated Line-" + currentLine, null );
                super.onSelect( model, index );
            }
        };
        itemNum.setDisplayField( "number" );
        itemNum.setName( "number" );
        itemNum.setStore( storeLocal );
        itemNum.setHideTrigger( false );
        itemNum.setPageSize( 10 );
        itemNum.setMinChars( 1 );
        itemNum.setWidth( 20 );
        itemNum.setTriggerAction( ComboBox.TriggerAction.ALL );
        itemNum.setEmptyText( "Enter the item number." );
    }

    private ListStore<ItemUI> loadItemsValues() {

        RpcProxy<PagingLoadConfig, PagingLoadResult<ItemUI>> proxy = new RpcProxy<PagingLoadConfig, PagingLoadResult<ItemUI>>() {
            @Override
            public void load( PagingLoadConfig pagingConfig, AsyncCallback<PagingLoadResult<ItemUI>> callback ) {
                ServicesFactory.getTenPlusTwoService().findByItemId( pagingConfig, callback );
            }
        };

        BasePagingLoader<PagingLoadConfig, PagingLoadResult<ItemUI>> loader = new BasePagingLoader<PagingLoadConfig, PagingLoadResult<ItemUI>>(
                proxy );
        return new ListStore<ItemUI>( loader );

    }
    
    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        VerticalPanel vp = new VerticalPanel();
        vp.setSpacing( 10 );
        vp.add( new NewItemsGrid() );
        RootPanel.get().add( vp );
    }

}

Thanks in advance.

Luiz

[gslender]

Luiz,

Can you explain more clearly what isn't working - I'm unsure exactly and obviously I can't compile your code snippet... so please outline exactly/clearly what you are trying to do and what isn't working.

[luizp.ribeiro]

Luiz,

Can you explain more clearly what isn't working - I'm unsure exactly and obviously I can't compile your code snippet... so please outline exactly/clearly what you are trying to do and what isn't working.

Thanks for reply.

Sometimes one image says more the thousand words

Let me give you an example (See the attachment) . The second line is being changed when I change the fifth line, and the values of the third line is not being shown, but I am able to see the values when I click on any third line cell.

Do you have suggestion to changed in my code in order to use grid?

untitled.jpg

[gslender]

grid.getView().refresh(false);

[gslender]

another thing - currentLine is the grid row index (ie zero at the top and counts down) this is not always = to the store model index...(depending on the store position etc)

You may need to be sure that currentLine is what you think it is - perhaps throw in a heap of System.out.println(currentLine) so you can see what value it is when things are being changed etc...