GridPanel full width

  1. #1

    GridPanel full width

    Hi,

    I am using a grid panel and I'd like to know how to get the rows of the panel to become full width. I've attached a screenshot which illustrates what I want.

    Click image for larger version. 

Name:	Expand full width.gif 
Views:	103 
Size:	10.7 KB 
ID:	1910

    Is there a property that can do this? I've tried the Width property but to no avail. Here is the code taht I'm using:

    <asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">
    	<ext:Store
    		ID="dsUnitsOfMeasure"
    		runat="server">
    		<Proxy>
    			<ext:HttpProxy Url="/InventoryHome/GetUnitsOfMeasure/" />
    		</Proxy>
    		<UpdateProxy>
    			<ext:HttpWriteProxy Url="/InventoryHome/SaveUnitsOfMeasure/" />
    		</UpdateProxy>
    		<Reader>
    			<ext:JsonReader IDProperty="Id" Root="data">
    				<Fields>
    					<ext:RecordField Name="Id" />
    					<ext:RecordField Name="Code" />
    					<ext:RecordField Name="Description" />
    					<ext:RecordField Name="IsInteger" />
    					<ext:RecordField Name="Company" />
    					<ext:RecordField Name="RowVersion" />
    				</Fields>
    			</ext:JsonReader>
    		</Reader>
    	</ext:Store>
    		
    		<ext:Viewport ID="Viewport1" runat="server" Layout="fit">
    			<Items>
    				<ext:GridPanel
    					ID="GridPanelUnits"
    					runat="server"
    					Header="false"
    					Border="false"
    					TrackMouseOver="true"
    					StoreID="dsUnitsOfMeasure">                    
    					<ColumnModel ID="ColumnModel1" runat="server" Width="1000">
    						<Columns>
    							<ext:Column DataIndex="Code" Header="Code">
    								<Editor>
    									<ext:TextField ID="code" runat="server" IsRemoteValidation="true">
    										<RemoteValidation Url="/InventoryHome/UnitValidate" ShowBusy="false" />
    									</ext:TextField>
    								</Editor>
    							</ext:Column>
    							<ext:Column DataIndex="Description" Header="Description">
    								<Editor>
    									<ext:TextField ID="description" runat="server" />
    								</Editor>
    							</ext:Column>
    							<ext:CheckColumn DataIndex="IsInteger" Header="Is Integer" Editable="true"/>
    						</Columns>
    					</ColumnModel>
    					<Plugins>
    						<ext:RowEditor ID="RowEditor1" runat="server" SaveText="Update" />
    						<ext:GridFilters runat="server" ID="GridFilters1" Local="true">
    							<Filters>
    								<ext:StringFilter DataIndex="Code" />
    								<ext:StringFilter DataIndex="Description" />
    								<ext:BooleanFilter DataIndex="IsInteger" />
    							</Filters>
    						</ext:GridFilters>
    					</Plugins>
    
    					<BottomBar>
    						<ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="15" />
    					</BottomBar>
    					
    					<LoadMask ShowMask="true" />
    					<SaveMask ShowMask="true" />
    					
    					<SelectionModel>
    						<ext:RowSelectionModel ID="RowSelectionModel1" SingleSelect="false" runat="server">
    							<Listeners>
    								<RowSelect Handler="#{btnDelete}.enable();" />
    								<RowDeselect Handler="if (!#{GridPanelUnits}.hasSelection()) {#{btnDelete}.disable();}" />
    							</Listeners>
    						</ext:RowSelectionModel>
    					</SelectionModel>
    					
    					<TopBar>
    						<ext:Toolbar ID="Toolbar1" runat="server">
    							<Items>
    								<ext:Button ID="add_button" runat="server" Text="Add">
    									<Listeners>
    										<Click Handler="var rowIndex = #{GridPanelUnits}.addRecord(); 
    												#{GridPanelUnits}.store.data.items[rowIndex].data.Company = null;
    												#{GridPanelUnits}.store.data.items[rowIndex].data.IsInteger = false;
    												#{GridPanelUnits}.getView().focusRow(rowIndex); 
    												#{GridPanelUnits}.startEditing(rowIndex, 0);" />
    									</Listeners>
    								</ext:Button>
    						
    								<ext:Button ID="btnDelete" runat="server" Text="Delete" Icon="Delete" Disabled="true">
    									<Listeners>
    										<Click Handler="#{GridPanelUnits}.deleteSelected();if (!#{GridPanelUnits}.hasSelection()) {#{btnDelete}.disable();}" />
    									</Listeners>
    								</ext:Button>
    						
    								<ext:Button ID="Button3" runat="server" Text="Save" Icon="Disk">
    									<Listeners>
    										<Click Handler="#{GridPanelUnits}.save();" />
    									</Listeners>
    								</ext:Button>
    						
    								<ext:Button ID="Button5" runat="server" Text="Reject Changes" Icon="ArrowUndo">
    									<Listeners>
    										<Click Handler="#{dsUnitsOfMeasure}.rejectChanges();if (!#{GridPanelUnits}.hasSelection()) {#{btnDelete}.disable();}" />
    									</Listeners>
    								</ext:Button>
    							</Items>
    						</ext:Toolbar>
    					</TopBar>
    				</ext:GridPanel>
    			</Items>
    		</ext:Viewport>
    </asp:Content>
    David
  2. #2
    Hi,

    Add GridView to the grid and set ForceFit="true" for the view
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    Hi Vladimir,

    That did the trick. To flesh out this answer, the following was what was required:

                      .
                      .
                      .
                      .
                    <View>
                        <ext:GridView ID="GridView" runat="server" ForceFit="true" />
                    </View>
                </ext:GridPanel>
    On another note, where would I find documentation on how to do such trivial things? Otherwise, I'll end up posting a lot of questions on the forums.
  4. #4
    Hi,

    On another note, where would I find documentation on how to do such trivial things? Otherwise, I'll end up posting a lot of questions on the forums.
    http://dev.sencha.com/deploy/dev/docs/
    Vladimir Shcheglov
    Sr. Developer
  5. #5
    Direct link to the .forceFit config item.

    http://dev.sencha.com/deploy/dev/doc...ember=forceFit
    Geoffrey McGill
    Founder & CEO
  6. #6
    Thanks Geoffrey,

    Hopefully, that will help someone out there.

    David

Similar Threads

  1. Replies: 3
    Last Post: Apr 28, 2011, 1:32 PM
  2. Replies: 6
    Last Post: Jun 11, 2010, 1:47 PM
  3. Full width (%age width) ext:Panels ?
    By henricook in forum 1.x Help
    Replies: 2
    Last Post: Jun 04, 2010, 5:15 PM
  4. [CLOSED] ComboBox Item List not displaying full Width
    By bfolger in forum 1.x Premium Help
    Replies: 6
    Last Post: Aug 24, 2009, 11:12 PM
  5. Full width ext:TextArea ??
    By t0ny in forum 1.x Help
    Replies: 9
    Last Post: Jul 15, 2008, 8:43 PM

Tags for this Thread

Posting Permissions