How do you display nested class data from a store in a GridPanel?

[zfreeman]

I have this Store:

<ext:Store ID="StoreStudentSpotlight" runat="server" OnReadData="StudentSpotlightReview_Refresh" PageSize="100" GroupDir="DESC" GroupField="statusCode" OnSubmitData="Store_Submit">
            <Sorters>
                <ext:DataSorter Property="StudentName" Direction="ASC" />
            </Sorters>
            <Model>
                <ext:Model runat="server" IDProperty="StudentSpotlightID">
                    <Fields>
                        <ext:ModelField Name="StudentSpotlightID" />
                        <ext:ModelField Name="StudentEmplid" Mapping="spotlightedStudent.id" /> 
                        <ext:ModelField Name="StudentName" Mapping="spotlightedStudent.fullNameFormatted" />
                        <ext:ModelField Name="StudentMajor" Mapping="spotlightedStudent.major" />
                        <ext:ModelField Name="awardName" />
                        <ext:ModelField Name="statusCode" />
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>

And I have these columns:

                    <ext:Column runat="server" Text="StudentSpotlightID" ID="StudentSpotlightID" DataIndex="StudentSpotlightID" Width="60px" Hidden="true" />
                    <ext:Column runat="server" Text="Major" ID="StudentMajor" DataIndex="StudentMajor" Width="40px" />
                    <ext:Column runat="server" Text="Student" DataIndex="StudentName" Hideable="true" Width="70px" />                                     
                    <ext:Column runat="server" Text="Award" ID="awardName" DataIndex="awardName" Width="65px" />

But when I load the page with the grid on it, it says there are no results and just keeps loading. If I take out the ModelField with the nested values it loads everything else fine. Is there something I'm missing for loading data from a nested class into a store and displaying it?

[zfreeman]

I'm trying to follow the example from the example page (https://examples2.ext.net/#/GridPane...Field_Mapping/) but I'm still having no luck.

I have this in the store:

<ext:ModelField Name="spotlightedStudent" IsComplex="true" />

I have this column:

                    <ext:Column runat="server" Text="spotlightedStudent" DataIndex="spotlightedStudent" Width="70">
                        <Renderer Fn="studentRenderer" />
                    </ext:Column>

And I have this in the parent class:

    public Student spotlightedStudent;

    public StudentSpotlight()
    {
        spotlightedStudent = new Student();
    }

(which is referencing this class):

public class Student
{
    public string lastName { get; set; }
    public string firstName { get; set; }
    public string fullNameFormatted
    {
        get { return lastName + ", " + firstName; }
    }
    public string fullName
    {
        get { return firstName + " " + lastName; }
    }
}

But this javascript always alerts "nothing" so the value is being passed but it is always empty:

    <script type="text/javascript">
        var studentRenderer = function (value) {
            if (!Ext.isEmpty(value)) {
                alert(value);
                return value.firstName;
            }
            alert("nothing");
            return value;
        };
    </script>

What am I missing? I can see that the object is filled if I run this in debug...