Comment appliquer le javascript plaine à la fenêtre ext

Question

Mon code javascript est un peu comme ce

var myDiv = "<div style="color:#0000FF"> 
       <h3>This is a heading in a div element</h3> 
       <p>This is some text in a div element.</p> 
      </div>"; 

Je voulais appliquer myDiv sur la fenêtre Poste.

Un peu que je suis en train comme ça

Ext.create('Ext.window.Window', { 
    title: 'MyWin', 
    id:'MyWin', 
    height: 600, 
    width: 1000, 
    layout: 'fit', 
    render : function(a,b){ 
     debugger; 
     myDiv 
    } 

}).show(); 


I don't want to put into item. Is there anyway I can achive this. 

Answer 1

La fenêtre a une configuration html.

Vous pouvez définir la configuration avant instanciation:

Ext.create('Ext.window.Window', { 
    html: myDiv 

ou mettre à jour lors de l'exécution throught le poseur:

Ext.create('Ext.window.Window', { 
    listeners:{ 
     afterrender : function(win){ 
      win.setHtml(myDiv); 
     } 
    } 

Answer 2

Il y a trois configs disponibles pour ajouter du contenu à un composant:

1. html - pour ajouter du contenu statique (définit l'intérieur de l'élément HTML.)

2. tpl - pour ajouter du contenu dynamique lorsque les jetons sont remplacés dynamiquement par du contenu.

3. contentEl - pour spécifier un élément existant en tant que contenu d'un composant

Selon votre question, il semble que vous voulez afficher ce contenu dans une fenêtre. Pour cela, utilisez la propriété html comme indiqué dans le code en ligne:

var myDiv = [ 
     "<div style='color:#0000FF'>", 
     "<h3>This is a heading in a div element</h3>", 
     "<p>This is some text in a div element.</p>", 
     "</div>" 
    ]; 

    Ext.create('Ext.window.Window', { 
     title: 'MyWin', 
     id: 'MyWin', 
     height: 200, 
     width: 300, 
     html: myDiv, 
    }).show(); 

Trouver le violon here.

Et si vous voulez montrer un élément existant à l'intérieur de cette fenêtre, vous pouvez utiliser la propriété contentEl comme indiqué ci-dessous:

var myDiv = [ 
       "<div id='mydiv' style='color:#0000FF'>", 
       "<h3>This is a heading in a div element</h3>", 
       "<p>This is some text in a div element.</p>", 
       "</div>" 
      ]; 

      var pnl = Ext.create('Ext.panel.Panel', { 
       height: 300, 
       width: 200, 
       html: myDiv, 
       renderTo: Ext.getBody() 
      }); 

      Ext.create('Ext.window.Window', { 
       title: 'MyWin', 
       id: 'MyWin', 
       height: 200, 
       width: 300, 
       layout: 'fit', 
       contentEl: pnl.getId(), 
      }).show(); 
     } 
    }); 

Here's le violon de travail.

J'espère que cela vous sera utile.