component code writing CQ.Ext or ExtJS ?

[sreedobe]

I am trying to write a custom component something like 

Ext.require([ 'Ext.form.field.File', 'Ext.form.Panel', 'Ext.window.MessageBox' ]); Ext.onReady(function(){ var msg = function(title, msg) { Ext.Msg.show({ title: title, msg: msg, minWidth: 200, modal: true, icon: Ext.Msg.INFO, buttons: Ext.Msg.OK }); }; Ext.create('Ext.form.Panel', { renderTo: 'fi-form', width: 500, frame: true, title: 'File Upload Form', bodyPadding: '10 10 0', defaults: { anchor: '100%', allowBlank: false, msgTarget: 'side', labelWidth: 50 }, items: [{ xtype: 'textfield', fieldLabel: 'Name' },{ xtype: 'filefield', id: 'form-file', emptyText: 'Select an image', fieldLabel: 'Photo', name: 'photo-path', buttonText: '', buttonConfig: { iconCls: 'upload-icon' } }], buttons: [{ text: 'Save', handler: function(){ var form = this.up('form').getForm(); if(form.isValid()){ msg('Success'); } } },{ text: 'Reset', handler: function() { this.up('form').getForm().reset(); } }] }); });

How could I write this in CQ js file.

Do I need to import EXTJS library files ? or Can I do using CQ.EXT ?

Thank you,

Sri

[edubey]

Hi Sri,

You can use CQ.EXT, AEM is using EXT JS framework, so there is no need for you to import those library.

Here is Documentation you can use if you need specific details of methods, 

thanks

[smacdonald2008]

To learn how to code against these APIs, see this community article

https://helpx.adobe.com/experience-manager/using/creating-custom-xtype.html

This will get you up and running.

[Ratna_Kumar · Accepted solution]

Hi Sri,

As scott stated for start-up with custom xtype article(https://helpx.adobe.com/experience-manager/using/creating-custom-xtype.html), try to do this multifield custom xtype: https://helpx.adobe.com/experience-manager/using/creating-aem-multifield-components.html

So you will get deep understanding on EXT JS and custom Xtypes.

Thanks,
Ratna Kumar.