How to use initComponent method in Playwright Internal

Best JavaScript code snippet using playwright-internal

oreilly-all-debug.js

Source:oreilly-all-debug.js Github

copy

Full Screen

1Ext.ns('oreilly', 'oreilly.views');2Ext.setup({3 statusBarStyle: 'black',4 onReady: function() {5 oreilly.App = new oreilly.App({6 title: 'Web 2.0 Summit 2010',7 shortUrl: 'web2010',8 9 twitterSearch: '#w2s',10 11 gmapLink: 'http://maps.google.com/maps?client=safari&oe=UTF-8&ie=UTF8&q=palace+hotel+san+francisco&fb=1&gl=us&hq=palace+hotel&hnear=San+Francisco,+CA&hl=en&view=map&cid=18345345755033299855&ved=0CI4BEKUG&ei=etTTTIuXBqj8iwPTmOCDDA&ll=37.788115,-122.402222&spn=0.009818,0.016673&z=16',12 gmapText: 'The Palace Hotel<br /><small>2 New Montgomery Street<br />San Francisco, CA 94105<br />(415) 512-1111</small>',13 gmapCoords: [37.788115, -122.402222],14 15 aboutPages: [{16 title: 'Overview',17 card: {18 xtype: 'htmlpage',19 url: 'about.html'20 }21 }, {22 title: 'Sponsors',23 card: {24 xtype: 'htmlpage',25 url: 'sponsors.html'26 }27 }, {28 title: 'Credits',29 card: {30 xtype: 'htmlpage',31 url: 'credits.html'32 }33 }, {34 title: 'Videos',35 card: {36 xtype: 'videolist',37 playlist_id: 'F664D8C553A57C93',38 hideText: 'Web 2.0 Summit 09'39 }40 }]41 });42 }43});44Ext.regModel('Proposal', {45 hasMany: {46 model: 'Speaker',47 name: 'speakers'48 },49 fields: ['id', 'title', 'url', 'description', 'day', 'time', 'end_time', 'pretty_time', 'date', 'topics', 'room', 'proposal_type']50});51Ext.regModel('Speaker', {52 hasMany: {53 model: 'Proposal',54 name: 'proposals'55 },56 fields: ['id', 'first_name', 'last_name', 'name', 'position', 'affiliation', 'bio', 'twitter', 'url', 'photo']57});58Ext.regModel('OfflineData', {59 fields: ['id', 'feedname', 'json'],60 proxy: {type: 'localstorage', id: 'oreillyproxy'}61});62Ext.regModel('Video', {63 fields: ['id', 'author', 'video']64});65Ext.regModel('Tweet', {66 fields: ['id', 'text', 'to_user_id', 'from_user', 'created_at', 'profile_image_url']67});68oreilly.cfg = {};69oreilly.OfflineStore = new Ext.data.Store({70 model: 'OfflineData',71 autoLoad: true72});73oreilly.SpeakerStore = new Ext.data.Store({74 model: 'Speaker',75 76 getGroupString: function(r){77 return r.get('last_name')[0]78 }79});80oreilly.App = Ext.extend(Ext.TabPanel, {81 82 fullscreen: true,83 84 tabBar: {85 ui: 'gray',86 dock: 'bottom',87 layout: { pack: 'center' }88 },89 90 cardSwitchAnimation: false,91 92 initComponent: function() {93 if (navigator.onLine) {94 this.items = [{95 xtype: 'sessionlist',96 iconCls: 'time',97 title: 'Sessions',98 confTitle: this.title,99 shortUrl: this.shortUrl100 }, {101 title: 'Speakers',102 iconCls: 'team1',103 xtype: 'speakerlist'104 }, {105 title: 'Tweets',106 iconCls: 'chat',107 xtype: 'tweetlist',108 hashtag: this.twitterSearch109 }, {110 title: 'Location',111 iconCls: 'locate',112 xtype: 'location',113 coords: this.gmapCoords,114 mapText: this.gmapText,115 permLink: this.gmapLink,116 }, {117 title: 'About',118 xtype: 'aboutlist',119 iconCls: 'info',120 pages: this.aboutPages121 }];122 } else {123 this.on('render', function(){124 this.el.mask('No internet connection.');125 }, this);126 }127 128 oreilly.cfg = {};129 oreilly.cfg.shortUrl = this.shortUrl;130 oreilly.cfg.title = this.title;131 132 oreilly.App.superclass.initComponent.call(this);133 }134 135});136oreilly.views.SessionList = Ext.extend(Ext.Panel, {137 layout: 'card',138 groupByDay: true,139 hasInitializedDate: false,140 startDateIndex: 0,141 initComponent: function() {142 143 this.list = new Ext.List({144 grouped: true,145 itemTpl: '<span class="name">{title}</span> <span class="secondary">{room}</span>',146 loadingText: false,147 store: new Ext.data.Store({148 model: 'Proposal',149 sorters: 'time',150 getGroupString: function(r){151 return r.get('pretty_time');152 },153 proxy: {154 type: 'scripttag',155 url : 'https://en.oreilly.com/' + this.shortUrl + '/public/mobile_app/all',156 reader: {157 type: 'json',158 root: 'proposals'159 }160 },161 listeners: {162 load: { fn: this.initializeData, scope: this }163 }164 })165 });166 167 this.list.on('selectionchange', this.onSelect, this);168 169 this.list.on('render', function(){170 this.list.store.load();171 this.list.el.mask('<span class="top"></span><span class="right"></span><span class="bottom"></span><span class="left"></span>', 'x-spinner', false);172 }, this);173 174 this.listpanel = new Ext.Panel({175 items: this.list,176 layout: 'fit',177 dockedItems: [{178 xtype: 'toolbar',179 title: this.confTitle180 }],181 listeners: {182 activate: { fn: function(){183 this.list.getSelectionModel().deselectAll();184 }, scope: this }185 }186 })187 188 this.items = this.listpanel;189 190 this.on('activate', this.checkActiveDate, this);191 192 oreilly.views.SessionList.superclass.initComponent.call(this);193 },194 195 checkActiveDate: function(){196 if (!this.hasInitializedDate && this.dateButtons) {197 var currentTime = new Date(),198 month = currentTime.getMonth() + 1,199 day = currentTime.getDate(),200 year = currentTime.getFullYear();201 202 var dateIndex = this.dateButtons.items.findIndex('dateData', month+'/'+day+'/'+year);203 204 if (dateIndex !== -1) this.startDateIndex = dateIndex;205 206 this.dateButtons.setPressed(this.startDateIndex);207 this.changeDate(this.dateButtons.items.getAt(this.startDateIndex));208 this.doComponentLayout();209 this.hasInitializedDate = true;210 }211 },212 213 initializeData: function(data) {214 // First fill the sessions to the speaker store215 var speakers = [],216 length = data.data.items.length,217 proposal, i;218 219 for (i = 0; i < length; i++) {220 proposal = data.data.items[i];221 222 proposal.speakers().each(function(speaker) {223 speaker.proposals().add(proposal);224 speakers.push(speaker);225 });226 }227 oreilly.SpeakerStore.add.apply(oreilly.SpeakerStore, speakers);228 oreilly.SpeakerStore.sort('last_name');229 if (this.groupByDay) {230 231 // Gather dates, create a splitbutton around them232 var dates = data.collect('date'),233 buttons = [],234 length = dates.length,235 i;236 for (i = 0; i < length; i++) {237 buttons.push({238 text: dates[i].substr(0, 5),239 dateData: dates[i],240 index: i,241 scope: this,242 handler: this.changeDate243 });244 }245 246 this.dateButtons = new Ext.SegmentedButton({247 items: buttons,248 defaults: { flex: 1 },249 style: 'width: 100%'250 });251 252 this.listpanel.addDocked({253 xtype: 'toolbar',254 ui: 'gray',255 items: this.dateButtons,256 layout: { pack: 'center' }257 });258 259 // Take off the spinner260 this.list.el.unmask();261 262 if (this.listpanel.isVisible()) {263 this.checkActiveDate();264 }265 }266 },267 268 changeDate: function(btn) {269 this.list.store.clearFilter();270 this.list.store.filter('date', btn.dateData);271 this.list.scroller.scrollTo({y: 0}, false);272 },273 274 onSelect: function(selectionmodel, records){275 if (records[0] !== undefined) {276 var sessionCard = new oreilly.views.SessionDetail({277 prevCard: this.listpanel,278 record: records[0]279 });280 // Tell the parent panel to animate to the new card281 this.setActiveItem(sessionCard, 'slide');282 }283 }284});285Ext.reg('sessionlist', oreilly.views.SessionList);286oreilly.views.SpeakerList = Ext.extend(Ext.Panel, {287 layout: 'card',288 289 initComponent: function() {290 291 this.list = new Ext.List({292 grouped: true,293 indexBar: true,294 itemTpl: '<div class="avatar"<tpl if="photo"> style="background-image: url({photo})"</tpl>></div><span class="name">{name}<tpl if="position || affiliation"><br /><span class="tertiary">{position}<tpl if="affiliation">, {affiliation}</tpl></span></tpl></span>',295 store: oreilly.SpeakerStore,296 listeners: {297 selectionchange: {fn: this.onSelect, scope: this}298 }299 });300 301 this.listpanel = new Ext.Panel({302 layout: 'fit',303 items: this.list,304 dockedItems: [{305 xtype: 'toolbar',306 title: 'Speakers'307 }],308 listeners: {309 activate: { fn: function(){310 this.list.getSelectionModel().deselectAll();311 }, scope: this }312 }313 });314 315 this.items = this.listpanel;316 317 oreilly.views.SpeakerList.superclass.initComponent.call(this);318 },319 320 onSelect: function(sel, records){321 if (records[0] !== undefined) {322 323 var bioCard = new oreilly.views.SpeakerDetail({324 prevCard: this.listpanel,325 record: records[0]326 });327 328 this.setActiveItem(bioCard, 'slide');329 }330 }331});332Ext.reg('speakerlist', oreilly.views.SpeakerList);333oreilly.views.HtmlPage = Ext.extend(Ext.Panel, {334 autoLoad: 'about.html',335 scroll: 'vertical',336 styleHtmlContent: true,337 initComponent: function(){338 339 var toolbarBase = {340 xtype: 'toolbar',341 title: this.title342 };343 344 if (this.prevCard !== undefined) {345 toolbarBase.items = {346 ui: 'back',347 text: this.prevCard.title,348 scope: this,349 handler: function(){350 this.ownerCt.setActiveItem(this.prevCard, { type: 'slide', reverse: true });351 }352 }353 }354 355 this.dockedItems = toolbarBase;356 357 Ext.Ajax.request({358 url: this.url,359 success: function(rs){360 this.update(rs.responseText);361 },362 scope: this363 });364 oreilly.views.HtmlPage.superclass.initComponent.call(this);365 }366});367Ext.reg('htmlpage', oreilly.views.HtmlPage);368oreilly.views.SpeakerDetail = Ext.extend(Ext.Panel, {369 scroll: 'vertical',370 showSessionData: true,371 initComponent: function(){372 this.dockedItems = [{373 xtype: 'toolbar',374 title: this.record.data.name,375 items: [{376 ui: 'back',377 text: 'Back',378 scope: this,379 handler: function(){380 this.ownerCt.setActiveItem(this.prevCard, {381 type: 'slide',382 reverse: true,383 scope: this,384 after: function(){385 this.destroy();386 }387 });388 }389 }]390 }];391 392 this.items = [{393 styleHtmlContent: true,394 tpl: new Ext.XTemplate( '<div class="bio_overview"><div class="avatar"<tpl if="photo"> style="background-image: url({photo})"</tpl>></div><h3>{name}</h3><h4>{position}, {affiliation}</h4></div> {bio}'),395 data: this.record.data396 }];397 398 if (this.record.proposalsStore && this.showSessionData) {399 this.sessionList = new Ext.List({400 singleSelect: true,401 itemTpl: '<span class="name">{title}</span><span class="secondary">{room}</span>',402 store: this.record.proposals(),403 scroll: false,404 autoHeight: true,405 style: 'width: 100%;'406 });407 this.sessionList.on('selectionchange', this.viewSession, this)408 this.items.push({409 xtype: 'toolbar',410 title: 'Sessions',411 ui: 'gray',412 cls: 'small_title'413 });414 this.items.push(this.sessionList);415 };416 417 this.listeners = {418 activate: { fn: function(){419 if (this.sessionList) {420 this.sessionList.getSelectionModel().deselectAll();421 }422 }, scope: this }423 };424 425 oreilly.views.SpeakerDetail.superclass.initComponent.call(this);426 },427 428 viewSession: function(selectModel, records){429 if (records[0] !== undefined) {430 var sessionCard = new oreilly.views.SessionDetail({431 prevCard: this,432 record: records[0],433 showSpeakerData: false434 });435 this.ownerCt.setActiveItem(sessionCard, 'slide');436 }437 }438});439Ext.reg('speakerdetail', oreilly.views.SpeakerDetail);440oreilly.views.SessionDetail = Ext.extend(Ext.Panel, {441 scroll: 'vertical',442 layout: {443 type: 'vbox',444 align: 'stretch'445 },446 showSpeakerData: true,447 cls: 'session-detail',448 initComponent: function(){449 this.dockedItems = [{450 xtype: 'toolbar',451 items: [{452 ui: 'back',453 text: 'Back',454 scope: this,455 handler: function(){456 this.ownerCt.setActiveItem(this.prevCard, {457 type: 'slide',458 reverse: true,459 scope: this,460 after: function(){461 this.destroy();462 }463 });464 }465 }466 // TODO: Reimplement faves467 468 // , {xtype: 'spacer'}, {469 // iconCls: 'star',470 // cls: 'favestar' + (oreilly.faveStore.find('proposal_id', this.record.data.id) == -1 ? '' : ' favorited'),471 // iconMask: true,472 // ui: 'plain',473 // scope: this,474 // handler: function(btn){475 // var idx = oreilly.faveStore.find('proposal_id', this.record.data.id);476 // if (idx == -1) {477 // oreilly.faveStore.create({478 // proposal_id: this.record.data.id479 // });480 // btn.addCls('favorited');481 // } else {482 // oreilly.faveStore.removeAt(idx);483 // oreilly.faveStore.sync();484 // btn.removeCls('favorited');485 // }486 // }487 // }488 ]489 }];490 491 this.items = [{492 tpl: new Ext.XTemplate( '<h3>{title} <small>{room}</small></h3><h4 class="subdata">{proposal_type} at {pretty_time}, {date}</h4> {description}'),493 data: this.record.data,494 styleHtmlContent: true495 }];496 497 if (this.record.speakers() && this.showSpeakerData) {498 var speakers = this.record.speakers();499 500 this.speakerList = new Ext.List({501 itemTpl: '<div class="avatar"<tpl if="photo"> style="background-image: url({photo})"</tpl>></div><span class="name">{name}<tpl if="position || affiliation"><br /><span class="tertiary">{position}<tpl if="affiliation">, {affiliation}</tpl></span></tpl></span>',502 store: speakers,503 listeners: {504 selectionchange: {fn: this.onSpeakerSelect, scope: this}505 },506 scroll: false,507 autoHeight: true,508 style: 'width: 100%;'509 });510 511 this.items.push({512 xtype: 'toolbar',513 title: 'Speaker' + (( speakers.data.items.length == 1 ) ? '' : 's'),514 ui: 'gray',515 cls: 'small_title'516 })517 this.items.push(this.speakerList);518 Ext.repaint();519 }520 521 this.listeners = {522 activate: { fn: function(){523 if (this.speakerList) {524 this.speakerList.getSelectionModel().deselectAll();525 }526 }, scope: this }527 };528 529 oreilly.views.SessionDetail.superclass.initComponent.call(this);530 },531 532 onSpeakerSelect: function(selectionmodel, records){533 if (records[0] !== undefined) {534 var speakerCard = new oreilly.views.SpeakerDetail({535 prevCard: this,536 record: records[0],537 showSessionData: false538 });539 // Tell the parent panel to animate to the new card540 this.ownerCt.setActiveItem(speakerCard, 'slide');541 }542 }543});544Ext.reg('SessionDetail', oreilly.views.SessionDetail);545oreilly.views.LocationMap = Ext.extend(Ext.Panel, {546 coords: [37.788115, -122.402222],547 mapText: '',548 permLink: '',549 initComponent: function(){550 551 var position = new google.maps.LatLng(this.coords[0], this.coords[1]);552 553 this.dockedItems = [{554 xtype: 'toolbar',555 title: 'Location',556 items: [{xtype: 'spacer', flex: 1}, {557 ui: 'plain',558 iconCls: 'action',559 iconMask: true,560 scope: this,561 handler: function(){562 563 Ext.Msg.confirm('External Link', 'Open in Google Maps?', function(res){564 if (res == 'yes') window.location = this.permLink;565 }, this);566 }567 }]568 }]569 570 var infowindow = new google.maps.InfoWindow({571 content: this.mapText572 });573 574 this.map = new Ext.Map({575 mapOptions : {576 center : position, //nearby San Fran577 zoom: 12,578 navigationControlOptions: {579 style: google.maps.NavigationControlStyle.DEFAULT580 }581 },582 listeners: {583 maprender : function(comp, map){584 var marker = new google.maps.Marker({585 position: position,586 title : 'Sencha HQ',587 map: map588 });589 infowindow.open(map, marker);590 google.maps.event.addListener(marker, 'click', function() {591 infowindow.open(map, marker);592 });593 }594 }595 });596 597 this.items = this.map;598 599 oreilly.views.LocationMap.superclass.initComponent.call(this);600 }601});602Ext.reg('location', oreilly.views.LocationMap);603oreilly.views.AboutList = Ext.extend(Ext.Panel, {604 layout: 'card',605 initComponent: function(){606 607 this.list = new Ext.List({608 itemTpl: '<div class="page">{title}</div>',609 ui: 'round',610 store: new Ext.data.Store({611 fields: ['name', 'card'],612 data: this.pages613 }),614 listeners: {615 selectionchange: {fn: this.onSelect, scope: this}616 },617 title: 'About'618 });619 620 this.listpanel = new Ext.Panel({621 title: 'About',622 items: this.list,623 layout: 'fit',624 dockedItems: {625 xtype: 'toolbar',626 title: 'About'627 }628 })629 630 this.listpanel.on('activate', function(){631 this.list.getSelectionModel().deselectAll();632 }, this);633 634 this.items = [this.listpanel];635 636 oreilly.views.AboutList.superclass.initComponent.call(this);637 },638 639 onSelect: function(sel, records){640 if (records[0] !== undefined) {641 var newCard = Ext.apply({}, records[0].data.card, { 642 prevCard: this.listpanel,643 title: records[0].data.title644 });645 646 this.setActiveItem(Ext.create(newCard), 'slide');647 }648 }649});650Ext.reg('aboutlist', oreilly.views.AboutList);651oreilly.views.VideoList = Ext.extend(Ext.Panel, {652 layout: 'card',653 654 playlist_id: null,655 hideText: '',656 657 initComponent: function(){658 659 var toolbarBase = {660 xtype: 'toolbar',661 title: 'Videos'662 };663 664 if (this.prevCard !== undefined) {665 toolbarBase.items = [{666 ui: 'back',667 text: this.prevCard.title,668 scope: this,669 handler: function(){670 this.ownerCt.setActiveItem(this.prevCard, { type: 'slide', reverse: true });671 }672 }]673 }674 675 this.dockedItems = toolbarBase;676 677 if (this.playlist_id === null) {678 console.warn('No Youtube playlist ID provided.');679 }680 else681 {682 this.list = new Ext.List({683 itemTpl: '<div class="thumb" style="background-image: url({video.thumbnail.sqDefault})"></div><span class="name">{[values.video.title.replace("' + this.hideText + ': ","")]}</span>',684 loadingText: false,685 store: new Ext.data.Store({686 model: 'Video',687 autoLoad: true,688 proxy: {689 type: 'scripttag',690 url : 'http://gdata.youtube.com/feeds/api/playlists/' + this.playlist_id + '?v=2&alt=jsonc',691 reader: {692 type: 'json',693 root: 'data.items'694 }695 }696 }),697 listeners: {698 selectionchange: {fn: this.onSelect, scope: this}699 }700 });701 702 this.items = this.list;703 }704 705 oreilly.views.VideoList.superclass.initComponent.call(this);706 },707 708 onSelect: function(selectModel, records){709 if (records[0] !== undefined) {710 Ext.Msg.confirm('External Link', 'Open in YouTube?', function(res){711 if (res == 'yes') {712 window.location = 'http://www.youtube.com/watch?v=' + records[0].data.video.id + '&feature=player_embedded';713 }714 715 selectModel.deselectAll();716 }, this);717 718 }719 }720});721Ext.reg('videolist', oreilly.views.VideoList);722oreilly.views.TweetList = Ext.extend(Ext.Panel, {723 hashtag: '',724 layout: 'fit',725 initComponent: function(){726 727 var toolbarBase = {728 xtype: 'toolbar',729 title: this.hashtag730 };731 732 if (this.prevCard !== undefined) {733 toolbarBase.items = [{734 ui: 'back',735 text: this.prevCard.title,736 scope: this,737 handler: function(){738 this.ownerCt.setActiveItem(this.prevCard, { type: 'slide', reverse: true });739 }740 }, { xtype: 'spacer', flex: 1 }, {741 iconCls: 'action',742 iconMask: true,743 scope: this,744 ui: 'plain',745 handler: function(){746 Ext.Msg.confirm('External Link', 'Open search in Twitter?', function(res){747 if (res == 'yes') {748 window.location = 'http://search.twitter.com/search?q=' + escape(this.hashtag);749 }750 }, this);751 }752 }]753 }754 755 this.dockedItems = toolbarBase;756 757 this.list = new Ext.List({758 itemTpl: new Ext.XTemplate('<div class="avatar"<tpl if="profile_image_url"> style="background-image: url({profile_image_url})"</tpl>></div> <div class="tweet"><strong>{from_user}</strong><tpl if="to_user"> &raquo; {to_user}</tpl><br />{text:this.linkify}</div>', {759 linkify: function(value) {760 return value.replace(/(http:\/\/[^\s]*)/g, "<span class=\"link\" href=\"$1\">$1</span>");761 }762 }),763 loadingText: false,764 store: new Ext.data.Store({765 model: 'Tweet',766 proxy: {767 type: 'scripttag',768 url : 'http://search.twitter.com/search.json',769 reader: {770 type: 'json',771 root: 'results'772 }773 }774 }),775 listeners: {776 selectionchange: { fn: this.selectTweet, scope: this }777 }778 });779 780 this.items = [this.list];781 782 this.list.on('afterrender', this.loadStore, this);783 784 oreilly.views.TweetList.superclass.initComponent.call(this);785 },786 787 selectTweet: function(sel, records){788 if (records[0]) {789 Ext.Msg.confirm('External Link', 'Open tweet in Twitter?', function(res){790 if (res == 'yes') {791 window.location = 'http://twitter.com/' + records[0].data.from_user + '/status/' + records[0].data.id792 }793 794 sel.deselectAll();795 }, this);796 }797 },798 799 loadStore: function(){800 801 this.list.el.mask('<span class="top"></span><span class="right"></span><span class="bottom"></span><span class="left"></span>', 'x-spinner', false);802 803 this.list.store.load({804 params: {805 q: this.hashtag806 },807 callback: function(data){808 this.list.el.unmask();809 },810 scope: this811 });812 813 }814});...

Full Screen

Full Screen

basicExtModule.js

Source:basicExtModule.js Github

copy

Full Screen

1//初始化window2Ext.define('Ext.custom.basicWindow',{3 extend : 'Ext.window.Window',4 resizable : false,5 autoScroll : true,6 modal : true,7 closeAction : 'hide',8 constrain : true,9 initComponent : function(){10 Ext.custom.basicWindow.superclass.initComponent.call(this);11 }12});13//初始化textfield14Ext.define('Ext.custom.middletextfield',{15 extend : 'Ext.form.field.Text',16 labelAlign : 'right',17 width : 370,18 margin:'0 10 0 0',19 labelWidth :65,20 initComponent : function(){21 Ext.custom.middletextfield.superclass.initComponent.call(this);22 }23});24//初始化textfield225Ext.define('Ext.custom.bigtextfield',{26 extend : 'Ext.form.field.Text',27 width : 560,28 margin:'0 10 0 0',29 labelAlign : 'right',30 labelWidth :65,31 initComponent : function(){32 Ext.custom.bigtextfield.superclass.initComponent.call(this);33 }34});35//初始化textfield336Ext.define('Ext.custom.minitextfield',{37 extend : 'Ext.form.field.Text',38 labelAlign : 'right',39 width :110,40 margin:'0 10 0 0',41 labelWidth :65,42 initComponent : function(){43 Ext.custom.minitextfield.superclass.initComponent.call(this);44 }45});46//初始化textfield447Ext.define('Ext.custom.textfield',{48 extend : 'Ext.form.field.Text',49 width:180,50 margin:'0 10 0 0',51 initComponent : function(){52 Ext.custom.textfield.superclass.initComponent.call(this);53 }54});55//初始化textfield556Ext.define('Ext.custom.labelfield',{57 extend : 'Ext.form.field.Text',58 border : 0,59 disabled : true,60 style: {61 border : 0,62 background: 'transparent'63 },64 initComponent : function(){65 Ext.custom.textfield.superclass.initComponent.call(this);66 }67});68//初始化grid store69Ext.define('Ext.custom.basicStore',{70 extend : 'Ext.data.Store',71 labelAlign : 'right',72 initComponent : function(){73 Ext.custom.basicStore.superclass.initComponent.call(this);74 }75});76//初始化datefield77Ext.define('Ext.custom.datefield',{78 extend : 'Ext.form.field.Date',79 width : 340,80 labelAlign : 'right',81 format : 'y-m-d',82 value: new Date(),83 labelWidth :25,84 editable : false,85 initComponent : function(){86 Ext.custom.datefield.superclass.initComponent.call(this);87 }88});89//初始化button90Ext.define('Ext.custom.button',{91 extend : 'Ext.button.Button',92 width:70,93 height:30,94 bodyStyle:'background:#3c3c3c',95 initComponent : function(){96 Ext.custom.button.superclass.initComponent.call(this);97 }98});99//初始化panel100Ext.define('Ext.custom.basicPanel',{101 extend : 'Ext.panel.Panel',102 border : 0,103 initComponent : function(){104 Ext.custom.basicPanel.superclass.initComponent.call(this);105 }106});107//初始化Combo108Ext.define('Ext.custom.basicCombo',{109 extend : 'Ext.form.ComboBox',110/* triggerAction : 'all',111*/ labelWidth :65,112 typeAhead : true,113 labelAlign : 'right',114 editable:false,115 queryMode : 'local',116 width:180,117 margin:'0 10 0 0',118 displayField: 'value',119 forceSelection : true,120 valueField: 'name',121 initComponent : function(){122 Ext.custom.basicCombo.superclass.initComponent.call(this);123 }124});125//初始化miniCombo126Ext.define('Ext.custom.basicminiCombo',{127 extend : 'Ext.form.ComboBox',128 triggerAction : 'all',129 labelWidth :65,130 typeAhead : true,131 editable:false,132 labelAlign : 'right',133 width:180,134 displayField: 'value',135 forceSelection : true,136 valueField: 'name',137 initComponent : function(){138 Ext.custom.basicminiCombo.superclass.initComponent.call(this);139 }140});141//初始化formPanel142Ext.define('Ext.custom.basicFormPanel',{143 extend : 'Ext.form.Panel',144 defaultType : 'textfield',145 initComponent : function(){146 Ext.custom.basicFormPanel.superclass.initComponent.call(this);147 }148});149//初始化textarea150Ext.define('Ext.custom.textarea',{151 extend : 'Ext.form.field.TextArea',152 grow: true,153 labelAlign : 'right',154 width:600,155 labelWidth:80,156 height:80,157 initComponent : function(){158 Ext.custom.textarea.superclass.initComponent.call(this);159 }160});161//初始化Checkbox162Ext.define('Ext.custom.Checkbox',{163 extend : 'Ext.form.field.Checkbox',164 labelAlign : 'right',165 initComponent : function(){166 Ext.custom.Checkbox.superclass.initComponent.call(this);167 }168});169//初始化datefield170Ext.define('Ext.custom.datefield',{171 extend : 'Ext.form.field.Date',172 editable : false,173 format : 'y-m-d',174 value : new Date(),175 initComponent : function(){176 Ext.custom.datefield.superclass.initComponent.call(this);177 }178})179//初始化numberfield180Ext.define('Ext.custom.numberfield',{181 extend : 'Ext.form.field.Number',182 width : 280,183 minValue : 0,184 initComponent : function(){185 Ext.custom.numberfield.superclass.initComponent.call(this);186 }187})188//初始化树形189Ext.define('Ext.custom.basicTree',{190 extend : 'Ext.tree.Panel',191 rootVisible: false,192 initComponent : function(){193 Ext.custom.basicTree.superclass.initComponent.call(this);194 }195})196Ext.define('Ext.custon.applicabkeObjects', {197 extend : 'Ext.form.Panel',198 //margin:5,199 layout:'hbox',200 items:[{201 html:'<div style="width:655px;height:30px;">'+202 '<span style="float:left;paddding-left:3px;"><span style="color:red">*</span>适用专业:</span>'+'<div id="applicable_objects" name="applicable_objects" class="applicable_objects" style="padding:2px;width:570px;height:25px;float:left;margin-left:9px;border:1px solid #C0C0C0"></div>'+203 '</div>'204 }]205})206//初始化tooltip207Ext.tip.QuickTipManager.init();208//必填*号HTML片段209var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';210//内部容器自适应插件211Ext.namespace('Ext.ux');212Ext.ux.FitToParent = Ext.extend(Object,213{214 fitWidth: true,215 fitHeight: true,216 offsets: [0, 0],217 constructor: function(config)218 {219 config = config || {};220 if(config.tagName || config.dom || Ext.isString(config))221 {222 config = {parent: config};223 }224 Ext.apply(this, config);225 },226 init: function(c)227 {228 this.component = c;229 c.on('render', function(c)230 {231 this.parent = Ext.get(this.parent || c.getPositionEl().dom.parentNode);232 this.fitSize();233 Ext.EventManager.onWindowResize(this.fitSize, this);234 }, this, {single: true});235 },236 fitSize: function()237 {238 var pos = this.component.getPosition(true),239 size = this.parent.getViewSize();240 this.component.setSize(241 this.fitWidth ? size.width - pos[0] - this.offsets[0] : undefined,242 this.fitHeight ? size.height - pos[1] - this.offsets[1] : undefined);243 }244});245Ext.preg('fittoparent', Ext.ux.FitToParent);246//课程评价窗口247Ext.define('Ext.custom.scoreWindow',{248 extend : 'Ext.window.Window',249 resizable : false,250 autoScroll : true,251 modal : true,252 title:'资源评价',253 constrain : true,254 width: 600,255 height : 300,256 initComponent : function(){257 var win = this;258 win.items = [{259 itemId : 'resourceName',260 xtype : 'textfield',261 margin : '10 0 0 80',262 disabled : true,263 width : 400,264 labelAlign : 'right',265 name : 'PcourseName',266 fieldLabel : '资源'267 },{268 xtype : 'radiogroup',269 itemId : 'ifRecommend',270 width : 400,271 margin : '10 0 0 80',272 fieldLabel : '推荐',273 name : 'ifRecommend',274 labelAlign : 'right',275 items: [276 { itemId : 'recommend' , boxLabel: '推荐', name: 'rb', inputValue: '1',checked : true },277 { itemId : 'recommendNo' , boxLabel: '不推荐', name: 'rb', inputValue: '2' }278 ]279 },{280 xtype : 'panel',281 margin : '0 0 0 148',282 html :283 '评分：<div id="xzw_starSys" style="position:relative;top:-15px;left:50px;">'+284 '<div id="xzw_starBox">'+285 '<ul class="star" id="star">'+286 '<li onclick="clickStart(1);"><a href="javascript:" title="1" class="one-star">1</a></li>'+287 '<li onclick="clickStart(2);"><a href="javascript:" title="2" class="two-stars">2</a></li>'+288 '<li onclick="clickStart(3);"><a href="javascript:" title="3" class="three-stars">3</a></li>'+289 '<li onclick="clickStart(4);"><a href="javascript:" title="4" class="four-stars">4</a></li>'+290 '<li onclick="clickStart(5);"><a href="javascript:" title="5" class="five-stars">5</a></li>'+291 '<li onclick="clickStart(6);"><a href="javascript:" title="6" class="six-stars">6</a></li>'+292 '<li onclick="clickStart(7);"><a href="javascript:" title="7" class="seven-stars">7</a></li>'+293 '<li onclick="clickStart(8);"><a href="javascript:" title="8" class="eight-stars">8</a></li>'+294 '<li onclick="clickStart(9);"><a href="javascript:" title="9" class="nine-stars">9</a></li>'+295 '<li onclick="clickStart(10);"><a href="javascript:" title="10" class="ten-stars">10</a></li>'+296 '</ul>'+297 '<span id="scoreResourceId">0</span>分'+298 '<div class="current-rating" id="showb"></div>'+299 '</div>'300 },{301 xtype : 'textareafield',302 itemId : 'description',303 fieldLabel : '说几句',304 labelAlign : 'right',305 margin : '0 0 0 80',306 name : 'description',307 emptyText : '在这里写下你的评价哦...',308 width : 400,309 height : 70310 },{311 xtype : 'panel',312 layout : 'hbox',313 margin : '10 0 0 195',314 items : [{315 xtype : 'button',316 text : '确定',317 width : 80,318 height : 30,319 style : {320 background : 'red',321 border : 0322 },323 handler : function(){324 if($('#scoreResourceId').text()){325 scoreResource($('#scoreResourceId').text(),win);326 }else{327 Ext.Msg.alert("温馨提示","请打分！");328 }329 }330 },{331 xtype : 'button',332 text : '取消',333 width : 80,334 margin : '0 0 0 20',335 height : 30,336 handler : function(){337 win.close();338 }339 }]340 }]341 Ext.custom.scoreWindow.superclass.initComponent.call(this);342 }343});344//上传窗口（共用：视频、附件、封面图片……）345Ext.define('Ext.custom.uploadFileWin',{346 extend : 'Ext.custom.basicWindow',347 width : 450,348 height : 200,349 closeAction : 'destroy',350 customMaxSize : 0,351 customSetValueInput : {},352 customUrl : '',353 index:0,354 customUploadType : null,355 customFilefieldLabel : '',356 initComponent : function(){357 var win = this;358 win.items = [{359 xtype : 'form',360 width: '100%',361 height : '100%',362 items : [{363 xtype: 'filefield',364 fieldLabel: win.customFilefieldLabel,365 labelWidth: 50,366 msgTarget: 'side',367 allowBlank: false,368 emptyText : '请点击选择......',369 margin : '30 0 10 15',370 width : 400,371 buttonText: '选择' + win.customFilefieldLabel372 },{373 xtype : 'label',374 margin : '0 0 0 70',375 html : '请选择不大于' + renderSize(win.customMaxSize) + '的文件'376 }]377 }];378 win.buttons = [{379 text: '上传',380 width : 100,381 handler: function() {382 var form = win.down('form').getForm();383 if(form.isValid()){384 form.submit({385 url: win.customUrl,386 waitMsg: '正在上传...',387 success: function(fp, o) {388 errTip(o.result, function(){389 if(o.result.success){390 var result = o.result;391 win.cbFn(result);392 }393 });394 },395 failure: function(fp, o) {396 console.log(o);397 console.log(fp);398 Ext.Msg.alert('提示', o.result.err || '上传失败！');399 }400 });401 }402 }403 }];404 Ext.custom.uploadFileWin.superclass.initComponent.call(this);405 }...

Full Screen

Full Screen

widget-attribute.js

Source:widget-attribute.js Github

copy

Full Screen

1/**2 * @author Anakeen3 * @license http://www.fsf.org/licensing/licenses/agpl-3.0.html GNU Affero General Public License4 */5/**6 * Freedom Widget Ext Library7 * 12/05/20098 * @author Clément Laballe9 */10Ext.ns('Ext.fdl');11Ext.fdl.DisplayField = Ext.extend(Ext.form.DisplayField, {12 style: 'line-height:22px;margin-bottom:0px;',13 14 initComponent: function(){15 Ext.fdl.DisplayField.superclass.initComponent.call(this);16 },17 18 anchor: '-15'19});20Ext.fdl.Text = Ext.extend(Ext.form.TextField, {21 22 toString: function(){23 return 'Ext.fdl.Text';24 },25 enableKeyEvents: true,26 27 initComponent: function(){28 Ext.fdl.Text.superclass.initComponent.call(this);29 },30 31 anchor: '-15'32});33Ext.fdl.LongText = Ext.extend(Ext.form.TextArea, {34 initComponent: function(){35 Ext.fdl.LongText.superclass.initComponent.call(this);36 },37 38 anchor: '-15'39});40Ext.fdl.HtmlText = Ext.extend(Ext.form.HtmlEditor, {41 width: 524,42 height: 150,43 44 initComponent: function(){45 Ext.fdl.HtmlText.superclass.initComponent.call(this);46 }47 48});49Ext.fdl.Integer = Ext.extend(Ext.form.NumberField, {50 initComponent: function(){51 Ext.fdl.Integer.superclass.initComponent.call(this);52 },53 54 anchor: '-15'55});56Ext.fdl.Double = Ext.extend(Ext.form.NumberField, {57 initComponent: function(){58 Ext.fdl.Double.superclass.initComponent.call(this);59 },60 61 anchor: '-15'62});63Ext.fdl.Money = Ext.extend(Ext.form.NumberField, {64 initComponent: function(){65 Ext.fdl.Money.superclass.initComponent.call(this);66 },67 68 anchor: '-15'69});70Ext.fdl.Date = Ext.extend(Ext.form.DateField, {71 toString: function(){72 return 'Ext.fdl.Date';73 },74 initComponent: function(){75 Ext.fdl.Date.superclass.initComponent.call(this);76 },77 78 altFormats: 'd-j-Y|d-m-Y',79 format: 'd/m/Y',80 81 anchor: '-15'82});83Ext.fdl.Image = Ext.extend(Ext.form.FileUploadField, {84 width: 200,85 86 buttonText: '',87 buttonCfg: {88 iconCls: 'upload-icon'89 },90 91 initComponent: function(){92 Ext.fdl.Image.superclass.initComponent.call(this);93 }94 95});96Ext.fdl.File = Ext.extend(Ext.form.FileUploadField, {97 width: 200,98 99 buttonText: '',100 buttonCfg: {101 iconCls: 'upload-icon'102 },103 104 initComponent: function(){105 Ext.fdl.File.superclass.initComponent.call(this);106 }107 108});109Ext.fdl.Color = Ext.extend(Ext.form.ColorField, {110 initComponent: function(){111 Ext.fdl.Color.superclass.initComponent.call(this);112 },113 114 anchor: '-15'115});116Ext.fdl.Enum = Ext.extend(Ext.form.ComboBox, {117 attribute: null,118 119 editable: false,120 forceSelection: true,121 disableKeyFilter: true,122 triggerAction: 'all',123 mode: 'local',124 125 initComponent: function(){126 127 var enumItems = this.attribute.getEnumItems();128 129 console.log('ENUM',enumItems);130 131 this.store = new Ext.data.JsonStore({132 data: enumItems,133 fields: ['key', 'label']134 });135 136 Ext.fdl.Enum.superclass.initComponent.call(this);137 138 },139 140 valueField: 'key',141 displayField: 'label'142});143Ext.fdl.DocId = Ext.extend(Ext.form.ComboBox, {144 attribute: null,145 146 lastkey: '',147 148 initComponent: function(){149 Ext.fdl.DocId.superclass.initComponent.call(this);150 151 this.on({152 render: {153 scope: this,154 fn: function(){155 156 }157 },158 select: {159 fn: function(combo, record, index){160 combo.documentSelect(record.id);161 }162 },163 keypress: {164 fn: function(t){165 166 // Keypress is fired before actual value in browser is modified167 // This is not related to ExtJS but to browser behaviour168 // http://extjs.com/forum/showthread.php?t=50189169 170 (function(){171 if (t.getRawValue() != this.lastkey) {172 173 console.log('PROPOSAL', t.attribute, t.getRawValue());174 console.log('RETRIEVE', t.attribute.retrieveProposal({175 key: t.getRawValue()176 }));177 178 var proposal = t.attribute.retrieveProposal({179 key: t.getRawValue()180 });181 //console.log('new:' + t.getRawValue() + ',last:' + this.lastkey);182 this.lastkey = t.getRawValue();183 184 t.getStore().removeAll();185 t.getStore().loadData(proposal);186 }187 188 }).defer(100);189 },190 buffer: 500191 }192 193 });194 195 },196 197 anyMatch: true, // not ComboBox-native, see override198 mode: 'local',199 enableKeyEvents: true,200 201 // FIXME Instanciation here create a singleton (all store for Ext.fdl.DocId will be the same) 202 store: new Ext.data.JsonStore({203 data: new Array(),204 fields: ['id', 'display']205 }),206 207 valueField: 'id',208 displayField: 'display',209 // width: 180,210 // minListWidth: 200,211 212 anchor: '-15',213 214 // Called when a document is selected in the drop list.215 // To be overriden for specific behaviors.216 documentSelect: function(id){217 //console.log('Document Selected', id);218 }219 220});221/**222 * ExtJS Component for Multiple Family Selector223 */224Ext.fdl.MultiDocId = Ext.extend(Ext.fdl.DocId, {225 attribute: null,226 227 emptyText: '',228 229 docIdList: null,230 231 docTitleList: null,232 233 toString: function(){234 return 'Ext.fdl.MultiDocId';235 },236 237 //emptyField: null,238 239 initComponent: function(){240 241 Ext.fdl.MultiDocId.superclass.initComponent.call(this);242 243 this.hiddenName = this.attribute.id + '[]';244 245 this.on({246 render: {247 fn: function(t){248 249 // if (!t.emptyField) {250 // 251 // console.log('Hidden empty is inserted');252 // 253 // // Hidden field with empty value254 // // Used so data can receive when no docid is given255 // t.emptyField = new Ext.form.Field({256 // name: this.attribute.id + '[]',257 // //hidden: true,258 // value: ''259 // });260 // 261 // t.ownerCt.insert(0, t.emptyField);262 // 263 // }264 265 for (var i = 0; i < this.docIdList.length; i++) {266 if (this.docIdList[i] != '') {267 268 var index = this.ownerCt.items.indexOf(this);269 270 var clearDocId = this.getDocIdComboBox();271 272 this.ownerCt.insert(index + 1, clearDocId);273 274 //this.ownerCt.doLayout();275 276 // this.setValue(null);277 278 var data = [{279 id: this.docIdList[i],280 display: this.docTitleList[i]281 }];282 283 t.getStore().loadData(data, true); // Complete store with appropriate record to trigger proper recognition of display in combobox284 clearDocId.setValue(this.docIdList[i]);285 286 }287 }288 289 }290 },291 select: {292 fn: function(combo, record, index){293 (function(){294 combo.getEl().blur();295 }).defer(100);296 }297 }298 299 });300 301 },302 303 getDocIdComboBox: function(){304 305 var mfcb = this;306 307 var clearDocId = new Ext.fdl.DocId({308 //value: id,309 attribute: this.attribute,310 triggerClass: 'x-form-clear-trigger',311 store: this.store,312 // Special override since method is supposed private by ExtJS313 onTriggerClick: function(){314 this.ownerCt.setHeight(this.ownerCt.getHeight() - 26);315 this.ownerCt.remove(this);316 mfcb.documentClear(this.getValue());317 },318 hiddenName: this.attribute.id + '[]',319 width: this.getWidth() // Should not be necessary with default anchoring but width is not correct if omitted...320 });321 322 return clearDocId;323 324 },325 326 documentSelect: function(id){327 328 var index = this.ownerCt.items.indexOf(this);329 330 var clearDocId = this.getDocIdComboBox();331 332 this.ownerCt.insert(index + 1, clearDocId);333 334 // TODO Check if doLayout and setValue are necessary.335 336 this.ownerCt.doLayout();337 338 this.setValue(null);339 340 clearDocId.setValue(id);341 342 this.ownerCt.setHeight(this.ownerCt.getHeight() + 26);343 344 },345 346 // To be overriden.347 documentClear: function(id){348 349 }350 351 ...

Full Screen

Full Screen

binding-with-classes.js

Source:binding-with-classes.js Github

copy

Full Screen

1/*2 * Ext JS Library 2.23 * Copyright(c) 2006-2008, Ext JS, LLC.4 * licensing@extjs.com5 * 6 * http://extjs.com/license7 */89// setup an App namespace10// This is done to prevent collisions in the global namespace11Ext.ns('App');12/**13 * App.BookStore14 * @extends Ext.data.Store15 * @cfg {String} url This will be a url of a location to load the BookStore16 * This is a specialized Store which maintains books.17 * It already knows about Amazon's XML definition and will expose the following 18 * Record defintion:19 * - Author20 * - Manufacturer21 * - ProductGroup22 * - DetailPageURL23 */24App.BookStore = function(config) {25 var config = config || {};26 Ext.applyIf(config, {27 reader: new Ext.data.XmlReader({28 // records will have an "Item" tag29 record: 'Item',30 id: 'ASIN',31 totalRecords: '@total'32 }, [33 // set up the fields mapping into the xml doc34 // The first needs mapping, the others are very basic35 {name: 'Author', mapping: 'ItemAttributes > Author'},36 'Title',37 'Manufacturer',38 'ProductGroup',39 // Detail URL is not part of the column model of the grid40 'DetailPageURL'41 ])42 });43 // call the superclass's constructor 44 App.BookStore.superclass.constructor.call(this, config);45};46Ext.extend(App.BookStore, Ext.data.Store);47/**48 * App.BookGrid49 * @extends Ext.grid.GridPanel50 * This is a custom grid which will display book information. It is tied to 51 * a specific record definition by the dataIndex properties. 52 * 53 * It follows a very custom pattern used only when extending Ext.Components54 * in which you can omit the constructor.55 * 56 * It also registers the class with the Component Manager with an xtype of57 * bookgrid. This allows the application to take care of the lazy-instatiation58 * facilities provided in Ext 2.0's Component Model.59 */60App.BookGrid = Ext.extend(Ext.grid.GridPanel, {61 // override 62 initComponent : function() {63 Ext.apply(this, {64 // Pass in a column model definition65 // Note that the DetailPageURL was defined in the record definition but is not used66 // here. That is okay.67 columns: [68 {header: "Author", width: 120, dataIndex: 'Author', sortable: true},69 {header: "Title", dataIndex: 'Title', sortable: true},70 {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},71 {header: "Product Group", dataIndex: 'ProductGroup', sortable: true}72 ],73 sm: new Ext.grid.RowSelectionModel({singleSelect: true}),74 // Note the use of a storeId, this will register thisStore75 // with the StoreMgr and allow us to retrieve it very easily.76 store: new App.BookStore({77 storeId: 'gridBookStore',78 url: 'sheldon.xml'79 }),80 // force the grid to fit the space which is available81 viewConfig: {82 forceFit: true83 }84 });85 // finally call the superclasses implementation86 App.BookGrid.superclass.initComponent.call(this); 87 }88});89// This will associate an string representation of a class90// (called an xtype) with the Component Manager91// It allows you to support lazy instantiation of your components92Ext.reg('bookgrid', App.BookGrid);93/**94 * App.BookDetail95 * @extends Ext.Panel96 * This is a specialized Panel which is used to show information about97 * a book. 98 * 99 * This demonstrates adding 2 custom properties (tplMarkup and 100 * startingMarkup) to the class. It also overrides the initComponent101 * method and adds a new method called updateDetail.102 * 103 * The class will be registered with an xtype of 'bookdetail'104 */105App.BookDetail = Ext.extend(Ext.Panel, {106 // add tplMarkup as a new property107 tplMarkup: [108 'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',109 'Author: {Author}<br/>',110 'Manufacturer: {Manufacturer}<br/>',111 'Product Group: {ProductGroup}<br/>'112 ],113 // startingMarup as a new property114 startingMarkup: 'Please select a book to see additional details',115 // override initComponent to create and compile the template116 // apply styles to the body of the panel and initialize117 // html to startingMarkup118 initComponent: function() {119 this.tpl = new Ext.Template(this.tplMarkup);120 Ext.apply(this, {121 bodyStyle: {122 background: '#ffffff',123 padding: '7px'124 },125 html: this.startingMarkup126 });127 // call the superclass's initComponent implementation128 App.BookDetail.superclass.initComponent.call(this);129 },130 // add a method which updates the details131 updateDetail: function(data) {132 this.tpl.overwrite(this.body, data); 133 }134});135// register the App.BookDetail class with an xtype of bookdetail136Ext.reg('bookdetail', App.BookDetail);137/**138 * App.BookMasterDetail139 * @extends Ext.Panel140 * 141 * This is a specialized panel which is composed of both a bookgrid142 * and a bookdetail panel. It provides the glue between the two 143 * components to allow them to communicate. You could consider this144 * the actual application.145 * 146 */147App.BookMasterDetail = Ext.extend(Ext.Panel, {148 // override initComponent149 initComponent: function() {150 // used applyIf rather than apply so user could151 // override the defaults152 Ext.applyIf(this, {153 frame: true,154 title: 'Book List',155 width: 540,156 height: 400,157 layout: 'border',158 items: [{159 xtype: 'bookgrid',160 itemId: 'gridPanel',161 region: 'north',162 height: 210,163 split: true164 },{165 xtype: 'bookdetail',166 itemId: 'detailPanel',167 region: 'center'168 }] 169 })170 // call the superclass's initComponent implementation 171 App.BookMasterDetail.superclass.initComponent.call(this);172 },173 // override initEvents174 initEvents: function() {175 // call the superclass's initEvents implementation176 App.BookMasterDetail.superclass.initEvents.call(this);177 178 // now add application specific events179 // notice we use the selectionmodel's rowselect event rather180 // than a click event from the grid to provide key navigation181 // as well as mouse navigation182 var bookGridSm = this.getComponent('gridPanel').getSelectionModel(); 183 bookGridSm.on('rowselect', this.onRowSelect, this); 184 },185 // add a method called onRowSelect186 // This matches the method signature as defined by the 'rowselect'187 // event defined in Ext.grid.RowSelectionModel188 onRowSelect: function(sm, rowIdx, r) {189 // getComponent will retrieve itemId's or id's. Note that itemId's 190 // are scoped locally to this instance of a component to avoid191 // conflicts with the ComponentMgr192 var detailPanel = this.getComponent('detailPanel');193 detailPanel.updateDetail(r.data);194 }195});196// register an xtype with this class197Ext.reg('bookmasterdetail', App.BookMasterDetail);198// Finally now that we've defined all of our classes we can instantiate199// an instance of the app and renderTo an existing div called 'binding-example'200// Note now that classes have encapsulated this behavior we can easily create201// an instance of this app to be used in many different contexts, you could 202// easily place this application in an Ext.Window for example203Ext.onReady(function() {204 // create an instance of the app205 var bookApp = new App.BookMasterDetail({206 renderTo: 'binding-example'207 });208 // We can retrieve a reference to the data store209 // via the StoreMgr by its storeId210 Ext.StoreMgr.get('gridBookStore').load();...

Full Screen

Full Screen

add-to-menu.spec.js

Source:add-to-menu.spec.js Github

copy

Full Screen

...18 }})19 }20 it('renders', () => {21 playlistStore.all = factory('playlist', 10)22 const wrapper = initComponent()23 wrapper.html().should.contain('Add 5 songs to')24 wrapper.hasAll('li.after-current', 'li.bottom-queue', 'li.top-queue', 'li.favorites', 'form.form-new-playlist').should.be.true25 wrapper.findAll('li.playlist').should.have.lengthOf(10)26 })27 it('supports different configurations', () => {28 // add to queue29 let wrapper = initComponent({ queue: false })30 wrapper.hasNone('li.after-current', 'li.bottom-queue', 'li.top-queue').should.be.true31 // add to favorites32 wrapper = initComponent({ favorites: false })33 wrapper.has('li.favorites').should.be.false34 // add to playlists35 wrapper = initComponent({ playlists: false })36 wrapper.has('li.playlist').should.be.false37 // add to a new playlist38 wrapper = initComponent({ newPlaylist: false })39 wrapper.has('form.form-new-playlist').should.be.false40 })41 it('queue songs after current', () => {42 const wrapper = initComponent()43 const queueStub = sinon.stub(queueStore, 'queueAfterCurrent')44 const closeStub = sinon.stub(wrapper.vm, 'close')45 wrapper.click('li.after-current')46 queueStub.calledWith(songs).should.be.true47 closeStub.called.should.be.true48 queueStub.restore()49 closeStub.restore()50 })51 it('queue songs to bottom', () => {52 const wrapper = initComponent()53 const queueStub = sinon.stub(queueStore, 'queue')54 const closeStub = sinon.stub(wrapper.vm, 'close')55 wrapper.click('li.bottom-queue')56 queueStub.calledWith(songs).should.be.true57 closeStub.called.should.be.true58 queueStub.restore()59 closeStub.restore()60 })61 it('queue songs to top', () => {62 const wrapper = initComponent()63 const queueStub = sinon.stub(queueStore, 'queue')64 const closeStub = sinon.stub(wrapper.vm, 'close')65 wrapper.click('li.top-queue')66 queueStub.calledWith(songs, false, true).should.be.true67 closeStub.called.should.be.true68 queueStub.restore()69 closeStub.restore()70 })71 it('add songs to favorite', () => {72 const wrapper = initComponent()73 const likeStub = sinon.stub(favoriteStore, 'like')74 const closeStub = sinon.stub(wrapper.vm, 'close')75 wrapper.click('li.favorites')76 likeStub.calledWith(songs).should.be.true77 closeStub.called.should.be.true78 likeStub.restore()79 closeStub.restore()80 })81 it('add songs to existing playlist', () => {82 const playlists = factory('playlist', 3)83 playlistStore.all = playlists84 const wrapper = initComponent()85 const addSongsStub = sinon.stub(playlistStore, 'addSongs')86 const closeStub = sinon.stub(wrapper.vm, 'close')87 wrapper.findAll('li.playlist').at(1).click()88 addSongsStub.calledWith(playlists[1], songs).should.be.true89 closeStub.called.should.be.true90 addSongsStub.restore()91 closeStub.restore()92 })93 it('creates new playlist from songs', async done => {94 const storeStub = sinon.stub(playlistStore, 'store').callsFake(() => {95 return new Promise((resolve, reject) => {96 resolve(factory('playlist'))97 })98 })99 const wrapper = initComponent()100 const closeStub = sinon.stub(wrapper.vm, 'close')101 wrapper.setData({ newPlaylistName: 'Foo' })102 await wrapper.submit('form.form-new-playlist')103 storeStub.calledWith('Foo', songs).should.be.true104 closeStub.restore()105 done()106 })...

Full Screen

Full Screen

DirectCombo.js

Source:DirectCombo.js Github

copy

Full Screen

1/*!2 * Ext JS Library 3.3.03 * Copyright(c) 2006-2010 Ext JS, Inc.4 * licensing@extjs.com5 * http://www.extjs.com/license6 */7Imgorg.DirectCombo = Ext.extend(Ext.form.ComboBox, {8 displayField: 'text',9 valueField: 'id',10 triggerAction: 'all',11 queryAction: 'name',12 forceSelection: true,13 mode: 'remote',14 15 initComponent: function() {16 this.store = new Ext.data.DirectStore(Ext.apply({17 api: this.api,18 root: '',19 fields: this.fields || ['text', 'id']20 }, this.storeConfig));21 22 Imgorg.DirectCombo.superclass.initComponent.call(this);23 }24});25Imgorg.TagCombo = Ext.extend(Imgorg.DirectCombo,{26 forceSelection: false,27 storeConfig: {28 id: 'tag-store'29 },30 initComponent: function() {31 Ext.apply(this.storeConfig, {32 directFn: Imgorg.ss.Tags.load33 });34 Imgorg.TagCombo.superclass.initComponent.call(this);35 }36});37Ext.reg('img-tagcombo', Imgorg.TagCombo);38Imgorg.TagMultiCombo = Ext.extend(Ext.ux.MultiCombo,{39 listClass: 'label-combo',40 displayField: 'text',41 valueField: 'id',42 43 initComponent: function() {44 this.store = new Ext.data.DirectStore(Ext.apply({45 directFn: Imgorg.ss.Tags.load,46 root: '',47 autoLoad: true,48 fields: this.fields || ['text', 'id']49 }, this.storeConfig));50 this.plugins =new Ext.ux.MultiCombo.Checkable({});51 Imgorg.DirectCombo.superclass.initComponent.call(this);52 }53});54Ext.reg('img-tagmulticombo', Imgorg.TagMultiCombo);55Imgorg.AlbumCombo = Ext.extend(Imgorg.DirectCombo, {56 storeConfig: {57 id: 'album-store'58 },59 initComponent: function() {60 Ext.apply(this.storeConfig, {61 directFn: Imgorg.ss.Albums.getAllInfo62 });63 Imgorg.AlbumCombo.superclass.initComponent.call(this);64 }65});...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { Playwright } = require('playwright');2const { chromium } = Playwright;3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 await browser.close();8})();9const { Playwright } = require('playwright');10const { chromium } = Playwright;11(async () => {12 const browser = await chromium.launch();13 const context = await browser.newContext();14 const page = await context.newPage();15 await browser.close();16})();17const { Playwright } = require('playwright');18const { chromium } = Playwright;19(async () => {20 const browser = await chromium.launch();21 const context = await browser.newContext();22 const page = await context.newPage();23 await browser.close();24})();25const { Playwright } = require('playwright');26const { chromium } = Playwright;27(async () => {28 const browser = await chromium.launch();29 const context = await browser.newContext();30 const page = await context.newPage();31 await browser.close();32})();33const { Playwright } = require('playwright');34const { chromium } = Playwright;35(async () => {36 const browser = await chromium.launch();37 const context = await browser.newContext();38 const page = await context.newPage();39 await browser.close();40})();41const { Playwright } = require('playwright');42const { chromium } = Playwright;43(async () => {44 const browser = await chromium.launch();45 const context = await browser.newContext();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { initComponent } = require('playwright');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 const handle = await page.$('text=Get started');7 const component = await initComponent(page, handle);8 console.log(await component.evaluate((node) => node.textContent));9 await browser.close();10})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const {initComponent} = require('playwright/lib/server/chromium/crBrowser');2const {chromium} = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 const crBrowser = await initComponent(page);7 const crPage = await crBrowser.newPage();8 await crPage.close();9 await browser.close();10})();11Error: Protocol error (Page.navigate): Cannot navigate to invalid URL12const {initComponent} = require('playwright/lib/server/chromium/crBrowser');13const {chromium} = require('playwright');14(async () => {15 const browser = await chromium.launch();16 const page = await browser.newPage();17 const crBrowser = await initComponent(page);18 const crPage = await crBrowser.newPage();19 await crPage.close();20 await browser.close();21})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { initComponent } = require('playwright/lib/server/frames');2const { initComponent } = require('playwright/lib/server/frames');3const { initComponent } = require('playwright/lib/server/frames');4const { initComponent } = require('playwright/lib/server/frames');5const { initComponent } = require('playwright/lib/server/frames');6const { initComponent } = require('playwright/lib/server/frames');7const { initComponent } = require('playwright/lib/server/frames');8const { initComponent } = require('playwright/lib/server/frames');9const { initComponent } = require('playwright/lib/server/frames');10const { initComponent } = require('playwright/lib/server/frames');11const { initComponent } = require('playwright/lib/server/frames');12const { initComponent } = require('playwright/lib/server/frames');13const { initComponent } = require('playwright/lib/server/frames');14const { initComponent } = require('playwright/lib/server/frames');15const { initComponent } = require('playwright/lib/server/frames');16const { initComponent } = require('playwright/lib/server/frames');17const { initComponent } = require('playwright/lib/server/frames');18const { initComponent } = require('playwright/lib/server/frames');19const { initComponent } = require('playwright/lib/server/frames');20const { initComponent } = require('playwright/lib/server/frames');21const { initComponent } = require('playwright/lib/server/frames');22const { initComponent } = require('playwright/lib/server/frames');23const { initComponent } = require('playwright/lib/server/frames');24const { initComponent } = require('playwright/lib/server/frames');25const { initComponent } = require('playwright/lib/server/frames');26const { initComponent } = require('playwright/lib

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { test } from '@playwright/test';2test('My test', async ({ page }) => {3});4import { test } from '@playwright/test';5test('My test', async ({ page }) => {6});7import { test } from '@playwright/test';8test('My test', async ({ page }) => {9});10import { test } from '@playwright/test';11test('My test', async ({ page }) => {12});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { initComponent } = require('playwright/lib/server/chromium/crBrowser');2const { chromium, devices } = require('playwright');3const iPhone = devices['iPhone 6'];4const browser = await chromium.launch({ headless: false });5const context = await browser.newContext({6 geolocation: { longitude: 12.492507, latitude: 41.889938 },7});8const page = await context.newPage();9await initComponent(page, 'geolocation');10await page.click('text="Share Location"');11await page.waitForTimeout(5000);12await browser.close();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { initComponent } = require('@playwright/test/lib/initComponent');2const { chromium } = require('playwright');3const { Playwright } = require('playwright/lib/client/playwright');4const { PlaywrightServer } = require('playwright/lib/server/playwrightServer');5const { PlaywrightServerTransport } = require('playwright/lib/server/playwrightServerTransport');6const { PlaywrightServerTransportStream } = require('playwright/lib/server/playwrightServerTransportStream');7const { PlaywrightClient } = require('playwright/lib/client/playwrightClient');8const { PlaywrightClientTransport } = require('playwright/lib/client/playwrightClientTransport');9const { PlaywrightClientTransportStream } = require('playwright/lib/client/playwrightClientTransportStream');10const { PlaywrightDispatcher } = require('playwright/lib/client/playwrightDispatcher');11const { Connection } = require('playwright/lib/client/connection');12const { PlaywrightServer } = require('playwright/lib/server/playwrightServer');13const { PlaywrightServerTransport } = require('playwright/lib/server/playwrightServerTransport');14const { PlaywrightServerTransportStream } = require('playwright/lib/server/playwrightServerTransportStream');15const { PlaywrightClient } = require('playwright/lib/client/playwrightClient');16const { PlaywrightClientTransport } = require('playwright/lib/client/playwrightClientTransport');17const { PlaywrightClientTransportStream } = require('playwright/lib/client/playwrightClientTransportStream');18const { PlaywrightDispatcher } = require('playwright/lib/client/playwrightDispatcher');19const { Connection } = require('playwright/lib/client/connection');20const { PlaywrightServer } = require('playwright/lib/server/playwrightServer');21const { PlaywrightServerTransport } = require('playwright/lib/server/playwrightServerTransport');22const { PlaywrightServerTransportStream } = require('playwright/lib/server/playwrightServerTransportStream');23const { PlaywrightClient } = require('playwright/lib/client/playwrightClient');24const { PlaywrightClientTransport } = require('playwright/lib/client/play

Full Screen

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful