Sencha/ExtJs: Adding items/Updating content in a panel dynamically

Hello,

Below, a simple example to add items to a panel dynamicaly in runtime in Sencha Framework:

var fileName = 'Ext.getCmp('fileNameHiddenFieldID').getValue()+'.doc';
var myComponentImg1= new Ext.Panel({
	html: "<a href='file:"+fileName +"'><img src='images/getFile.gif' alt='get File' /></a>"
});
Ext.getCmp('containerBottomButtonsID').add(myComponentImg1);
Ext.getCmp('containerBottomButtonsID').doLayout(); // important

Notes: The component ‘containerBottomButtonsID’ must have its layout (panel, container..).

For the updating of content in a panel on the fly, a simple example after an ajax request:

Ext.define('huo.controller.MyController', {
	extend: 'Ext.app.Controller',
	[...]
	,refs: [
       	// This is a ComponentQuery selector which finds any component on the page and assigns it to the reference in 'ref' parameter. -->
        	      {
	         	ref: 'documentDetailsSubPanelViewInCtrl',
            	selector: '#documentDetailsSubPanelViewID' 
	      }                
    	]

	[...]

	,onLaunch: function() {
		// Load the sub panel
		var documentDetailsSubPanelViewInCtrl  = this.getDocumentDetailsSubPanelViewInCtrl();
		loadSubPanel(documentDetailsSubPanelViewInCtrl);
	}
	[...]
}

function loadSubPanel(documentDetailsSubPanelViewInCtrl){

	// Show a waiting message box
	Ext.MessageBox.show({
		msg: 'processing data ...',
		title: ' progress title...',
		progressText: ' sending processing data...',
		progress: true,
		closable: false,
	   	width:300,
	   	wait:true,
	   	waitConfig: {interval:200}
	});
		
	// request the server to check if the filled exist
	Ext.Ajax.request({
		async  : true,
		url    : 'document.do?action=handleBuildHtmlDocumentWithOutJSON',
		method: 'GET',
		params: {
			docId:'123' // ID
		},
		success: function(request, resp) {
			// Hide the waiting message box
			Ext.MessageBox.hide();
			//Ext.MessageBox.close();
		
			var htmlContent = request.responseText;
			documentDetailsSubPanelViewInCtrl.removeAll(); 
			documentDetailsSubPanelViewInCtrl.update(htmlContent);
			documentDetailsSubPanelViewInCtrl.doLayout(); 
		
		}, failure: function() {
			// Hide the waiting message box
			Ext.MessageBox.hide();
			//Ext.MessageBox.close();

			Ext.MessageBox.alert(' message title...', ' alert message timeout!!!');
		}
	});
}

In the previous example, we could replace the updating by adding item in the success callback like:

success: function(request, resp) {
	// Hide the waiting message box
	Ext.MessageBox.hide();
	//Ext.MessageBox.close();
		
	var htmlContent = request.responseText;
	documentDetailsSubPanelViewInCtrl.removeAll(); 
	var newPanel = new Ext.Panel({
		autoHeight: true,
		height: '100%',
		width: '100%',
		html: htmlContent
	});
	documentDetailsSubPanelViewInCtrl.add(newPanel);
	documentDetailsSubPanelViewInCtrl.doLayout(); 
}		

Best regards,