위젯 사용 및 확장(클래식 UI) using-and-extending-widgets-classic-ui

JavaScript 코드와 스타일 시트를 모두 포함하려면 다음 작업을 수행하십시오.
<ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>
여기서 <category-nameX>은(는) 클라이언트측 라이브러리의 이름입니다.

JavaScript 코드만 포함하려면 다음 작업을 수행하십시오.
<ui:includeClientLib js="<category-name>"/>

노드에 의해 정의됩니다(노드 유형 = cq:Dialog, xtype = [dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog)).

패널(노드 유형 = cq:Widget, xtype = [panel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#panel))이 포함된 tabpanel 위젯(노드 유형 = cq:Widget, xtype = [tabpanel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#tabpanel))을 표시합니다.

패널에 multifield 위젯이 있습니다(노드 유형 = cq:Widget, xtype = [multifield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#multifield)).

multifield 위젯에 사용자 지정 xtype ' ejstcustom'을(를) 기반으로 하는 fieldconfig(노드 유형 = nt:unstructured, xtype = ejstcustom, optionsProvider = Ejst.x3.provideOptions)가 있습니다.

• ' fieldconfig'은(는) [CQ.form.MultiField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.MultiField) 개체의 구성 옵션입니다.

• ' optionsProvider'은(는) ejstcustom 위젯의 구성입니다. 다음에서 exercises.js에 정의된 Ejst.x3.provideOptions 메서드로 설정됩니다.

  /apps/extjstraining/clientlib/js/exercises.js
  두 개의 옵션을 반환합니다.

multifield 노드에 의해 정의된 위치:
/apps/extjstraining/components/customwidgets/multifield

은(는) 다음을 요청하여 json 형식으로 렌더링됩니다.
https://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json

이름이 Ejst.CustomWidget인 JavaScript 개체입니다.

다음 위치의 CustomWidget.js JavaScript 파일에 정의되어 있습니다.
/apps/extjstraining/clientlib/js/CustomWidget.js

[CQ.form.CompositeField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.CompositeField) 위젯을 확장합니다.

에는 hiddenField(Textfield), allowField(ComboBox) 및 otherField(Textfield)의 세 필드가 있습니다.

CQ.Ext.Component#initComponent을(를) 재정의하여 세 개의 필드를 추가합니다.

• allowField은(는) 'select' 형식의 CQ.form.Selection 개체입니다. optionsProvider는 대화 상자에 정의된 CustomWidget의 optionsProvider 구성으로 인스턴스화된 Selection 개체의 구성입니다.
• otherField은(는) CQ.Ext.form.TextField 개체입니다.

CQ.form.CompositeField🔗의 , setValue getValue, 및 getRawValue 메서드를 재정의하여 포맷 CustomWidget의 값을 설정하고 검색합니다.
<allowField value>/<otherField value>, for example: 'Bla1/hello'

자신을 'ejstcustom' xtype으로 등록:
CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);

이름이 Ejst.CustomWidget인 JavaScript 개체입니다.

다음 위치의 CustomBrowseField.js JavaScript 파일에 정의되어 있습니다.
/apps/extjstraining/clientlib/js/CustomBrowseField.js

[CQ.Ext.form.TriggerField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TriggerField)을(를) 확장합니다.

browseWindow(이)라는 찾아보기 창을 정의합니다.

화살표를 클릭할 때 찾아보기 창을 표시하도록 [CQ.Ext.form.TriggerField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TriggerField)#onTriggerClick을(를) 재정의합니다.

CQ.Ext.tree.TreePanel 개체를 정의합니다.

• /bin/wcm/siteadmin/tree.json에 등록된 서블릿을 호출하여 데이터를 가져옵니다.
• 루트는 " apps/extjstraining"입니다.

window 개체( [CQ.Ext.Window](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window))를 정의합니다.

• 사전 정의된 패널을 기반으로 합니다.
• 선택한 경로의 값을 설정하고 패널을 숨기는 OK 단추가 있습니다.

창이 경로 필드 아래에 고정되어 있습니다.

선택한 경로가 검색 필드에서 show 이벤트의 창으로 전달됩니다.

자신을 'ejstbrowse' xtype으로 등록:
CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);

이름이 Ejst.InsertTextPlugin인 JavaScript 개체입니다.

다음 위치의 InsertTextPlugin.js JavaScript 파일에 정의되어 있습니다.
/apps/extjstraining/clientlib/js/InsertTextPlugin.js

[CQ.form.rte.plugins.Plugin](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin) 개체를 확장합니다.

다음 메서드는 [CQ.form.rte.plugins.Plugin](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin) 개체를 정의하고 구현 플러그인에서 재정의됩니다.

• getFeatures()은(는) 플러그인이 사용할 수 있도록 하는 모든 기능의 배열을 반환합니다.
• initializeUI()이(가) 새 단추를 RTE 도구 모음에 추가합니다.
• notifyPluginConfig()은(는) 단추를 가리킬 때 제목과 텍스트를 표시합니다.
• execute()은(는) 단추를 클릭하고 플러그 인 작업을 수행할 때 호출됩니다. 포함할 텍스트를 정의하는 데 사용되는 창을 표시합니다.

insertText()이(가) 해당 대화 상자 개체 Ejst.InsertTextPlugin.Dialog을(를) 사용하여 텍스트를 삽입합니다(이후 참조).

OK 단추를 클릭하면 트리거되는 대화 상자의 apply() 메서드에서 executeInsertText()을(를) 호출합니다.

자신을 'inserttext' 플러그 인으로 등록합니다.
CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);

Ejst.InsertTextPlugin.Dialog 개체는 플러그 인 단추를 클릭할 때 열리는 대화 상자를 정의합니다. 대화 상자는 패널, 양식, 텍스트 필드 및 두 개의 단추(확인 및 취소)로 구성됩니다.

다음에서 정의됩니다.
/apps/extjstraining/components/treeoverview

대화 상자에서 창 크기를 설정하고 창을 고정 또는 고정 해제할 수 있습니다(아래 세부 사항 참조).

페이지에서 트리 창을 검색하여 tree 개체를 정의합니다.

트리를 표시하는 창이 없으면 treePanel(CQ.Ext.tree.TreePanel)이 만들어집니다.

• treePanel에 창을 만드는 데 사용되는 데이터가 있습니다.

• 다음 위치에 등록된 서블릿을 호출하여 데이터를 검색합니다.

  /bin/wcm/siteadmin/tree.json

beforeload 수신기에서 선택한 노드가 로드되었는지 확인합니다.

root 개체는 경로 apps/extjstraining을(를) 트리 루트로 설정합니다.

tree( [CQ.Ext.Window](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window))은(는) 사전 정의된 treePanel을(를) 기반으로 설정되며 다음과 함께 표시됩니다.
tree.show();

창이 있으면 저장소에서 검색한 너비, 높이 및 도킹된 속성에 따라 표시됩니다.

myData은(는) 다섯 개의 열과 네 개의 행으로 이루어진 테이블 형식의 정적 데이터 배열입니다.

store은(는) myData을(를) 사용하는 CQ.Ext.data.Store 개체입니다.

store이(가) 메모리에 로드되었습니다.
store.load();

gridPanel은(는) store을(를) 사용하는 [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel) 개체입니다.

• 열 너비는 항상 재비례합니다.

  forceFit: true

• 한 번에 하나의 행만 선택할 수 있습니다.

  singleSelect:true

reader은(는) 세 개의 열에 대해 json 형식의 서블릿 응답을 읽는 [CQ.Ext.data.JsonReader](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.data.JsonReader) 개체입니다.

cm은(는) 세 개의 열에 대한 [CQ.Ext.grid.ColumnModel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.ColumnModel) 개체입니다.
"Test" 열 셀은 편집기로 정의된 대로 편집할 수 있습니다.
editor: new [CQ.Ext.form.TextField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TextField)({})

열을 정렬할 수 있습니다.
cm.defaultSortable = true;

store은(는) [CQ.Ext.data.GroupingStore](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.data.GroupingStore) 개체입니다.

• 쿼리를 필터링하는 데 사용되는 몇 가지 매개 변수와 함께 " /bin/querybuilder.json"에 등록된 서블릿을 호출하여 해당 데이터를 가져옵니다.
• 미리 정의된 reader을(를) 기반으로 합니다.
• 테이블이 오름차순으로 'jcr:path' 열에 따라 정렬됩니다.

gridPanel은(는) 편집할 수 있는 [CQ.Ext.grid.EditorGridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.EditorGridPanel) 개체입니다.

• 미리 정의된 store 및 열 모델 cm을(를) 기반으로 합니다.

• 한 번에 하나의 행만 선택할 수 있습니다.

  sm: new [CQ.Ext.grid.RowSelectionModel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.RowSelectionModel)({singleSelect:true})

• afteredit 수신자는 "Test" 열의 셀이 편집되었는지 확인합니다.

  • "jcr:path" 열에 정의된 경로에 있는 노드의 속성 'test'이(가) 셀 값으로 저장소에 설정되어 있습니다.
  • POST이 성공하면 값이 store 개체에 추가되고 그렇지 않으면 거부됩니다