junaidp
junaidp

Reputation: 11221

basic grid in gwt sencha uibinder not working

I am trying to make a basic grid in GWT Sencha. it works fine , but i am not sure how to put the grid in UiBinder , Not sure what would be the parent widget ,

thats what i am doing

   <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

    <c:FramedPanel>
    <grid:GridView ui:field="gridMain">
    </grid:GridView>
    </c:FramedPanel>


Error:

 Expected a widget or <g:cell>, found <grid:GridView ui:field='gridMain'> Element <g:VerticalPanel> (:4

Upvotes: 1

Views: 1525

Answers (3)

davgut
davgut

Reputation: 714

You can't directly add grid under FramedPanel Try to add a container such as VerticalLayoutContainer as a child of your FramedPanel before adding the grid.

in UiBinder

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client"
xmlns:row="urn:import:com.sencha.gxt.widget.core.client.container">

Under your FramedPanel

<gxt:FramedPanel ui:field="panel" headingText="VerticalLayout Example"
        collapsible="false">
        <row:VerticalLayoutContainer>
            <row:child><grid:GridView ui:field="view"></grid:GridView>
            </row:child>
<row:VerticalLayoutContainer>

Upvotes: 0

Ian Jacobs
Ian Jacobs

Reputation: 5501

The UIBinder examples for gxt can be found here:

http://gxt-uibinder.appspot.com/

This is specifically the example you're looking for:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'
    xmlns:gxt="urn:import:com.extjs.gxt.ui.client.widget" xmlns:toolbar="urn:import:com.extjs.gxt.ui.client.widget.toolbar" xmlns:form="urn:import:com.extjs.gxt.ui.client.widget.form" xmlns:grid="urn:import:com.extjs.gxt.ui.client.widget.grid">     
    <ui:with type="com.jhickman.web.gwt.gxtuibindertest.client.resources.icons.ExampleIcons" field="icons" />
    <ui:with type="com.extjs.gxt.ui.client.store.ListStore" field="store" />
    <ui:with type="com.google.gwt.i18n.client.DateTimeFormat" field="dateformat" />
    <ui:with type="com.jhickman.web.gwt.gxtuibindertest.client.view.grids.BasicGridView.ChangeCellRenderer" field="change" />
    <ui:with type="com.jhickman.web.gwt.gxtuibindertest.client.view.grids.BasicGridView.GridNumberRenderer" field="gridNumber" />

  <gxt:LayoutContainer layout="FlowLayout">
    <gxt:layoutdata type="FlowData" margins="10">
      <gxt:ContentPanel bodyBorder="true" icon="{icons.table}" heading="Basic Grid" buttonAlign="CENTER" layout="FitLayout" width="600" height="300">
        <gxt:topcomponent>
          <toolbar:ToolBar>
            <toolbar:LabelToolItem label="Selection Mode:" />
            <form:SimpleComboBox triggerAction="ALL" editable="false" fireChangeEventOnSetValue="true" width="100" ui:field="selectionModeComboBox" />
          </toolbar:ToolBar>
        </gxt:topcomponent>


        <grid:Grid store="{store}"
            ui:field="grid"
            styleAttribute="borderTop:none"
            autoExpandColumn="name"
            borders="false"
            stripeRows="true"
            columnLines="true"
            columnReordering="true">
          <grid:column id="name"
                      header="Company"
                      width="200"
                      rowHeader="true" />
              <grid:column id="symbol"
                      header="Symbol"
                      width="100" />
          <grid:column id="last"
            header="Last"
            alignment="RIGHT"
            width="75"
            renderer="{gridNumber}"/>
          <grid:column id="change"
            header="Change"
            width="100"
            alignment="RIGHT"
            renderer="{change}" />
          <grid:column id="date"
            header="Last Updated"
            width="100"
            alignment="RIGHT"
            dateTimeFormat="{dateformat}" />
        </grid:Grid>
      </gxt:ContentPanel>
    </gxt:layoutdata>
  </gxt:LayoutContainer>

</ui:UiBinder>

Upvotes: 0

Gnik
Gnik

Reputation: 7438

Add the following line in ui.xml

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"

xmlns:grid="urn:import:Package-of-GridView">

If you have already added these two lines then its fine

Here is my question and answer for you.

I guess GridView is your view class. Is it extends any widgets?

If it extends any widgets then it will work. If not it just a class.

We can add a widget in a widget but we can't add a class in a widget.

So if required extend the appropriate widget to GridView

For eg. public class Gridview extends VerticalPanel

Upvotes: 2

Related Questions