How to use initComponent method in Playwright Internal

Best JavaScript code snippet using playwright-internal

oreilly-all-debug.js

Source:oreilly-all-debug.js

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});...

basicExtModule.js

Source:basicExtModule.js

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	}...

widget-attribute.js

Source:widget-attribute.js

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    ...

binding-with-classes.js

Source:binding-with-classes.js

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();...

add-to-menu.spec.js

Source:add-to-menu.spec.js

...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  })...

DirectCombo.js

Source:DirectCombo.js

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});...

Using AI Code Generation

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();

Using AI Code Generation

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})();

Using AI Code Generation

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})();

Using AI Code Generation

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

Using AI Code Generation

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});

Using AI Code Generation

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();

Using AI Code Generation

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

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:

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.
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.
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.
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.
Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
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.
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.
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.
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.
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.
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.
Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.