의 ExtJS

나는 두 가지 주요 구성 요소가의 ExtJS에서 웹 페이지를 만들려고 해요에서 TreeStore를 새로 고칠 수 없습니다 : (의 ExtJS

형태 (Ext.form.Panel)
패널을 Ext.tree을 .Panel)

양식에 두 번째 패널에 트리를 채워야하는 값이 있어야합니다. 첫 번째 패널의 버튼 핸들러에서 업데이트 된 JSON 객체에 액세스 할 수 있지만 tree.Panel의 디스플레이를 업데이트하는 TreeStore를 새로 고치는 방법을 찾을 수 없습니다.

buttons:[ 
{ 
    text:'Get CCP/Product', 
    handler:function (btn, evt) { 
     dataObject.print(); 
     treeStore.removeAll();   
     dataObject.setData({'expanded':false,'children':[{'text':'Master11','expanded':true,'leaf':false,'children':[{'text':'Child 12','expanded':true,'leaf':false,'children':[{'text':'Child 23','expanded':true,'leaf':false,'children':[{'text':'Child 34','expanded':false,'leaf':false}]}]}]}]}) 
     dataObject.print(); 

    } 
} 
]

그러나 :

Ext.define('TreeServiceData',{ 
    config:{ 
    data : '' 
    },print : function() { 
    console.log("Printing data: ") 
    console.log(this.data.children[0]) 
    } 
}); 
var dataObject = Ext.create('TreeServiceData'); 
dataObject.setData({'expanded':false,'children':[{'text':'Master','expanded':true,'leaf':false,'children':[{'text':'Child 1','expanded':true,'leaf':false,'children':[{'text':'Child 2','expanded':true,'leaf':false,'children':[{'text':'Child 3','expanded':false,'leaf':false}]}]}]}]}) 


Ext.define('TreeStoreData',{ 
    extend: 'Ext.data.TreeStore', 
    model: 'TaskModel', 
    autoLoad: true, 
    autoSync: true, 
    proxy: { 
     type:'memory', 
     reader: { 
      type:'json' 
     } 
    }, 
    root:dataObject.getData() 
}); 

var treeStore = Ext.create('TreeStoreData');

가 지금 업데이트하고 다음과 같습니다 버튼 통화이 treestore의 값을 표시하기 위해 노력하고있어 :

이

내가 지금까지 무엇을 가지고 이 버튼 핸들러에서 나는 항상 "Uncaught TypeError : treeStore.removeAll() 메서드에서 '정의되지 않은 indexOf'메서드를 호출 할 수 없습니다. treestore가이 컨텍스트에서 명확하게 정의됩니다.

질문 1) TreeStore를 새로 고치는 올바른 방법은 무엇입니까?

출처

2013-04-29 maverick

답변 1) 대신

treeStore.removeAll(); 
dataObject.setData(...);

당신이해야 할 : 당신이 생각하는 것처럼 데이터 객체의 데이터를 변경하면 자동으로 저장에 영향을주지 않습니다 것을

dataObject.setData(...); // This won't affect the store 
treeStore.setRootNode(dataObject.getData()); // Actually update the store

참고. ..

출처

2013-05-07 19:04:45 rixo

이 코드는 나를 위해 작동합니다 (ExtJS 4.2.1) 총 트리 패널 노드 새로 고침 예 :

var responseDictObjects = $.ajax({ 
     data: { Id: this.idDictionary }, 
     dataType: "json", 
     type: "POST", 
     cache: false, 
     url: 'http://' + config.domain + '/' + 'api/Dictionaries/GetDictTreeData', 
     async: false 
    }).responseText; 

    responseDictObjects = jQuery.parseJSON(responseDictObjects); 


    while (this.storeDict.getRootNode().firstChild) { 
     this.storeDict.getRootNode().removeChild(this.storeDict.getRootNode().firstChild); 
    } 
    this.storeDict.getRootNode().appendChild(responseDictObjects.Data);

this.storeDict를 상점 참조로 바꾸십시오. 내 경우

 JSON.stringify(responseDictObjects.Data)

반환

"[{"id":8,"text":"kkk","leaf":false,"expanded":true,"children":null},{"id":17,"text":"ttttt","leaf":false,"expanded":true,"children":null},{"id":22,"text":"gggg","leaf":false,"expanded":true,"children":null},{"id":23,"text":"qqq","leaf":false,"expanded":true,"children":null},{"id":24,"text":"fff","leaf":false,"expanded":true,"children":null},{"id":27,"text":"fff","leaf":false,"expanded":true,"children":null},{"id":28,"text":"ggggggggggggggggggg","leaf":false,"expanded":true,"children":null},{"id":31,"text":"ttttttttttt666666666","leaf":false,"expanded":true,"children":null},{"id":32,"text":"ffffffffffffffffffff","leaf":false,"expanded":true,"children":null},{"id":33,"text":"kkkkkkkkkkkkk","leaf":false,"expanded":true,"children":null},{"id":35,"text":"7777777777","leaf":false,"expanded":true,"children":null},{"id":36,"text":"999999999999","leaf":false,"expanded":true,"children":null},{"id":37,"text":"iii","leaf":false,"expanded":true,"children":null}]"

나는와 previosly에 appendChild를 실행 한 후 나타나는 노드를 제거 TreePanel과 또 다른 버그를 발견했다. 그래서 jquery tree plugin (dynatree)을 사용하기 시작했습니다. 빈 패널을 작성하면됩니다. 그리고 이후 내 경우에는 패널, 삽입 트리를 렌더링 : 당신이 원하는 때마다 노드를 새로 고칠 수 있습니다 패널을 렌더링 한 후

that.treePanel = Ext.create('Ext.panel.Panel', { 
     title: 'Records', 
     width: 350, 
     height: 400 
    });

하는 빈 패널을 만들기

var that = this; 

    var responseDictObjects = $.ajax({ 
     data: { Id: this.idDictionary }, 
     dataType: "json", 
     type: "POST", 
     cache: false, 
     url: 'http://' + config.domain + '/' + 'api/Dictionaries/GetDictTreeData', 
     async: false 
    }).responseText; 

    responseDictObjects = jQuery.parseJSON(responseDictObjects); 

    var el = this.treePanel.getId(); 

    if (this.treeDict == null) { 
     this.treeDict = $('#' + el).dynatree({ 
      onActivate: function (node) { 
       that.treeDict.lastSelectedId = node.data.index; 
      }, 
      children: [] 
     }); 
    } 
    this.treeDict.dynatree("getRoot").removeChildren(true); 
    this.treeDict.dynatree("getRoot").addChild(responseDictObjects.Data);

출처

2013-08-18 15:59:42

답변

관련 문제