basic grid in gwt sencha uibinder not working - gwt

Question

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

Answer 1

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

Answer 2

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>

Answer 3

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>