You can find the same question on stackoverflow as well, with a slightly different version of my code, following this link:
http://stackoverflow.com/questions/22685689/how-can-i-reload-the-datastore-and-refresh-a-listview
I am struggling with a weird problem, and I can't make it work. Any help is appreciated.
I want to create a component dialog tab which has a panel, and this panel should show a listview which is getting it's content from a Servlet in JSON format.
The listview should be updated every time the user activates the dialog tab. Now, what I could achieve is that the JSON response is returned from the Servlet, but I cannot make the listview updated.
Dialog:
<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="cq:Dialog" helpPath="en/cq/current/wcm/default_components.html#Slideshow" xtype="tabpanel"> <items jcr:primaryType="cq:WidgetCollection"> <imageGallery jcr:primaryType="nt:unstructured" title="Image Gallery" xtype="panel"> <items jcr:primaryType="cq:WidgetCollection">... some items ...</items> </imageGallery> <tab2 jcr:primaryType="cq:Widget" path="/blah/blah/includes/dialog_tab_channels.infinity.json" xtype="cqinclude"/> <tab3 jcr:primaryType="cq:Widget" path="/blah/blah/includes/dialog_tab_reference.infinity.json" xtype="cqinclude"/> <order jcr:primaryType="cq:Widget" title="Order" layout="hbox" pack="center" border="false" xtype="imagereordering"> </order> </items> </jcr:root>
Javascript:
ImageReordering = CQ.Ext.extend(CQ.Ext.Panel, { dataStore : null, listView: null, arrowUp: null, arrowDown: null, constructor: function(config) { config = config || { }; var defaults = { "title":"Order", "layout":"hbox", "pack":"center", "border":false, "columns":1 }; config = CQ.Util.applyDefaults(config, defaults); ImageReordering.superclass.constructor.call(this, config); }, // private dataStoreLoaded : function(store, records, options){ // alert('Successfully loaded'); }, //private activateContent: function(panel) { // alert('My Panel got activated'); var dialog = this.findParentByType('dialog'); var baseUrl = dialog.path; var dataSrcUrl = '/blah/blah/imageGallery?baseURL=' + baseUrl; dataSrcUrl = CQ.HTTP.noCaching(dataSrcUrl); var proxy = new CQ.Ext.data.HttpProxy( { url: dataSrcUrl } ); this.dataStore.proxy = proxy; this.dataStore.reload(); this.doLayout(); }, // overriding CQ.Ext.Component#initComponent initComponent: function() { ImageReordering.superclass.initComponent.call(this); var readerConfig = { root: 'images', fields: [{'name':'title'}] }; var jsonReader = new CQ.Ext.data.JsonReader(readerConfig); this.dataStore = new CQ.Ext.data.Store({ reader: jsonReader }); this.dataStore.on('load', this.dataStoreLoaded); this.listView = new CQ.Ext.list.ListView({ store: this.dataStore, fieldLabel: 'Change order of images', autoShow: true, autoRender: true, multiSelect: false, singleSelect: true, emptyText: 'No images to display', reserveScrollOffset: true, flex: 80, autoScroll: true, columns: [{ header: 'File', width: .5, dataIndex: 'title', tpl: '{title}' }], }); this.add(this.listView); this.arrowUp = { "xtype": "panel", "border": false, "layout": "hbox", "pack": "center", "flex": 10, "items": { "xtype": "button", "iconCls": "cq-multifield-up", "template": new CQ.Ext.Template('<span><button class="x-btn" type="{0}"></button></span>'), "handler": function(){ var results = CQ.Util.eval(CQ.shared.HTTP.post( '/blah/blah/imageGallery', function(options, success, xhr, response) { alert('Arrowup callback called'); }, { baseUrl: "", fileReference: "", title: "", slideIndex: 11, command: "moveUp" })); }, "node": undefined, "record": undefined } }; this.add(this.arrowUp); this.arrowDown = { "xtype": "panel", "border": false, "layout": "hbox", "pack": "center", "flex": 10, "items": { "xtype": "button", "iconCls": "cq-multifield-down", "template": new CQ.Ext.Template('<span><button class="x-btn" type="{0}"></button></span>'), "handler": function(){ var results = CQ.Util.eval(CQ.shared.HTTP.post( '/blah/blah/imageGallery', function(options, success, xhr, response) { alert('Arrowdown callback called'); }, { baseUrl: "", fileReference: "", title: "", slideIndex: 11, command: "moveDown" })); }, "node": undefined, "record": undefined } }; this.add(this.arrowDown); this.on('activate', this.activateContent); }, }); // register xtype CQ.Ext.reg('imagereordering', ImageReordering);JSON response:
{ "images": [ { "url": "/content/dam/ubs/homepage/sections/section_06_b.png", "title": "Tablet", "dam": {} }, { "url": "/content/dam/ubs/homepage/sections/ch/ch_engagement_img_leichtathletik.jpg", "title": "Girls", "dam": {} } ] }So, when I open the dialog and click on the 'Order' tab, then the list view header and the arrow buttons are displayed, but the list view has no content. How can I reload the datastore and display the JSON response in the list view in this case?
