View Full Version : [CLOSED] GridPanel row height problem

May 21, 2012, 8:17 AM
We are having problem on height of grid panel row inside a tab panel. It works properly for grid panel without command column but in case of command column some bottom portion of newly added row is hiding inside the tab panel.

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
public class Test
public int ID { get; set; }
public string ItemName { get; set; }
public double Price { get; set; }


protected void Page_Load(object sender, EventArgs e)
if (!X.IsAjaxRequest)

private void BindData()
this.GridPanel1.Store.Primary.DataSource = this.GetData();

private List<Test> GetData()
return new List<Test>
new Test { ID = 1, ItemName = "3m Co", Price = 71.72},
new Test { ID = 2, ItemName = "Alcoa Inc", Price = 29.01},
new Test { ID = 3, ItemName = "Altria Group Inc",Price = 29.01},


<!DOCTYPE html>
<head id="Head1" runat="server">

<script type="text/javascript">

function addItemLineNewRow() {
var gridItems = null;
gridItems = <%= GridPanel1.ClientID%>;
var newRow = new ModelgridItems();
var rowIndex = gridItems.getStore().data.items.length;
newRow.data.ID = "";
newRow.data.ItemName = "";
newRow.data.Price = "";
var rowIndex = gridItems.getStore().data.items.length;
gridItems.getStore().insert(rowIndex, newRow);

<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:TabPanel ID="TabPanel_ItemLineAndExpenseLine" ActiveIndex="0" runat="server"
DefaultBorder="false" DefaultPadding="0">
<ext:Panel ID="Panel_ItemLIne" AutoHeight="true" runat="server" Title="Panel1" Header="False"
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" Width="600">
<ext:Store ID="Store1" runat="server">
<ext:Model ID="Model1" Name="ModelgridItems" runat="server" IDProperty="ID">
<ext:ModelField Name="ID" Type="Int" />
<ext:ModelField Name="ItemName" />
<ext:ModelField Name="Price" Type="Float" />
<ColumnModel ID="ColumnModel1" runat="server">
<ext:Column ID="Column1" runat="server" Text="ID" DataIndex="ID" Width="35" />
<ext:Column ID="Column2" runat="server" Text="NAME" DataIndex="ItemName" Flex="1">
<ext:TextField ID="TextField1" runat="server" />
<ext:Column ID="Column3" runat="server" Text="Price" DataIndex="Price">
<Renderer Format="UsMoney" />
<ext:NumberField ID="NumberField1" runat="server" />
<ext:CommandColumn runat="server">
<ext:GridCommand Icon="Delete" CommandName="Delete" />
<ext:GridView ID="GridView1" runat="server" />
<ext:CellSelectionModel ID="CellSelectionModel1" runat="server" />
<ext:Panel ID="Panel_ExpneseLine" runat="server" Title="Panel2" Header="False" Border="false">
<ext:Button ID="btnAddRow" runat="server" Icon="Add" Text="Add New Row" Cls="btnblock bluecolor">
<Click Handler="addItemLineNewRow();" />

May 21, 2012, 10:29 AM

I can suggest the following CSS to fix it.

<style type="text/css">
.row-cmd-cell .x-btn-default-toolbar-small {
padding: 0px;