Flex4.5 Accordion with Checkbox

I have the following code for accordion in Flex 4 with couple of checkboxes inside, since the checkboxes are plenty i made it inside a list so that it can scroll. but when I try to run this code the checkbox only shows as label and no checkbox beside it. what is wrong with my code. please help thank you

<mx:Accordion x="14" y="11" width="200" height="260">
    <s:NavigatorContent width="100%" height="100%" label="Page">
        <s:List x="0" y="0" width="100%" height="100%">
            <s:ArrayCollection id="colPage">
                <s:CheckBox label="View" id="chkView">
                </s:CheckBox>
                <s:CheckBox label="SelectTab" id="chkSelectTab">
                </s:CheckBox>
                <s:CheckBox label="setParentData" id="chkSetParentData">
                </s:CheckBox>
                <s:CheckBox label="setViewData" id="chkSetViewData">
                </s:CheckBox>
                <s:CheckBox label="appendString" id="chkAppendString">
                </s:CheckBox>
                <s:CheckBox label="deleteLastOneCharacter" id="chkDelLastChar">
                </s:CheckBox>
                <s:CheckBox label="clearString" id="chkClrStr">
                </s:CheckBox>
                <s:CheckBox label="calculate" id="chkCalc">
             开发者_运维知识库   </s:CheckBox>
                <s:CheckBox label="resetViewData" id="chkResetVwData">
                </s:CheckBox>
                <s:CheckBox label="popViewController" id="chkPopVwCont">
                </s:CheckBox>
                <s:CheckBox label="popToRootViewController" id="chkPopRootVwCont">
                </s:CheckBox>
                <s:CheckBox label="finishModalView" id="chkFinishModView">
                </s:CheckBox>
.... and many other checkboxes
            </s:ArrayCollection>
        </s:List>
    </s:NavigatorContent>
....and manu other Navigator Content
</mx:Accordion>

Ouf, a lot of problems here with your approach. You need to remove all the checkboxes. Instead, use a custom item renderer, include the checkbox in there (that has binding to the data for label and it's currently selected state) and set the renderer on the list.

Then you just need to set the dataProvider for the list which could be a simple object with {label:'Some Label', selected:false} that is repeated for every 'instance' of checkbox. By using this approach, you will be recycling item renderers, increasing code reuse and performance.