JavaScript DHTML/Ext JS/Button

Материал из Web эксперт
Версия от 07:21, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Add action event listener handler to a button

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var myButton = new Ext.Button({
  text    : "hide me",
  handler : function() {
    myPanel.el.switchOff({
      callback : function() {
        myPanel.el.slideIn.defer(500, myPanel.el, []);
      }
    });
  } 
});
myPanel = new Ext.Panel({
  width    : 200,
  height   : 100,
  title    : "Title me",
  frame    : true,
  renderTo : Ext.getBody(), 
  items    :  myButton 
});
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Add button a window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    
    var doSwitch = function(btn) {
    
        alert("asdf");
    }
    
    var myWin = new Ext.Window({
        x       : 100,
        height  : 200,
        width   : 300,
        layout  : "fit",
        title   : "myWin2",
        buttons : [
            {
                text    : "OK",
                handler : doSwitch
            }
        ]
    });
    
    myWin.show();
        
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Add icon to Button

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<style>
.add24 {
    background-image: url(ext-3.0.0/examples/button/images/add24.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    
    var myButton = new Ext.Button({
      text    : "hide me",
        split: true,
        width:50,
        height:50,
        iconCls: "add24",
        defaultType: "splitbutton",
    
      handler : function() {
        alert("asdf");
      } 
    });
    
    myPanel = new Ext.Panel({
      width    : 200,
      height   : 100,
      title    : "Title me",
      frame    : true,
      renderTo : Ext.getBody(), 
      items    :  myButton 
    });

});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Align bottons: cener

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    var win = new Ext.Window({
        height      : 305,
        width       : 200,
        modal       : true,
        title       : "Rigid window",
        html        : "Unable to move or resize.",
        plain       : true,
        border      : false,
        resizable   : false,
        draggable   : false,
        closable    : false,
        buttonAlign : "center",
        buttons     : [
            {
                text    : "OK",
                handler : function() {
                    win.close();
                }
            }
        ]
    })
    win.show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Align icon along the button bottom

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<style>
.add24 {
    background-image: url(ext-3.0.0/examples/button/images/add24.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    
    var myButton = new Ext.Button({
      text    : "hide me",
        split: true,
        width:50,
        height:50,
        iconAlign: "bottom",
        iconCls: "add24",
        defaultType: "splitbutton",
    
      handler : function() {
        alert("asdf");
      } 
    });
    
    myPanel = new Ext.Panel({
      width    : 200,
      height   : 100,
      title    : "Title me",
      frame    : true,
      renderTo : Ext.getBody(), 
      items    :  myButton 
    });

});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Align icon to right side

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<style>
.add24 {
    background-image: url(ext-3.0.0/examples/button/images/add24.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    
    var myButton = new Ext.Button({
      text    : "hide me",
        split: true,
        width:90,
        height:90,
        iconAlign: "right",
        iconCls: "add24",
        defaultType: "splitbutton",
    
      handler : function() {
        alert("asdf");
      } 
    });
    
    myPanel = new Ext.Panel({
      width    : 400,
      height   : 400,
      title    : "Title me",
      frame    : true,
      renderTo : Ext.getBody(), 
      items    :  myButton 
    });

});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Align icon to top

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<style>
.add24 {
    background-image: url(ext-3.0.0/examples/button/images/add24.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    
    var myButton = new Ext.Button({
      text    : "hide me",
        split: true,
        width:90,
        height:90,
        iconAlign: "top",
        iconCls: "add24",
        defaultType: "splitbutton",
    
      handler : function() {
        alert("asdf");
      } 
    });
    
    myPanel = new Ext.Panel({
      width    : 400,
      height   : 400,
      title    : "Title me",
      frame    : true,
      renderTo : Ext.getBody(), 
      items    :  myButton 
    });

});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Button scale large

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<style>
.add24 {
    background-image: url(ext-3.0.0/examples/button/images/add24.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    
    var myButton = new Ext.Button({
      text    : "hide me",
        scale: "large",
        iconAlign: "top",
        iconCls: "add24",
        defaultType: "splitbutton",
    
      handler : function() {
        alert("asdf");
      } 
    });
    
    myPanel = new Ext.Panel({
      width    : 400,
      height   : 400,
      title    : "Title me",
      frame    : true,
      renderTo : Ext.getBody(), 
      items    :  myButton 
    });

});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Button scale: "medium"

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<style>
.add24 {
    background-image: url(ext-3.0.0/examples/button/images/add24.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    
    var myButton = new Ext.Button({
      text    : "hide me",
        scale: "medium",
        iconAlign: "top",
        iconCls: "add24",
        defaultType: "splitbutton",
    
      handler : function() {
        alert("asdf");
      } 
    });
    
    myPanel = new Ext.Panel({
      width    : 400,
      height   : 400,
      title    : "Title me",
      frame    : true,
      renderTo : Ext.getBody(), 
      items    :  myButton 
    });

});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Button text and handler

  


