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

May 8, 2012May 8, 2012 | Huseyin OZVERENHuseyin OZVEREN | 4 Comments | 6:26 AM

Hello,

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

view source
print?
1var fileName = 'Ext.getCmp('fileNameHiddenFieldID').getValue()+'.doc';
2var myComponentImg1= new Ext.Panel({
3    html: "<a href='file:"+fileName +"'><img src='images/getFile.gif' alt='get File' /></a>"
4});
5Ext.getCmp('containerBottomButtonsID').add(myComponentImg1);
6Ext.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:

view source
print?
01Ext.define('huo.controller.MyController', {
02    extend: 'Ext.app.Controller',
03    [...]
04    ,refs: [
05        // This is a ComponentQuery selector which finds any component on the page and assigns it to the reference in 'ref' parameter. -->
06                  {
07                ref: 'documentDetailsSubPanelViewInCtrl',
08                selector: '#documentDetailsSubPanelViewID'
09          }               
10        ]
11 
12    [...]
13 
14    ,onLaunch: function() {
15        // Load the sub panel
16        var documentDetailsSubPanelViewInCtrl  = this.getDocumentDetailsSubPanelViewInCtrl();
17        loadSubPanel(documentDetailsSubPanelViewInCtrl);
18    }
19    [...]
20}
21 
22function loadSubPanel(documentDetailsSubPanelViewInCtrl){
23 
24    // Show a waiting message box
25    Ext.MessageBox.show({
26        msg: 'processing data ...',
27        title: ' progress title...',
28        progressText: ' sending processing data...',
29        progress: true,
30        closable: false,
31        width:300,
32        wait:true,
33        waitConfig: {interval:200}
34    });
35         
36    // request the server to check if the filled exist
37    Ext.Ajax.request({
38        async  : true,
39        url    : 'document.do?action=handleBuildHtmlDocumentWithOutJSON',
40        method: 'GET',
41        params: {
42            docId:'123' // ID
43        },
44        success: function(request, resp) {
45            // Hide the waiting message box
46            Ext.MessageBox.hide();
47            //Ext.MessageBox.close();
48         
49            var htmlContent = request.responseText;
50            documentDetailsSubPanelViewInCtrl.removeAll();
51            documentDetailsSubPanelViewInCtrl.update(htmlContent);
52            documentDetailsSubPanelViewInCtrl.doLayout();
53         
54        }, failure: function() {
55            // Hide the waiting message box
56            Ext.MessageBox.hide();
57            //Ext.MessageBox.close();
58 
59            Ext.MessageBox.alert(' message title...', ' alert message timeout!!!');
60        }
61    });
62}

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

view source
print?
01success: function(request, resp) {
02    // Hide the waiting message box
03    Ext.MessageBox.hide();
04    //Ext.MessageBox.close();
05         
06    var htmlContent = request.responseText;
07    documentDetailsSubPanelViewInCtrl.removeAll();
08    var newPanel = new Ext.Panel({
09        autoHeight: true,
10        height: '100%',
11        width: '100%',
12        html: htmlContent
13    });
14    documentDetailsSubPanelViewInCtrl.add(newPanel);
15    documentDetailsSubPanelViewInCtrl.doLayout();
16}      

Best regards,

Tags: , , , , , , , ,

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

    Reply

    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:

      view source
      print?
      1var myAhrefLink= new Ext.Panel({
      2    html: "<a href='http://www.javablog.fr'>www.javablog.fr</a>"
      3});
      4Ext.getCmp('myContainerID').add(myComponentImg1);
      5Ext.getCmp('myContainerID').doLayout(); // important

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

      view source
      print?
      1var htmlContent = "<a href='http://www.javablog.fr'>www.javablog.fr</a>"
      2// Remove all content in panel
      3Ext.getCmp('myContainerID').removeAll();
      4// Update or Add
      5Ext.getCmp('myContainerID').update(htmlContent);
      6// Ext.getCmp('myContainerID').add(newPanel);
      7Ext.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

      Reply

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

Related Post

Backup your projectsBackup your projects

Hello again, Here, I expose a simple solution to backup your developments in the remote directory \\YOUR_SERVER_or_EXTERNALDISK\backupWorkspaces\. To do this: – Create file “backup.dat” in your Eclipse workspace ie “R:\java\dev\eclipse_workspaces\default-3.3”: –

Read MoreRead More