Ext-GWT / GXT (не так) Проблема простого макета? - PullRequest
3 голосов
/ 07 мая 2010

Я разместил этот вопрос на форумах Ext-GWT, я просто надеюсь, что кто-то здесь может иметь ответ для меня!

Я изо всех сил пытаюсь сделать что-то, что сначала казалось мне простым, но я начинаю верить, что это невозможно ...

У меня есть своего рода «шаблон макета» - просто состоящий из нескольких GWT DockLayoutPanel внутри друг друга и, наконец, заканчивающийся LayoutPanels. LayoutPanel GWT предназначен для размера виджета (или Composite), который добавляется к нему, в его полный размер и идеально подходит для чистых виджетов GWT.

Идея моего "шаблона макета" заключается в том, что я не знаю ТОЧНОЙ высоты и ширины самой внутренней панели LayoutPanel, поскольку я могу по-разному задавать размеры панелей (внешних DockLayoutPanels) при создании экземпляра этого шаблона. Все, что я хотел бы, это добавить компонент Grid к одной из самых внутренних LayoutPanels и иметь его размер (высоту и ширину), чтобы он соответствовал обычным виджетам GWT (например, прекрасно работает с меткой GWT).

Я ОЧЕНЬ новичок в GXT (как я начал использовать его ранее сегодня), и я понимаю, что GXT создает свои Компоненты иначе, чем GWT создает свои Виджеты на DOM.

Есть ли способ достичь желаемого результата? Я пытался добавить сетку в ContentPanel с макетом FitLayout, я пробовал AnchorLayout, я пытался добавить сетку напрямую ... Ничего не получается ... Любой совет или даже толчок в правильном направлении будет очень оценили!

Заранее спасибо!

Ксандель

Ответы [ 2 ]

11 голосов
/ 21 мая 2010

Просто примечание к этому сообщению и направление, которое я выбрал.Когда я начинал свой проект GWT и изучал основы и читал посты, проблемы и советы других, первый совет, который я упустил из виду, был довольно прост - при использовании инфраструктуры GWT используйте только чистые 100% компоненты GWT.

Я изначально проигнорировал эти справедливые предупреждения коллег-разработчиков, потому что в эпоху инструментов с открытым исходным кодом и проектов с открытым исходным кодом развивается мышление «Вместо того, чтобы создавать инструмент, который даст мне определенную функциональность, позвольте мне посмотреть, есликто-то другой уже сделал это ».Такое мышление ускоряет разработку и практически стандартизирует проекты и методы реализации.

Однако за последние два месяца я обнаружил, что при работе с GWT лучше всего не следовать этому принципу.Возможно, потому что он не так широко распространен, как другие платформы, или требует очень определенного типа стиля кодирования, но тем не менее мой поиск (простой, сортируемый, загружаемый JSON) компонент сетки и (проверяющий, аккуратно стилизованный) компонент формы не был ничемесли не считать кошмар.

Это не потому, что их не существует.Они делают.Я попробовал ext-gwt, gwt-ext, gwt-мозаику и gwt-инкубатор.Это связано с тем, что многие компоненты отрываются от очень простой основы компоновки, которую предоставляет GWT (другими словами, панели, на которые вы помещаете виджеты, в основном должны быть панелями, снабженными инструментами).Это, в свою очередь, делает невозможным смешивание компонентов и получение желаемого результата.Это, в свою очередь, отходит от мышления «дай мне найти полезный компонент».

Просто интересный и последний момент, который, я думаю, стоит упомянуть.Таким образом, из-за моей реализации вышеупомянутого пункта, я решил написать свою собственную сетку и компоненты формы.Который я выполнил и работает нормально для меня (очевидно, потому что я написал их, я не подозреваю, что они будут полезны для всех остальных).Но в процессе написания компонента сетки и необходимости автоматически масштабировать и размечать столбцы после их отрисовки на родительской панели, я обнаружил, что знание окончательной ширины панелей неизвестно до окончательного рисования (в конце концов, это происходит долговаш код выполняется).По иронии судьбы я приступил к созданию набора панелей, которые взаимодействуют друг с другом, от родительской панели (которой в конечном итоге НУЖНО знать ее размер) вплоть до самых внутренних панелей, чтобы, когда мой компонент сетки наконец-то прорисовывался, я могзапустить метод onSizeKnown (int width, int height) и выполнить все необходимые измерения.

