Dynamic Window in ExtJS

September 11th, 2010 by aditia rahman / No Comments  

     

Sometimes we need to show a dynamic information on the pop up windows like alert, warning, notification or something else. In Extjs we can use window component to show this pop up feature, but this simple code is my little idea to creating dynamic window in Extjs, let get straight to the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>

    <script type="text/javascript">
    Ext.onReady(function(){
      var win = new Array();
      var button = Ext.get('show-windows');
      var counter = 0;

      button.on('click', function(){
        win[counter] = new Ext.Window({
          id: 'win' + counter,
          title: 'windows ' + counter,
          pageX: 100 + (counter * 20),
          pageY: 100 + (counter * 20),
          width: 500,
          height: 200,
          plain: true,
          buttons: [{
            id: 'btn' + counter,
            text: 'Close',
            handler: function() {
              var index = this.id.replace('btn', '');
              win[index].hide();
            }
          }]}).show();
        counter = counter + 1;
      });
    });
    </script>
    <title>Extjs Dynamic Windows</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <br/><br/>
    <p align="center">
      <input type="button" id="show-windows" value="Show Windows" />
    </p>
    <div id="container"></div>
  </body>
</html>

Actually I modified the code from the original window hello world example, the idea is to create the component as an array so you can accessing the component using the index of the array, for example to hide the window it self, and to create the dynamic position too, but you can modified it to met your need.

        submit to reddit Delicious

No Comment Leave a Comment Subscribe RSS

Leave a Comment