Cascades Development

[MindOperations]

Hello,

Help QML and Javascript pro's.  So far things work okay, I can get the list to load and collapse but I cant edit the styles of the components.  When I debug it seems to skip the component settings I have.  I used the example code from this Blackberry Dev Blog post to lead me to what I have now.

I have tried several different things and currently have the following runnable code (just not doing what I want):

main.qml

import bb.cascades 1.0

Page {    
    id: homeScreen
    
	//Background container        
	Container {
		objectName: "mind_template_preferences"
		topPadding: 200
		
		//Background 
		background: backgroundPaint.imagePaint            
		attachedObjects: [
		    ImagePaintDefinition {
		        id: backgroundPaint
		        imageSource: "img/editingBG.png"
		        repeatPattern: RepeatPattern.XY
		    }
		]//End Background
	        
	    //Elements
	    Container {
	        ExpandableItem {
	            prefHeader: "Data To Track"
	            prefList: "models/trackData.xml"
	            expandImage: "img/plus.png";
	            collapseImage: "img/minus.png";
	            prefVisible: false
	        }
	        ExpandableItem {
	            prefHeader: "Auto Reports"
	            prefList: "models/trackData.xml"
	            expandImage: "img/plus.png";
	            collapseImage: "img/minus.png";
	            prefVisible: true
	        }
	    }//End Elements
	}//End Background Container
}//End Page

 ExpandableItem.qml

import bb.cascades 1.0

Container {
    property alias prefHeader: btnHeader.text
    property alias prefList: modelSource.source
    property alias prefVisible: xmlBody.visible
    property string collapseImage
    property string expandImage
    onPrefVisibleChanged: {
        if (prefVisible) {
            btnHeader.imageSource = collapseImage;
        } else {
            btnHeader.imageSource = expandImage;
        }
    }
    
    Button {
        id: btnHeader
        text: "default header"
        preferredWidth: maxWidth
        imageSource: collapseImage
        onClicked: {
            if (prefVisible) {
                xmlBody.visible = false;
                btnHeader.imageSource = expandImage;
            } else {
                xmlBody.visible = true;
                btnHeader.imageSource = collapseImage;
            }
        }
    }
    
    ListView {
        id: xmlBody
        dataModel: XmlDataModel {
            id: modelSource
                       source: "model default"}
       //List of Components
       listItemComponents: [  
                               
	       //Component One    
	       ListItemComponent {
	           type: listItem
	           Container {
               Label { text: ListItemData.title
	                   textStyle.color: Color.create("#ff0173ff")}
	           CheckBox {
                checked: false}       
	           }
	       }//End Component One
	       
       ]//End List of Components
    }//End List View
}

 dataTrack.xml

<root>
	<listItem title="Time"/>
	<listItem title="Distance"/>
	<listItem title="Fuel Consumption"/>
		<listItemSub title="Gas"/>
		<listItemSub title="Electricity"/>
</root>

[MindOperations · Accepted solution]

Okay I got it.  Simple boo-boo.  Forgot quotation marks around xml item name.

This was the fix:

	       //Component One    
	       ListItemComponent {
	           type: "listItem"
	           Container {}}