ExtJS 5.0 양식에 의해 생성/구동되는 양식

Question

Store를 기반으로 ExtJS 5.0에서 양식을 만들고 싶습니다. 모든 상점 항목은 "양식의 줄"을 나타냅니다. "라인"은 세 개 이상의 폼 위젯으로 구성됩니다.

기본적으로 검색 조건을 정의하는 검색 패널입니다. 모든 조건은 FieldName 선택기, 연산자 선택기 및 조건 피연산자를 쓰거나 선택하는 위젯으로 구성됩니다. 조부터 시작

• 이름 : 사람들에 대한 예를 들어, 검색의 1980년 1월 1일 전에
• birtday (이름, 연산자 필드 이름 텍스트 필드 : 위젯부터 시작). (FieldName : 생일, 연산자 : 이전, 위젯 : 날짜 피커)

JSON에서 조건을 얻은 다음 저장소에로드합니다. 이 저장소를 기반으로 양식을 동적으로 생성하고 양식을 수정 한 다음 상점에 새 JSON (새 조건 등)을 요청하고 싶습니다.

첫 번째 단계에 문제가 있습니다. 은 상점 콘텐츠을 기반으로 양식 위젯을 생성합니다.

어떻게이 작업을 수행 할 수 있습니까?

Answer 1

여기서는 JSON 데이터가 다양한 동적 데이터를 나타내며 그리드 또는 고정 된 양식과 같은 사전 미리 준비된 컨트롤을 단순히 사용할 수 없다고 가정합니다.

JSON 콘텐츠를 기반으로 위젯을 동적으로 생성하는 컨테이너 클래스를 만드는 것이 필요합니다. 물론 직접 작성해야합니다.

극단적 인 점은 상점의 JSON 콘텐츠를 유효한 인수 (예 : Ext.widget)로 만드는 것입니다.하지만 실현 가능성이 낮거나 바람직하지는 않습니다.

좀 더 중간 위치를 얻으려면 JSON 데이터를 사용하여 조건에 따라 추가 할 위젯을 결정하십시오.

Ext.define('MyFormContainer', { 
    extend: 'Ext.form.FormPanel', 
    config: { 
    // A store or MixedCollection of JSON data objects, keyable by id. 
    formData: null 
    }, 
    layout: 'vbox', 
    initComponent: function() { 
    this.callParent(arguments); 
    this.getFormData().each(this.addField, this) 
    }, 
    addField: function(fieldData) { 
    var widgetConfig = this.buildWidgetConfig(fieldData); 
    this.add(widgetConfig); 
    }, 
    buildWidgetConfig: function(fieldData) { 
    // The heart of the factory. You need a way to determine what sort of widget to make for 
    // the field. For the example config, a fieldset with three fields would probably be 
    // appropriate: 
    var fieldSet = { xtype: 'fieldset', layout: 'hbox' }; 

    var items = []; 

    items[0] = { xtype: 'textfield', name: fieldData['FieldName'] }; 
    // this would be a link to a custom widget to handle the operator. Or maybe you could 
    // just spit out text, if it's not meant to be alterable. 
    items[1] = { xtype: 'myoperator_' + fieldData['operator'], name: 'operator' }; 
    items[2] = { xtype: fieldData['widget'], name: 'value' } 
    fieldSet.items = items; 
    return fieldSet; 
    } 
}) 

이 간단하고 인위적인 예이지만 (의 누락 등의 빈칸에 작성해야 후에는 필요하고 사용자 정의 연산자 위젯 :

은 대략적인 윤곽, 당신이 뭔가를 원하는) JSON 데이터를 기반으로 양식을 렌더링합니다.

(개인적으로이 접근법을 사용합니다 - 간단한 예제에서 볼 수있는 더 정교함 - 서버 제공 양식 설명을 기반으로 동적 양식을 생성합니다)