Как добавить кнопку в заголовок окна SmartGWT

Я хочу добавить кнопку в область заголовка ListGrid в SmartGWT. Я пытался использовать метод 'HeaderSpan.setAttribute((свойство String, значение объекта)), но он не работал. Ниже приведен пример, который я пробовал с:

ListGrid countryGrid = new ListGrid();
HeaderSpan ident = new HeaderSpan("Identification", new String[]{"countryCode", "countryName"});
ident.setAttribute("control", new Button("Test"));
countryGrid.setHeaderSpans(ident);
countryGrid.draw();

Пожалуйста помоги!

Источник

5 ответов

Вы проверяли это на IE? Я тестировал в FF, и он отлично работает, но у меня возникают проблемы при просмотре приложения в IE. Насколько я читал, это связано с сочетанием GWT и SmartGWT. Поэтому я думаю, что лучше использовать ToolStrip, как в этом примере: http://www.smartclient.com/smartgwt/showcase/

Источник

Наконец я нашел способ добавить кнопку в область заголовка. Ниже приведен код (для краткости опущены операторы импорта):

public class AdvancedListGrid extends ListGrid {
    public void setHeaderSpanButtons() {
        this.getAttribute("headerSpans");

        NodeList<Element> list = this.getElement().getElementsByTagName("td");
        int length = list.getLength();
        for(int index = 0; index < length; index++) {
            Element element = list.getItem(index);

            if(element.getInnerHTML().toString().equals("Identification")) {
                element.setInnerHTML(null);
                element.insertFirst(createHeaderSpanContents());
            }
        }
    }

    private Element createHeaderSpanContents() {
        HLayout hLayout = new HLayout();
        Button button = new Button("+");
        button.setHeight(20);
        button.setWidth(20);
        button.addClickHandler(new ClickHandler(){

            @Override
            public void onClick(ClickEvent event) {
                SC.say("Why did you click me?");
            }});

        Label title = new Label("Test Title");
        title.setWidth(70);
        title.setHeight(20);

        hLayout.addMember(button);
        hLayout.addMember(new LayoutSpacer());
        hLayout.addMember(title);

        return hLayout.getElement();
    }
}

Клиентский класс вызовет метод AdvancedListGrid.setHeaderSpanButtons() для добавления кнопок в диапазон заголовка. Конечно, вы можете настроить метод в соответствии с вашими потребностями.

Источник

Я тестирую его, так как мне нужно поместить Calendar в HeaderSpan. Спасибо за то, что поделились вашей идеей, она очень помогает, хотя для правильного импорта потребовалось некоторое время.

Примечание: метод setHeaderSpanButtons() будет работать, только если установлен источник данных ListGrid. Если это не так, заголовок вообще не отображается.

Улучшение: вы можете добавить разрыв в цикл, не нужно зацикливать весь NodeList:

if(element.getInnerHTML().toString().equals("Identification")) {
            element.setInnerHTML(null);
            element.insertFirst(createHeaderSpanContents());
            break;
        }

Вопрос: какова цель этой линии:

this.getAttribute("headerSpans");

И, наконец, это не работает для меня - интервал остается всегда как текст "Идентификация". Какие-либо предложения?

Благодарю.

Источник 
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.Node;
import com.google.gwt.dom.client.NodeList;
import com.smartgwt.client.widgets.events.DrawEvent;
import com.smartgwt.client.widgets.events.DrawHandler;
import com.smartgwt.client.widgets.grid.ListGrid;

public class AdvancedListGrid extends ListGrid {
    public AdvancedListGrid() {

        // Create the HeaderSpan with title "Identification"

        addDrawHandler(new DrawHandler(){

            @Override
            public void onDraw(DrawEvent event) {
                insertCalendar();
            }});
    }

    public void insertCalendar() {
        for(Element element : DOMUtils.getElementsByTagName("td")) {

            if(element.getInnerHTML().equals("Identification")) {
                createCalendar(element);

            }
        }
    }

    public void createCalendar(Element element) {
        DOMUtils.removeAllChildNodes(element);

        // Create the SmartGWT calendar object. Say the object cal.

        element.setInnerHTML(cal.getInnerHTML());
    }
}

class DOMUtils {
    public static void removeAllChildNodes(Element element) {
        NodeList<Node> childList = element.getChildNodes();
        for(int childIndex = 0; childIndex < childList.getLength(); childIndex++) {
            element.removeChild(childList.getItem(childIndex));
        }
    }

    public static Element[] getElementsByTagName(String tagName)
    {
        JavaScriptObject elements = getElementsByTagNameInternal(tagName);
        int length = getArrayLength(elements);
        Element[] result = new Element[length];
        for (int i=0; i<length; i++)
        {
            result[i] = getArrayElement(elements, i);
        }
        return result;
    }

    private static native JavaScriptObject getElementsByTagNameInternal(String tagName)/*-{
    return $doc.getElementsByTagName(tagName);
  }-*/;

    private static native int getArrayLength(JavaScriptObject array)/*-{
    return array.length;
  }-*/;

    private static native Element getArrayElement(JavaScriptObject array, int position)/*-{
    return (position>=0 && position<array.length?array[position]:null);
  }-*/;
}
Источник

Вот как это делается без JSNI или DOM: эта сетка обновляет содержимое второго заголовка диапазона динамическим содержимым при загрузке источника данных. Альтернативно, вы можете использовать "onDraw" вместо "dataArrived", если содержимое статично

import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.grid.HeaderSpan;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.events.DataArrivedEvent;
import com.smartgwt.client.widgets.grid.events.DataArrivedHandler;

public class MyGrid extends ListGrid {

    private HeaderSpan          oneHeaderSpan = new HeaderSpan("span one", new String[] { "a", "b", "c" });
    private HeaderSpan          twoHeaderSpan = new HeaderSpan("span two", new String[] { "d", "e", "f" });
    final private static String ONE_SPAN_ID   = "span1";
    final private static String TWO_SPAN_ID   = "span2";

    public MyGrid() {

        setID("MyGrid");
        setHeight100();
        setWidth100();
        setDataSource(MyDS);
        setHeaderSpans(oneHeaderSpan, twoHeaderSpan);
        oneHeaderSpan.setAttribute("spanId", ONE_SPAN_ID);
        twoHeaderSpan.setAttribute("spanId", TWO_SPAN_ID);
        setHeaderHeight(50);

        addDataArrivedHandler(new DataArrivedHandler() {
            @Override
            public void onDataArrived(DataArrivedEvent event) {
                Canvas headerSpans = Canvas.getById(getID() + "_headerSpan");
                // getPeers() did not work for IE
                for (Canvas peer : headerSpans.getParentCanvas().getChildren()) {
                    if (peer.getAttribute("spanId") != null && peer.getAttribute("spanId").equals(TWO_SPAN_ID)) {
                        peer.addChild(createHeaderSpanContents(event));
                    }
                }
            }
        });
    }

    private Canvas createHeaderSpanContents(DataArrivedEvent event) {

        // Your favorite Canvas here:
        Button button = new Button();
        button.setLayoutAlign(Alignment.CENTER);
        button.setHeight100();
        button.setWidth100();
        button.setTitle("+");
        return button;
    }
}

Использование headerSpans.getParentElement(). GetChildren()) также работает, если вы используете версию smartgwt, предшествующую 4.1d.

Источник
Другие вопросы по тегам