<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var myButton = new Ext.Button({
  text    : "hide me",
  handler : function() {
    alert("asdf");
  } 
});
myPanel = new Ext.Panel({
  width    : 200,
  height   : 100,
  title    : "Title me",
  frame    : true,
  renderTo : Ext.getBody(), 
  items    :  myButton 
});
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Button with click handler

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function() {
    var btnHandler = function(btn) {
        btn.el.frame();
    }
    
    
    new Ext.Button({
        renderTo : Ext.getBody(),
        text     : "Plain Button",
        handler  : btnHandler
    });
});

</script>
<body>

</body>
</html>



Create a button and add to panel

  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var myButton = new Ext.Button({
  text    : "hide me",
  handler : function() {
    myPanel.el.switchOff({
      callback : function() {
        myPanel.el.slideIn.defer(500, myPanel.el, []);
      }
    });
  } 
});
myPanel = new Ext.Panel({
  width    : 200,
  height   : 100,
  title    : "Title me",
  frame    : true,
  renderTo : Ext.getBody(), 
  items    :  myButton 
});
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Create button with text and handler

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
        
    var myBtnHandler = function(btn) {
        Ext.MessageBox.alert("You Clicked", btn.text);
    }
    
    var fileBtn =  new Ext.Button({
        text    : "File",
        handler : myBtnHandler
    });
    var editBtn = new Ext.Button({
        text    : "Edit",
        handler : myBtnHandler
    });
    
    
    var myTopToolbar = new Ext.Toolbar({
        items : [ 
            fileBtn,
            editBtn
        ]
    });
    
    var myPanel = new Ext.Panel({
        width       : 600,
        height      : 650,
        title       : "Ext Panels rock!",
        collapsible : true,
        renderTo    : Ext.getBody(),
        tbar        : myTopToolbar,
        html        : "My first Toolbar Panel!"
    });
        
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Define button action in a separate function

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    
    var doSwitch = function(btn) {
    
        alert("asdf");
    }
    
    var myWin = new Ext.Window({
        x       : 100,
        height  : 200,
        width   : 300,
        layout  : "fit",
        title   : "myWin2",
        buttons : [
            {
                text    : "OK",
                handler : doSwitch
            }
        ]
    });
    
    myWin.show();
        
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Disable a button after clicking

  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    
    var doSwitch = function(btn) {
    
        btn.disable();
    }
    
    var myWin = new Ext.Window({
        x       : 100,
        height  : 200,
        width   : 300,
        layout  : "fit",
        title   : "myWin2",
        buttons : [
            {
                text    : "OK",
                handler : doSwitch
            }
        ]
    });
    
    myWin.show();
        
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Get button text from button object

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
        
    var myBtnHandler = function(btn) {
        Ext.MessageBox.alert("You Clicked", btn.text);
    }
    
    var fileBtn =  new Ext.Button({
        text    : "File",
        handler : myBtnHandler
    });
    var editBtn = new Ext.Button({
        text    : "Edit",
        handler : myBtnHandler
    });
    
    
    var myTopToolbar = new Ext.Toolbar({
        items : [ 
            fileBtn,
            editBtn
        ]
    });
    
    var myPanel = new Ext.Panel({
        width       : 600,
        height      : 650,
        title       : "Ext Panels rock!",
        collapsible : true,
        renderTo    : Ext.getBody(),
        tbar        : myTopToolbar,
        html        : "My first Toolbar Panel!"
    });
        
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Icon align bottom

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function() {
    var btnHandler = function(btn) {
       alert("clicked");
    }
    var menuItems = [
        {
            text    : "Add",
        },
        {
            text    : "Remove",
        }
    ];

    new Ext.Button({
        renderTo  : Ext.getBody(),
        iconCls   : "icon-add",
        text      : "iconAlign : "left"",
        arrowAlign : "bottom",
        iconAlign : "bottom",
        handler   : btnHandler,
        menu      : menuItems
    });
});

