Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

component code writing CQ.Ext or ExtJS ?

Avatar

Level 4

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

1 Accepted Solution

Avatar

Correct answer by
Level 10

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.

View solution in original post

3 Replies

Avatar

Level 10

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

Avatar

Level 10

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.

Avatar

Correct answer by
Level 10

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.