button with absolute position and handler
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
Ext.application({ name : 'Fiddle', launch : function() { Ext.create('Ext.button.Button', { text : 'Ok', renderTo : Ext.getBody(), style : 'position:absolute; left:100px; top:100px;', handler : function() { function getWindowSize() { var d = document, root = d.documentElement, body = d.body; var wid = window.innerWidth || root.clientWidth || body.clientWidth, hi = window.innerHeight || root.clientHeight || body.clientHeight; return [wid, hi] } alert(Ext.getBody().getViewSize().width+','+Ext.getBody().getViewSize().height); // alert(getWindowSize()); /* * // this button will spit out a different number every * time you // click it. // so firstly we must check if * that number is already set: if (this.clickCount) { // * looks like the property is already set, so lets just * add // 1 to // that number and alert the user * this.clickCount++; * * alert('You have clicked the button "' + * this.clickCount + '" times.\n\nTry clicking it * again..'); } else { // if the clickCount property is * not set, we will set it and // alert // the user * this.clickCount = 1; alert('You just clicked the * button for the first time!\n\nTry pressing it * again..'); } * */ }, plugins : 'responsive', responsiveConfig : { // var browserWidth=Ext.getBody().getViewSize().width; // browserWidth<600{style : 'position:absolute; left:50px; top:100px;'} /* * 'browserWidth < 600' : { style : 'position:absolute; * left:50px; top:100px;' }, 'width >= 600' : { style : * 'position:absolute; left:100px; top:100px;' } */ } }); } }); |
Responsive design example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
Ext.application({ name : 'Fiddle', launch : function() { Ext.create('Ext.container.Viewport',{ layout:'border', items:[ { title: 'navigation', xtype: 'panel', region: 'west', header: false, width: 150, layout:{ type: 'vbox', align: 'stretch' }, plugins: 'responsive', responsiveConfig:{ wide:{ layout:{ type: 'box', vertical: true, pack:'start' }, bodyStyle:{'background-color': 'orange'} }, tall:{ layout:{ type: 'box', vertical: false, pack: 'center' }, bodyStyle:{'background-color': 'purple'} } }, items:[ { xtype: 'button', text: 'Section 1' }, { xtype: 'button', text: 'Section 2' } ] }, { title: 'header', xtype: 'container', region: 'north', height: 100, header: false, html: '<h1>Branding, global search, sign in/out</h1>', style:{ 'background-color': 'red' } }, { title: 'contentArea', xtype: 'container', region: 'center', header: false, html: '<h1>Content goes here</h1>', style:{ 'background-color': 'green', color: 'white' } } ] }); } }); |
2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
Ext.application({ name : 'HelloExt', launch : function() { var panel = Ext.create('Ext.panel.Panel', { title : 'Моя панель', width : 600, height : 300, renderTo : document.body, layout : 'border', defaults : { padding : '3' }, plugins : 'responsive', responsiveConfig : { 'width < 400' : { region : 'north' }, 'width >= 400' : { region : 'south' } }, items : [{ xtype : 'panel', region : 'west', title : 'Вложенная первая', html : 'контент контент контент ' }, { xtype : 'panel', region : 'center', title : 'Вложенная вторая', html : 'контент контент контент ' }] }); } }); |