Feb 02, 2015, 9:40 AM
[CLOSED] RowExpander: Cannot set property 'component' of null
Hello.
I have a Grid that contains a RowExpander.
The RowExpander opens a Grid and a TextField, which are built in code-behind.
When the Grid is expanded, a JavaScript exception is thrown: Cannot set property 'component' of null.
Please find below a code sample
Any advice is appreciated.
I have a Grid that contains a RowExpander.
The RowExpander opens a Grid and a TextField, which are built in code-behind.
When the Grid is expanded, a JavaScript exception is thrown: Cannot set property 'component' of null.
Please find below a code sample
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack && !IsAsync)
{
List<object> userList = new List<object>();
userList.Add(new { id = "1", fullname = "john doe" });
userList.Add(new { id = "2", fullname = "marilyn monroe" });
userList.Add(new { id = "3", fullname = "jack smith" });
userList.Add(new { id = "4", fullname = "andy murray" });
storeName.DataSource = userList;
storeName.DataBind();
}
}
[DirectMethod]
public static string GetForm(Dictionary<string, string> parameters)
{
int id = Convert.ToInt32(parameters["ID"]);
string name = Convert.ToString(parameters["FULLNAME"]);
Ext.Net.FormPanel formRowExpander = new Ext.Net.FormPanel();
formRowExpander = createRowExpander(id, name);
return ComponentLoader.ToConfig(formRowExpander, true);
}
public static Ext.Net.FormPanel createRowExpander(int id, string name)
{
Ext.Net.FormPanel formPanelExpanded = new FormPanel()
{
ID = "formPanelExpanded",
Height = 200,
Width = 290
};
Ext.Net.GridPanel grid = new Ext.Net.GridPanel()
{
ID = "grid",
Height = 150,
Width = 557
};
//BUILDING THE STORE
Ext.Net.Store storeIDs = new Ext.Net.Store()
{
ID = "storeIDs"
};
//BUILDING THE MODEL
Ext.Net.Model model = new Ext.Net.Model();
//BUILDING THE MODELFIELDS
Ext.Net.ModelField idfield = new Ext.Net.ModelField()
{
Name = "id",
Type = Ext.Net.ModelFieldType.Int
};
Ext.Net.ModelField title = new Ext.Net.ModelField()
{
Name = "title",
Type = Ext.Net.ModelFieldType.String
};
Ext.Net.ModelField isChecked = new Ext.Net.ModelField()
{
Name = "isChecked",
Type = Ext.Net.ModelFieldType.Boolean
};
//ADDING THE FIELDS TO THE MODEL
model.Fields.Add(idfield);
model.Fields.Add(title);
model.Fields.Add(isChecked);
//ADDING THE MODEL TO THE STORE
storeIDs.Model.Add(model);
//BUILDING THE OBJECTS
List<object> objectList = new List<object>();
objectList.Add(new { id = 1, title = "mr", isChecked = true });
objectList.Add(new { id = 1, title = "ms", isChecked = false });
objectList.Add(new { id = 1, title = "mrs", isChecked = false });
storeIDs.DataSource = objectList;
storeIDs.DataBind();
//ADDING THE STORE TO THE GRID
grid.Store.Add(storeIDs);
//BUILDING THE COLUMNS
Ext.Net.Column columnId = new Ext.Net.Column()
{
ID = "clnId",
DataIndex = "id",
Hidden = true,
Hideable = false
};
Ext.Net.Column columnTitle = new Ext.Net.Column()
{
ID = "clnTitleExpander",
DataIndex = "title",
Text = "Title",
Flex = 1
};
Ext.Net.CheckColumn columnIsChecked = new Ext.Net.CheckColumn()
{
ID = "clnIsChecked",
Text = "Assign",
DataIndex = "isChecked",
Editable = true,
Width = 100
};
//ADDING THE COLUMNS TO THE GRID'S COLUMN MODEL
grid.ColumnModel.Columns.Add(columnId);
grid.ColumnModel.Columns.Add(columnTitle);
grid.ColumnModel.Columns.Add(columnIsChecked);
//TEXTFIELD IS NEEDED
Ext.Net.TextField hiddenText = new Ext.Net.TextField()
{
ID = "hdnText",
LabelSeparator = " ",
Hidden = true,
Text = id + "|" + name
};
//ADDING THE GRID AND TEXTFIELD TO THE FORMPANEL
formPanelExpanded.Items.Add(grid);
formPanelExpanded.Items.Add(hiddenText);
return formPanelExpanded;
}
</script>
<title></title>
</head>
<body>
<ext:ResourceManager runat="server" ID="resourceManager">
</ext:ResourceManager>
<form runat="server">
<ext:FormPanel Height="570" StyleSpec="text-align:left;" ID="frmPanelGlobal" runat="server"
Layout="ColumnLayout">
<Items>
<ext:FormPanel runat="server" ID="formPanel" Width="600" Height="400">
<Items>
<ext:GridPanel runat="server" ID="gridPanelUser" Width="600" Height="400">
<Store>
<ext:Store runat="server" ID="storeName">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="id" Type="Int" />
<ext:ModelField Name="fullname" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="clnId" runat="server" DataIndex="id" Text="Name" Hidden="true"
Hideable="false" />
<ext:Column ID="clnFullName" runat="server" DataIndex="fullname" Flex="1" Text="Full Name" />
</Columns>
</ColumnModel>
<Plugins>
<ext:RowExpander runat="server" ID="rowExpander">
<Loader ID="Loader1" runat="server" DirectMethod="#{DirectMethods}.GetForm" Mode="Component">
<LoadMask Msg="Loading" ShowMask="true" />
<Params>
<ext:Parameter Name="ID" Value="this.record.data.id" Mode="Raw" />
<ext:Parameter Name="FULLNAME" Value="this.record.data.fullname" Mode="Raw" />
</Params>
</Loader>
</ext:RowExpander>
</Plugins>
</ext:GridPanel>
</Items>
</ext:FormPanel>
</Items>
</ext:FormPanel>
</form>
</body>
</html>Any advice is appreciated.
Last edited by fabricio.murta; Feb 02, 2015 at 12:50 PM.
Reason: [CLOSED]
