ExtJS에서 빈 양식 필드를 제출하지 마십시오

Question

필드가있는 extjs 양식이 있습니다. 사용자는 각 필드에 데이터를 입력 할 필요가 없으므로 데이터가없는 필드를 제출하지 않으려 고합니다. 실제로 데이터가있는 입력란 만 게시하고 싶습니다. 이것이 가능한가?

Answer 1

양식 제출을 사용하는 대신 url, 메소드 유형 (GET/POST) 및 매개 변수 (및 통화 설명서에서 설명한대로 기타 옵션)를 사용하여 Ext.Ajax.request(...)을 직접 호출하십시오. params를 생성하려면 양식 필드를 반복하고 params에 추가하기 전에 null 값을 확인하십시오.

Answer 2

양식의 beforeaction 이벤트를 사용하는 것이 좋습니다. 이 이벤트를 처리하는 동안 모든 필드를 확인할 수 있습니다. 모든 값이 비어 있으면 그냥 return false;. 다음의 예는 ExtJS4에서 작동하고 ExtJS3에서 작동한다 :

는

myform.on('beforeaction', function(form, action) { 
    if (action.type == 'submit') { 
     var doSubmit = false, vals = form.getValues(); 
     for (var i in vals) 
      if (vals[i] !== '') { 
       doSubmit = true; 
       break; 
      } 
     return doSubmit; 
    } 
}); 

Actualy, 빈 필드를 제출하지 올바른 방법은 행동의 submitEmptyText 설정을 사용하는 것입니다. 하지만 현재 버전 (ExtJS4.0.2a)에서는 작동하지 않습니다.

Answer 3

이 버그는 ExtJS 4.0.7에도 있습니다.

으로 분자 남자는 지적 :

이

Actualy, 빈 필드를 제출하지 올바른 방법 행동의 submitEmptyText의 설정을 사용하는 것입니다. 하지만 현재 버전 (ExtJS4.0.2a)에서는 작동하지 않습니다.

이 버그를 수정하기위한 가능한 해결책 Ext.form.Panel "으로 (우리의 기본적인 형태를 생성하기 위해) (버그 임)"Ext.form.Basic "과의 CreateForm 2 개 함수에 getValues ​​재정의하는 것이다 "확장자는 다음과 같습니다.

Ext.define("My.form.Basic", { 
    alias: "form.mybasic", 
    extend: "Ext.form.Basic", 
    getValues: function(asString, dirtyOnly, includeEmptyText, useDataValues) { 
     var values = {}; 

     this.getFields().each(function(field) { 
      if (!dirtyOnly || field.isDirty()) { 
       var data = field[useDataValues ? "getModelData" : "getSubmitData"](includeEmptyText); 
       if (Ext.isObject(data)) { 
        var isArray = Ext.isArray; 
        Ext.iterate(data, function(name, val) { 
         if (includeEmptyText && val === "") { 
          val = field.emptyText || ""; 
         } 
         if (includeEmptyText || ((!isArray(val) && val !== "") || (isArray(val) && val.length !== 0))) { 
          if (name in values) { 
           var bucket = values[name]; 
           if (!isArray(bucket)) { 
            bucket = values[name] = [bucket]; 
           } 
           if (isArray(val)) { 
            values[name] = bucket.concat(val); 
           } 
           else { 
            bucket.push(val); 
           } 
          } 
          else { 
           values[name] = val; 
          } 
         } 
        }); 
       } 
      } 
     }); 

     if (asString) { 
      values = Ext.Object.toQueryString(values); 
     } 
     return values; 
    } 
}); 

Ext.define("My.form.Panel", { 
    alias: "form.mypanel", 
    extend: "Ext.form.Panel", 
    createForm: function() { 
     return Ext.create("My.form.Basic", this, Ext.applyIf({listeners: {}}, this.initialConfig)); 
    } 
}); 

코드는 ext 소스 코드에서 복사됩니다. 유일한 변화는 각 필드의 반복 내부 : 나는 ... 나중에 결코보다

Answer 4

또 다른 옵션을 더 조금 늦게 모르지만,

if (includeEmptyText || ((!isArray(val) && val !== "") || (isArray(val) && val.length !== 0))) 

구성 요소의를 무시하는 것입니다 : "만약"다음 포장을 도입 getSubmitValue() 메소드를 사용하고이 필드가 비어 있으면 제출 필드에 포함되지 않도록 null을 리턴하십시오.

{ 
    xtype: 'combo', 
    getSubmitValue: function(){ 
     var value = this.getValue(); 
     if(Ext.isEmpty(value)) { 
      return null; 
     } 
     return value; 
    } 
}