[CLOSED] REST with WCF and Ext.NET 1.0

[daneel]

I'm getting to grips with using a RESTful service with Ext.NET and aren't getting much out of the examples and documentation. I've written a very simple service to retrieve a Person from a list based on the index of that person in the list. Here's the service interface as defined in ICandidate.cs, the implementation is defined in Candidate.svc.cs:

[ServiceContract]
    public interface ICandidate
    {
        [OperationContract]
        [WebGet(UriTemplate="/{index}", 
                RequestFormat=WebMessageFormat.Json,
                ResponseFormat=WebMessageFormat.Xml)]
        Person GetPersonByIndex(string index);
    }

I can call the service by browsing to http://somehostname/twa/service/candidate.svc/2 to retrieve the third candidate in the list; to retrieve the 99th candidate I'd browse to http://somehostname/twa/service/candidate.svc/100 and so on.

My problem is that I can't figure out how to do this from a Store:

<ext:Store runat="server" id="StorePerson" AutoLoad="true">
      <Proxy>
        <ext:HttpProxy Json="true" Method="GET" Url="~/Service/Candidate.svc">
          <RestAPI ReadUrl="~/Service/Candidate.svc/{index}" />
        </ext:HttpProxy>
      </Proxy>
      <Reader>
        <ext:JsonReader IDProperty="PersonId" Root="data">
          <Fields>
            <ext:RecordField Name="PersonId" Type="Int"/>
            <ext:RecordField Name="FirstName" />
            <ext:RecordField Name="Surname" />
            <ext:RecordField Name="Initials" />
            <ext:RecordField Name="JobTitle" />
            <ext:RecordField Name="DateOfBirth" Type="Date" DateFormat="M$" />
          </Fields>
        </ext:JsonReader>
      </Reader>
      <Listeners>
        <DataChanged Handler="var rec=this.getAt(0)||{};#{FormPanel1}.getForm().loadRecord(rec);#{FormPanel1}.clearInvalid();" />
        <Load Handler="" />
      </Listeners>
    </ext:Store>
            <ext:FormPanel ID="FormPanel1" runat="server" ButtonAlign="Right" Height="230" Padding="5"
                Title="Candidates (RESTful)" Width="500" LabelSeparator="">
                <Items>
                    <ext:TextField ID="RestFirstName" DataIndex="FirstName" runat="server" AnchorHorizontal="100%" FieldLabel="Name">
                    </ext:TextField>
                    <ext:TextField ID="RestInitials" DataIndex="Initials" runat="server" AnchorHorizontal="100%" FieldLabel="Initials">
                    </ext:TextField>
                    <ext:TextField ID="RestSurname" DataIndex="Surname" runat="server" AnchorHorizontal="100%" FieldLabel="Surname">
                    </ext:TextField>
                    <ext:TextField ID="RestJobTitle" DataIndex="JobTitle" runat="server" AnchorHorizontal="100%" FieldLabel="Job title">
                    </ext:TextField>
                    <ext:DateField ID="RestDOB" DataIndex="DateOfBirth" runat="server" AnchorHorizontal="100%" FieldLabel="Date of birth" >
                    </ext:DateField>
                </Items>
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolbar2" runat="server" StoreID="StoreCandidate" PageSize="1" DisplayInfo="True" LastText="Last record" NextText="Next record" PrevText="Previous record" FirstText="First record" DisplayMsg="Displaying {0} of {2}" BeforePageText="Record">
                    </ext:PagingToolbar>
                </BottomBar>
            </ext:FormPanel>

As you can see, I have a paging toolbar linked to the Store which should call the REST service each time the paging navigation buttons are pressed. But I have no idea how to configure the Store so that the record/item index gets passed to the RESTful service as a parameter in the format http://somehostname/twa/service/candidate.svc/{record-index}

Can anyone help?

[Vladimir]

Hi,

Try to add the following event listener to the store

<BeforeLoad Handler="this.proxy.setUrl('your_url' + options.params.start, true);" />

[daneel]

Thanks Vladimir, I did a bit of further digging around in the api and my markup/code is now this:

    <ext:Store runat="server" id="StoreRestful" AutoLoad="true" Restful="true">
      <BaseParams>
        <ext:Parameter Name="start" Value="={0}" />
      </BaseParams>
      <Proxy>
        <ext:HttpProxy Json="true" Url="~/Service/Candidate.svc">
        </ext:HttpProxy>
      </Proxy>
      <Reader>
        <ext:JsonReader IDProperty="PersonId" Root="Data" TotalProperty="Count" SuccessProperty="Success">
          <Fields>
            <ext:RecordField Name="PersonId" Type="Int"/>
            <ext:RecordField Name="FirstName" />
            <ext:RecordField Name="Surname" />
            <ext:RecordField Name="Initials" />
            <ext:RecordField Name="JobTitle" />
            <ext:RecordField Name="DateOfBirth" Type="Date" DateFormat="M$" />
          </Fields>
        </ext:JsonReader>
      </Reader>
      <Listeners>
        <BeforeLoad Handler="this.proxy.setApi('read','http://lonmw65502.fm.rbsgrp.net/TWA/Service/candidate.svc/' + options.params.start);" />
        <Load Handler="debugger;" />
      </Listeners>
    </ext:Store>
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <ext:Viewport ID="Viewport1" runat="server" Layout="form" StyleSpec="margin:10px">
        <Items>
            <ext:FormPanel ID="FormPanel2" runat="server" ButtonAlign="Right" Height="230" Padding="5"
                Title="Candidates (RESTful)" Width="500" LabelSeparator="">
                <Items>
                    <ext:TextField ID="RestFirstName" DataIndex="FirstName" runat="server" AnchorHorizontal="100%" FieldLabel="Name">
                    </ext:TextField>
                    <ext:TextField ID="RestInitials" DataIndex="Initials" runat="server" AnchorHorizontal="100%" FieldLabel="Initials">
                    </ext:TextField>
                    <ext:TextField ID="RestSurname" DataIndex="Surname" runat="server" AnchorHorizontal="100%" FieldLabel="Surname">
                    </ext:TextField>
                    <ext:TextField ID="RestJobTitle" DataIndex="JobTitle" runat="server" AnchorHorizontal="100%" FieldLabel="Job title">
                    </ext:TextField>
                    <ext:DateField ID="RestDOB" DataIndex="DateOfBirth" runat="server" AnchorHorizontal="100%" FieldLabel="Date of birth" >
                    </ext:DateField>
                </Items>
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolbar2" runat="server" StoreID="StoreRestful" PageSize="1" DisplayInfo="True" LastText="Last record" NextText="Next record" PrevText="Previous record" FirstText="First record" DisplayMsg="Displaying {0} of {2}" BeforePageText="Record">
                    <Listeners>
                    </Listeners>
                    </ext:PagingToolbar>
                </BottomBar>
            </ext:FormPanel>
        </Items>
    </ext:Viewport>

So I'm setting the parameter correctly now in the beforeLoad handler and it seems to work now.

I had hoped that I wouldn't need to set the 'read' URL in the beforeLoad handler and instead thst the framework would be smart enough to be able to substitute the appropriate parameter into the URL via a placeholder string, but it seems that the ExtJS REST implementation isn't that smart (yet).