PDA

View Full Version : [CLOSED] DataView with checkboxes



itel
Mar 06, 2013, 3:08 PM
Hello all

I've tried searching for a good example on how to take this example (http://examples2.ext.net/#/DataView/Basic/With_Paging/) and add checkboxes next to each image and then save (server side) which ones were checked.

I started by adding a "selected" model field


<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="selected" Type="String" />
<ext:ModelField Name="name" />
<ext:ModelField Name="url" />
<ext:ModelField Name="size" Type="Int" />
<ext:ModelField Name="lastmod" Type="Date" />
</Fields>
</ext:Model>


Then modified the item template to


<Tpl ID="Tpl1" runat="server">
<Html>
<tpl for=".">
<div class="thumb-wrap" id="{name}">
<div class="thumb">
<img src="{url}" title="{name}"/>
</div>
<span class="x-editable"><input type="checkbox" {selected}/>&nbsp;&nbsp;{shortName}</span>
</div>
</tpl>
<div class="x-clear"></div>
</Html>
</Tpl>


when I populate the dataview's store I set "selected" to "checked" if appropriate.

I then have a save menu item which attempts to save everything



<ext:MenuItem ID="mnuSave" runat="server" Icon="Disk" ToolTip="Saves this test but does not submit it." Text="Save">
<DirectEvents >
<Click OnEvent="mnuSave_Click" Timeout="10000">
<ExtraParams>
<ext:Parameter Name="p_txtControlNumber" Value="#{txtControlNumber}.getValue()" Mode="Raw" />
<ext:Parameter Name="InternalNotesGrid" Value="#{grdInternalNotes}.store.getChangedData()" Mode="Raw" />
<ext:Parameter Name="ReportCommentsGrid" Value="#{grdReportComments}.store.getChangedData()" Mode="Raw" />
<ext:Parameter Name="dvDocuments" Value="#{dvDocuments}.store.getChangedData()" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:MenuItem>


My problem is that I don't get anything changed for dvDocuments. What am I missing?

thanks in advance for the help

Daniil
Mar 06, 2013, 3:45 PM
Hi @itel,

How do you change a record's field? I think you should do that on a checkbox click.

itel
Mar 06, 2013, 6:31 PM
Hi @itel,

How do you change a record's field? I think you should do that on a checkbox click.

Maybe I'm going about this the wrong way. Here is what I have



var docManDocument_OnCheck = function (obj)
{
alert(obj.checked);

App.DocManStore.each(function (record, index) {
if (record.data.ID == obj.value)
{
if (obj.checked)
record.data.Selected = "checked";
else
record.data.Selected = "";
}
});
};



And this is the code in the template as previously stated


<span class="x-editable"><input type="checkbox" {selected} value="{ID}" onchange="docManDocument_OnCheck(this);"/>&nbsp;&nbsp;{shortName}</span>


For completeness, here is the triggering save event


<ext:MenuItem ID="mnuSave" runat="server" Icon="Disk" ToolTip="Saves this test but does not submit it." Text="Save">
<DirectEvents >
<Click OnEvent="mnuSave_Click" Timeout="10000">
<ExtraParams>
<ext:Parameter Name="p_txtControlNumber" Value="#{txtControlNumber}.getValue()" Mode="Raw" />
<ext:Parameter Name="InternalNotesGrid" Value="#{grdInternalNotes}.store.getChangedData()" Mode="Raw" />
<ext:Parameter Name="ReportCommentsGrid" Value="#{grdReportComments}.store.getChangedData()" Mode="Raw" />
<ext:Parameter Name="dvDocuments" Value="#{dvDocuments}.store.getChangedData()" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:MenuItem>



When my direct event is called the "dvDocuments" parameter is "{}". Can you please point me to the right direction?

itel
Mar 06, 2013, 7:30 PM
After a little trial and error I finally got this to work, for some reason the Dirty flag wasn't being set so this did the trick



var docManDocument_OnCheck = function (obj)
{
#{dvDocuments}.store.each(function (record, index) {
if (record.data.ID == obj.value)
{
if (obj.checked)
record.data.Selected = "checked";
else
record.data.Selected = "";
record.setDirty(true);
}
});
};



Thanks for the help and pointing me in the right direction!

Daniil
Mar 07, 2013, 8:16 AM
Yes, setting

record.data.someField = "some value";
doesn't make a record dirty.

You can use the set method.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Model-method-set

Also I see

record.data.Selected
and

<ext:ModelField Name="selected" Type="String" />

The different cases "Selected" and "selected". It must be the same, because JavaScript is a case-sensitive language.

itel
Mar 07, 2013, 12:05 PM
Yes, setting

record.data.someField = "some value";
doesn't make a record dirty.

You can use the set method.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Model-method-set

Also I see

record.data.Selected
and

<ext:ModelField Name="selected" Type="String" />

The different cases "Selected" and "selected". It must be the same, because JavaScript is a case-sensitive language.

Thanks Danil, I had alaready corrected the "selected" name. Thanks for your help