</script>
<body>

</body>
</html>



Icon align left

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function() {
    var btnHandler = function(btn) {
       alert("clicked");
    }
    var menuItems = [
        {
            text    : "Add",
        },
        {
            text    : "Remove",
        }
    ];

    new Ext.Button({
        renderTo  : Ext.getBody(),
        iconCls   : "icon-add",
        text      : "iconAlign : "left"",
        arrowAlign : "bottom",
        iconAlign : "left",
        handler   : btnHandler,
        menu      : menuItems
    });
});

</script>
<body>

</body>
</html>



Icon align right

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function() {
    var btnHandler = function(btn) {
       alert("clicked");
    }
    var menuItems = [
        {
            text    : "Add",
        },
        {
            text    : "Remove",
        }
    ];

    new Ext.Button({
        renderTo  : Ext.getBody(),
        iconCls   : "icon-add",
        text      : "iconAlign : "left"",
        arrowAlign : "bottom",
        iconAlign : "right",
        handler   : btnHandler,
        menu      : menuItems
    });
});

</script>
<body>

</body>
</html>



Icon align top

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function() {
    var btnHandler = function(btn) {
       alert("clicked");
    }
    var menuItems = [
        {
            text    : "Add",
        },
        {
            text    : "Remove",
        }
    ];

    new Ext.Button({
        renderTo  : Ext.getBody(),
        iconCls   : "icon-add",
        text      : "iconAlign : "left"",
        arrowAlign : "bottom",
        iconAlign : "top",
        handler   : btnHandler,
        menu      : menuItems
    });
});

</script>
<body>

</body>
</html>



Inline function along with buttons

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    Ext.QuickTips.init();
    
    var htmlEditor = {
      xtype          : "htmleditor",
      fieldLabel     : "",
      anchor         : "100% 100%",
      allowBlank     : false,
      validateValue  : function() {
        var val = this.getRawValue();  
        return  false;
      }
    }
    var f = {
      xtype      : "form",
      labelWidth : -20,
      items      : htmlEditor,
      border     : false
    }
    new Ext.Window({
      title      : "",
      layout     : "fit",
      height     : 300,
      width      : 600,
      items      : f,
      buttons    : [
        {
          text : "Is the html editor valid??",
          handler : function() {
            var isValid = Ext.getCmp("ext-comp-1003").form.isValid();
            var msg = (isValid) ? "valid" : "invalid";
            Ext.MessageBox.alert("Title", "The HTML Editor is " + msg);
          }
        }
      
      ]
    }).show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Set width and height for button

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<style>
.add24 {
    background-image: url(ext-3.0.0/examples/button/images/add24.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    
    var myButton = new Ext.Button({
      text    : "hide me",
        split: true,
        width:50,
        height:50,
        iconCls: "add24",
        defaultType: "splitbutton",
    
      handler : function() {
        alert("asdf");
      } 
    });
    
    myPanel = new Ext.Panel({
      width    : 200,
      height   : 100,
      title    : "Title me",
      frame    : true,
      renderTo : Ext.getBody(), 
      items    :  myButton 
    });

});
</script> 
<div id="div1">asdf</div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Button&oldid=2407»