JavaBlog.fr / Java.lu DEVELOPMENT,Sencha,WEB Sencha/ExtJs: Adding items/Updating content in a panel dynamically

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,

4 thoughts on “Sencha/ExtJs: Adding items/Updating content in a panel dynamically”

  1. Hi Huseyin,

    This really interested.

    Can you maybe share a working example on this and send it by e-mail to me?
    I want to see the base app setup of this.

    Thanks,

    Anibal

    1. Hi Anibal,

      Thanks for your message.

      First, below an example (first part of this post) of the adding of HTML code (hyperlink) to a panel:

      var myAhrefLink= new Ext.Panel({
      	html: "<a href='http://www.javablog.fr'>www.javablog.fr</a>"
      });
      Ext.getCmp('myContainerID').add(myComponentImg1);
      Ext.getCmp('myContainerID').doLayout(); // important
      

      An example of updating of content in a panel on the fly, could be (second part of this post):

      var htmlContent = "<a href='http://www.javablog.fr'>www.javablog.fr</a>"
      // Remove all content in panel
      Ext.getCmp('myContainerID').removeAll(); 
      // Update or Add
      Ext.getCmp('myContainerID').update(htmlContent);
      // Ext.getCmp('myContainerID').add(newPanel);
      Ext.getCmp('myContainerID').doLayout(); // Important
      

      I will post a more concrete example on my blog as soon as possible.
      However, the visitors of this site could participate to this topic.
      Note: you don’t need to have an account to post comment.

      Huseyin OZVEREN

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

Related Post