PDA

View Full Version : [CLOSED] selectbox in component column



marco.morreale
Feb 13, 2013, 10:28 AM
I want to select a value in a selectBox inside a gridpanel component column.

I try this on the store listeners:



<Load Handler="#{cbMagazzino}.setValue(record.data.MagazzinoDefau lt);" ></Load>


but parser can't resolve the combobox name #{cbMagazzino}.

How can I fix it?
Thanks in advance
Marco

Daniil
Feb 13, 2013, 11:20 AM
Hi Marco,

I am not exactly sure how all is configured on your side. Could you provide a test case, please?

marco.morreale
Feb 13, 2013, 2:33 PM
I almost built a working example but I coud not find a way to create a selectbox with a store.
The problem is that the selectbox is in a componentcolumn and I cannot address it.

In my real page the store uses an AjaxProxy.


Anyway if you look at the Load event of the SelectBox store you will face my problem: #{SelectBox1} is not resolved.




<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">


public static List<object> myList;

protected void Page_Load(object sender, EventArgs e)
{

if (!X.IsAjaxRequest)
{
myList = new List<object>();

for (int i = 1; i < 10; i++)
{
myList.Add(new object[] { i,false, i,i, "Text " + i, DateTime.Now.Date });
}

this.Store1.DataSource = myList;

this.Store1.DataBind();
}
}

protected void btnAddService_Click(object sender, DirectEventArgs e)
{
this.Store1.CommitChanges();

myList.Add(new object[] { 11,false, 11,11, "Text 11", DateTime.Now.Date });

this.Store1.DataSource = myList;

this.Store1.DataBind();
}


</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head runat="server">
<title>ComponentColumn Editor - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>ComponentColumn as Editor</h1>

<ext:GridPanel
runat="server"
Title="ComponentColumn Editor"
Width="600"
Height="300">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="IntField" Type="Int" />
<ext:ModelField Name="BooleanField" Type="Boolean" />
<ext:ModelField Name="ComboField" Type="Int" />
<ext:ModelField Name="ComboField2" Type="Int" />
<ext:ModelField Name="TextField" Type="String" />
<ext:ModelField Name="DateField" Type="Date" />
<ext:ModelField Name="SelectField2" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="ComboField2"
Flex="1"
Text="ComboBox2">
<Component>
<ext:ComboBox runat="server">
<Items>
<ext:ListItem Text="Item 1" Value="1" Mode="Raw" />
<ext:ListItem Text="Item 2" Value="2" Mode="Raw" />
<ext:ListItem Text="Item 3" Value="3" Mode="Raw" />
<ext:ListItem Text="Item 4" Value="4" Mode="Raw" />
<ext:ListItem Text="Item 5" Value="5" Mode="Raw" />
<ext:ListItem Text="Item 6" Value="6" Mode="Raw" />
<ext:ListItem Text="Item 7" Value="7" Mode="Raw" />
<ext:ListItem Text="Item 8" Value="8" Mode="Raw" />
<ext:ListItem Text="Item 9" Value="9" Mode="Raw" />
</Items>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>


<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="IntField"
Flex="1"
Text="Integer">
<Component>
<ext:NumberField runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="BooleanField"
Text="Boolean"
>
<Component>
<ext:Checkbox runat="server" />
</Component>
<Listeners>
<Edit Handler="item.grid.getView().refreshNode(e.rowIdx);" Delay="100" />
</Listeners>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="ComboField"
Flex="1"
Text="ComboBox">
<Component>
<ext:ComboBox runat="server">
<Items>
<ext:ListItem Text="Item 1" Value="1" Mode="Raw" />
<ext:ListItem Text="Item 2" Value="2" Mode="Raw" />
<ext:ListItem Text="Item 3" Value="3" Mode="Raw" />
<ext:ListItem Text="Item 4" Value="4" Mode="Raw" />
<ext:ListItem Text="Item 5" Value="5" Mode="Raw" />
<ext:ListItem Text="Item 6" Value="6" Mode="Raw" />
<ext:ListItem Text="Item 7" Value="7" Mode="Raw" />
<ext:ListItem Text="Item 8" Value="8" Mode="Raw" />
<ext:ListItem Text="Item 9" Value="9" Mode="Raw" />
</Items>
</ext:ComboBox>
</Component>
<Listeners>
<Bind Handler="cmp.setDisabled(!record.data.BooleanField);" />
</Listeners>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="TextField"
Flex="1"
Text="Text">
<Component>
<ext:TextField runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="DateField"
Flex="1"
Text="Date">
<Component>
<ext:DateField runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn runat="server" Editor="true" DataIndex="SelectField2"
Text="SelectBox">
<Component>
<ext:SelectBox ID="SelectBox1" runat="server" DisplayField="state" ValueField="abbr"
EmptyText="Select a state...">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="abbr" />
<ext:ModelField Name="state" />
<ext:ModelField Name="nick" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Load Handler="#{SelectBox1}.setValue(record.data.TextField);" ></Load>
</Listeners>
</ext:Store>
</Store>
</ext:SelectBox>
</Component>
</ext:ComponentColumn>


</Columns>
</ColumnModel>
<Buttons><ext:Button
runat="server"
Text="Aggiungi intervento"
Icon="Add"
OnDirectClick="btnAddService_Click"
>
<DirectEvents>
<Click>
<EventMask Msg="please, wait..." ShowMask="true" UseMsg="true"></EventMask>
</Click>
</DirectEvents>
</ext:Button>
</Buttons>
</ext:GridPanel>
</form>
</body>
</html>

Daniil
Feb 13, 2013, 4:51 PM
Setting up ID for the ComponentColumn's Component doesn't make sense, because a new SelectBox instance is created for each row.

And its ids are unique.

I would handle the ComponentColumn's Bind listener.

<Bind Handler="cmp.getStore().on('load', function () { console.log('load'); });" />

marco.morreale
Feb 13, 2013, 5:23 PM
Thanki you Daniil,
but I am still missing something.

You mean I should replace "console.log('load'); " with my function?

Do you mean:




<Bind Handler="cmp.getStore().on('load', function () { this.setValue(record.data.MagazzinoDefault);" });" />

Daniil
Feb 13, 2013, 5:30 PM
Yes, please try:

<Bind Handler="cmp.getStore().on('load', function () { cmp.setValue(record.data.MagazzinoDefault);" });" />

marco.morreale
Feb 18, 2013, 2:37 PM
Hi Daniil,
I tried and got this error: "store.loading" is null or is not an object

5641

Daniil
Feb 18, 2013, 4:25 PM
Please provide a sample to reproduce.