var childDef = pz.define('my-child-component', { ownerType: 'component', template: '<div>My first child Component!</div>', renderTo: 'root', style: 'color: red' // other configs }); pz.define('my-component', { ownerType: 'component', // autoLoad: true, --- If we uncomment this line, load method invocation is not required. The component will load it self upon creation. template: '<div>My first Component!</div>', renderTo: 'body' // If we uncomment the components array, we do not need to add the child component dynamically. It will be added upon the parent component creation. // Also, declarative approach can be used in case when we have our component stored globally, otherwise, components array should contain the actual definitions. /*components: [{ type: 'my-child-component' }]*/ // other configs }).create().load(); // Create method invocation is not a requirement here. We use it only in case when we want to create a component immediately after defining it. // We can create the component later by doing the following: // var componentDef = pz.getDefinitionOf('my-component'); // componentDef.create().load(); var myComp = pz.getInstanceOf('my-component'); // in case when we have our definition stored globally, we can use a declarative approach: myComp.addChild({ type: 'my-child-component' // other configs }); // otherwise, we must use the actual definition as a parameter: // myComp.addChild(childDef);