How can we extend any Salesforce Component?

To make a component extendable we need to set value of ‘extensible’ attribute as ‘true’ of the aura:component tag.
When a component extends another component it inherits all of the helper methods and attributes

Extending a Lightning Component
When a component extends another component it inherits all of the helper methods and attributes. It also has the ability to call super component controller actions, but don’t do it (more on that later). All event handlers in the super component are inherited by the sub component. Additionally, they can both handle the same event, but the ordering of handler execution is not defined (kind of like multiple Apex triggers on a single object).

When you want to create a component that can be extended you must set a value of true for the extensible attribute of the aura:component. By default, components are not extensible, just like Apex classes are not. As an example, consider a component, objectPanel, that displays some basic information about a Salesforce object in a uniform way, has a section that allows sub components to display a group of records however they wish, and also provides common methods to interact with the database in its helper. Since one of the main features is to show the records and operate on them and the objectPanel does not provide its own list of records, it is defined as abstract by specifying abstract=”true”.

<aura:component extensible=”true” abstract=”true” controller=”ObjectPanelController”>
	<aura:attribute name=”sObjectType” type=”String” required=”true” />
	<aura:attribute name=”maxRows” type=”Integer” default=”20″ />
	<aura:attribute name=”fields” type=”String” />
	<aura:attribute name=”records” type=”Object[]” />
	<aura:attribute name=”sObjectInfo” type=”Object” />
	<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}” />
	<aura:handler event=”aura:waiting” action=”{!c.waiting}” description=”toggles spinner when data begins loading” />
	<aura:handler event=”aura:doneWaiting” action=”{!c.doneWaiting}” description=”toggles spinner when data finishes loading” />

	<h2>{!v.sObjectInfo.Label}</h2>
	<div>{!v.body}</div>
	<div>
		<a onclick=”{!c.navigateToObjectList}”>Visit {!v.sObjectInfo.LabelPlural}</a>
	</div>
</aura:component>

Here is an example of the objectPanel component being extended by the accountPanelcomponent.

<aura:component extends=”c:objectPanel”>
	<aura:attribute name=”showAccountWarning” type=”Boolean” default=”true” />

	<aura:set attribute=”sObjectType” value=”Account” />
	<aura:set attribute=”fields” value=”AccountNumber,Website” />

	<aura:iteration items=”{!v.records}” var=”rec”>
		<div>
			<a onclick=”{!c.deleteRecord}”>Del</a> |
			<a onclick=”{!c.navigateToRecord}”><ui:outputText value=”{!rec.Name}”/></a>
			<ui:outputText value=”{!rec.AccountNumber}” />
			<ui:outputURL value=”{!rec.Website}” />
			<aura:renderIf isTrue=”{!and(v.showAccountWarning, rec.Is_Red__c)}”>
				<span class=”warn”>WARNING: Red Account</span>
			</aura:renderIf>
		</div>
	</aura:iteration>
</aura:component>

The extends attribute is set to the c:objectPanel component to indicate that the accountPanel is a sub component of the c:objectPanel component. Note the “c:” that precedes the objectPanel in the extends attribute. It is the namespace of the component being extended, which in this case is the default namespace. If you were extending a component in a managed package you’d use its namespace.