После того, как я это сделал, я ничего не мог сделать, кроме как смеяться.Потому что мне вдруг стало ясно, почему все остальные компоненты GWT требуют своих собственных панелей.По сути, я должен был сделать то же самое, чтобы получить то, что мне нужно было для работы.

Короче говоря, если вы начинающий GWT-разработчик, каким я был и есть (ищу?), Ищите интересные вещи, чтобы ваш проект выгляделКруто - это мой совет - если вы собираетесь использовать внешнюю платформу, такую ​​как некоторые из вышеупомянутых, - используйте ТОЛЬКО эту платформу.Не смешивайте его компоненты с другими фреймворками.Научитесь любить эту структуру и постройте свой проект снизу вверх, используя их панели и методы проектирования.Если это вас пугает и заставляет чувствовать себя нервным и ограниченным, делайте то, что я делал, и пишите свои собственные, используя чисто ванильные компоненты GWT.Следуя этому совету, вы сэкономите ОЧЕНЬ много времени в долгосрочной перспективе.

Xandel

2 голосов
/ 18 ноября 2010
  • Это решение для GXT 2.2.0 и GWT 2.0.4 *

Несмотря на то, что оригинальный постер с тех пор перешел, я недавно столкнулся с этой проблемой и подумал, что опубликую свое решение на случай, если кто-нибудь еще наткнется на это.

Нет причин, по которым вы не можете добавить GXT Grid напрямую в GWT LayoutPanel. Проблема в том, что подход к стилю / позиционированию двух библиотек конфликтует. По сути, это сводится к тому, что размер сетки определяется на основе атрибута высоты его родителя, который не установлен, что означает, что телу сетки назначается высота 0, а сама сетка получает высоту, равную высоте заголовка сетки (если настоящее время).

Таким образом, решение состоит в том, чтобы отменить то, что делает GXT, как только поток возвращается в GWT. Вот шаблонное решение:

class MyGridWrapper extends Composite {

  private LayoutPanel widget;
  private Grid<?> grid;

  public MyGridWrapper(Grid<? extends ModelData> grid) {
    this.grid = grid;

    widget = new LayoutPanel();
    initWidget(widget);

    widget.add(grid);
    // Set the grid's vertical and horizontal constraints

    // ... populate the rest of the panel
  }

  @Override
  protected void onLoad() {
    // onLoad is called after GXT is finished so we can do what we need to

    // Redo what the LayoutPanel did originally
    grid.el().setStyleAttribute("position", "absolute");
    grid.el().setStyleAttribute("top", "0");
    grid.el().setStyleAttribute("bottom", "0");
    grid.el().setStyleAttribute("left", "0");
    grid.el().setStyleAttribute("right", "0");

    // Undo any height settings on the .x-grid3 element
    El mainWrap = grid.el().firstChild();
    assert mainWrap.hasStyleName("x-grid3") : "Wrong Element: " + mainWrap.getStyleName();
    mainWrap.setStyleAttribute("height", "auto");

    // Undo any height settings on the .x-grid3-scroller element
    El scroller = grid.el().firstChild().firstChild().getChild(1); // FUN!
    assert scroller.hasStyleName("x-grid3-scroller") : "Wrong Element: " + scroller.getStyleName();
    scroller.setStyleAttribute("height", "auto");
  }
}

Утверждения призваны помочь защитить от того, что, очевидно, очень хрупкий код, так что будьте осторожны, что это ГИГАНТСКИЙ, ГИГАНТСКИЙ взлом.

-

  • На всякий случай, если вам интересно, где определяется структура GXT Grid, вы можете найти ее в файле шаблона в GXT JAR по адресу com / extjs / gxt / ui / client / widget / grid / GridTemplates # master.html

  • Взгляните на com.extjs.gxt.ui.client.widget.grid.GridView # renderUI (), чтобы получить представление о том, как строится сетка.

...