javascript - Why does this ExtJS code get the error "this.el is null"? -
i want able click button , execute extjs code testing, extjs code gives me error this.el null
. what have code work?
main.js:
ext.onready(function() { var button = new ext.button('button-div', { text: 'hello', handler: function() { alert('pressed'); } }); viewport = new ext.viewport({ layout: 'border', items: [ button ] }); viewport.dolayout(); });
html:
<!doctype html> <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-debug.js"> </script> <script type="text/javascript" src="js/main.js"></script> </head> <body> </body> </html>
working code:
thanks pointer @mchl, works code:
ext.onready(function() { var button = new ext.button({ text: "click this", handler: function() { alert('pressed'); } }); var regioncontent = new ext.panel({ region: 'center', padding:'10', autoscroll: true, items: [ button ] }); viewport = new ext.viewport({ layout: 'border', items: [ regioncontent ] }); viewport.dolayout(); });
you're using layout: 'border'
makes viewport use ext.layout.borderlayout
. in documentation layout you'll find note:
- any container using borderlayout must have child item
region:'center'
. child item in center region resized fill remaining space not used other regions in layout.
Comments
Post a Comment