Download - FAQ Sencha
-
www.YoYoBrain.com - Accelerators for Memory and Learning
Questions for Sencha TouchCategory: Default - (203 questions)Sencha Touch: the base library for SenchaTouch is ______
Sench Platform
Sencha Touch: widget which is a floatingmodal panel that animates into view
Sheet
Sencha Touch: sheet widget is a subclass of_____
Panel
Sencha Touch: purpose of ActionSheetwidget
subclass of Sheet that allows you to renderbuttons in a vertical row, to ask user to make
a decision
Sencha Touch: ____ widget provides analert-like functionality
MessageBox
Sencha Touch: 3 provided data bound views DataViewListNestedList
Sencha Touch: widget that binds to a datastore and gives you 100% control on howyou will render your data
DataView
Sencha Touch: what is needed to stamp outHTML fragments in DataView widget
XTemplate
Sencha Touch: widget that is data boundand renders a native list view
List
Sencha Touch: data bound widget fordisplaying nested lists
NestedList
Sencha Touch: widget that wraps Googlemaps
Map
Sencha Touch: 4 tap related events tapstarttapendtapdoubletab
Sencha Touch: utility function that can beused to configure Sencha Touch for use onmobile device
Ext.setup( )
Sencha Touch: config option to run codewhen browser is booted on Ext.setup
onReady
Sencha Touch: how to register application inapp.js
Ext.regApplication( { } );
Sencha Touch: how to run code afterregistration when using Ext.regApplication( )
launch: function( ) {}
Sencha Touch: how to create a model Ext.regModel("MyModel", {});
-
Sencha Touch: how to create a store Ext.regStore()Sencha Touch: how to connect view withdata
store: Ext.StoreMgr.get('MyStore')
Sencha Touch: how to create a viewextending List
MyApp.MyList = Ext.extend( Ext.List, {});
Sencha Touch: how to register a class withComponent Manager for lazy registration
Ext.reg('MyList', MyApp.MyList )
Sencha Touch: how to tell List how to renderdata from store
itemTpl: '{lastName}, {firstName}'
Sencha Touch: widget for forms Ext.form.FormPanel
Sencha Touch: how to tell FormPanel thedefault widget to use for form fields
defaultType: 'textfield'
Sencha Touch: how to tell application to runin full screen mode
Ext.setup configfullscreen: true
Sencha Touch: how to set startup screenduring bootstrap for phone / tables
Ext.setup config optionstabletStartupScreen:URLphoneStartupScreen: URL
Sencha Touch: how to set the icon forgeneral / phone / tablets
in Ext.setup configicon: URLtabletIcon:URLphoneIcon: URL
Sencha Touch: how to config iOS top-moststatus bar style
in Ext.setup configstatusBarStyle
Sencha Touch: how to set a model to localstorage
in Ext.regModel configproxy : { type:'localstorage', ...}
Sencha Touch: how to set text for List whenthere are no items to show
emptyText: 'Nothing to see here'
Sencha Touch: how to get a store to grabdata in a view
this.store.load()
Sencha Touch: how to control direction aFormPanel scrolls in
scroll: 'vertical'
Sencha Touch: how to supply default configoptions for FormPanel display items
defaults { labelWidth: 20}
Sencha Touch: how to add docked elementsto top / bottom / left / right of Panel
dockedItems: [ ]
Sencha Touch: how to create a toolbar fortop of Panel
dockedItems: [{ xtype: 'toolbar', dock : 'top',title: "Something clever"}]
Sencha Touch: how to dispatch events Ext.dispatch( { } )Sencha Touch: how to grab a record by indexfrom store
myStore.getAt(index)
-
Sencha Touch: how to create a new modelrecord
Ext.ModelMgr.create( { }, 'ModelName' )
Sencha Touch: how to get DataView toupdate view
myView.updateRecord( record )
Sencha Touch: how to grab current databeing used in DataView
dataView.getRecord( )
Sencha Touch: ___ is the class all widgetsare based on
Ext.Component
Sencha Touch: 3 phases of component lifecycle
InitializationRenderDestruction
Sencha Touch: 1st thing that happens incomponent initialization
the Component config options are applied
Sencha Touch: in Component initializationphase, what happens after Componentconfig is applied
Base Events are registered
Sencha Touch: where do core events comefrom in Ext.Component
Ext.Observable
Sencha Touch: how to set observers onComponent events
listeners: { beforeHide: function() {}}
Sencha Touch: in Component initialization,what happens after base observers are set
the component is given a unique ID
Sencha Touch: where are all componentsregistered and managed
Ext.ComponentMgr
Sencha Touch: how to assign an id tocomponent that only has to be unique withina given container
use itemId instead of id
Sencha Touch: in component initializationphase, what happens after unique id isassigned
initComponent is executed
Sencha Touch: what happens afterinitComponent is called in Componentinitialization
Component is registered withComponentMgr
Sencha Touch: what happens next inComponent initialization after Component isregistered with ComponentMgr
plugins are registered
Sencha Touch: what triggers rendering ofComponent automatically in initializationphase
if renderTo or applyTo parameters have beenset
-
Sencha Touch: how to explicitly get aComponent to draw
.render( )
Sencha Touch: what happens to "myThing"in code belowmyPanel.render("myThing")
adds "myThing" as element ID in DOM
Sencha Touch: first thing that happens inComponent render phase
beforerender event is fired
Sencha Touch: how to prevent rendering ofComponent in code
hook into beforerender event and return false
Sencha Touch: in Component render phase,what happens after beforerender event
the Container is set
Sencha Touch: difference in using renderToversus applyTo when Component isrendering
renderTo - adds div to container specifiedand renders this component in divapplyTo -
puts this component's content insidereferenced div
Sencha Touch: what happens in Componentrender phase after container is set
onRender is executed and all DOM elementsare inserted to hold custom content
Sencha Touch: in Component render phasewhat happens after onRender is executed
render event is fired
Sencha Touch: in Component render phase,what happens after render event is fired
content is initialized, with internal HTML andstyling applied
Sencha Touch: 2 ways to inject customHTML content into Component
html - raw HTML stringcontentEl - points toexisting HTML's id and uses it
Sencha Touch: how to create customcomponent content that generates byiterating over data objects
data: [{ name: "Joe", age: 20 },......]tpl: '(name) - (sex)'
Sencha Touch: in Component render cycle,what happens after custom content isinjected
afterRender method is executed. This is toposition the content properly.
Sencha Touch: in Component render cycle,what happens after afterRender is executed
afterrender event is fired
Sencha Touch: what is the LazyInstantiation syntax for creating a component
var myPanel = { xtype: 'panel', html: "I'mlazy"}Ext.ComponentMgr.create(myPanel).s
how();Sencha Touch: ____ is behind the scenesclass that helps Component managechildren items
Container
Sencha Touch: 2 ways to add componentsinto a Component's container
.add( ).insert( )
-
Sencha Touch: how to grab a Componentwith its itemId
Ext.getCmp('myName')
Sencha Touch: how to tell a component torepaint itself
.doLayout()
Sencha Touch: how to remove a componentfrom another component's container
.remove( )
Sencha Touch: how to remove a componentwithout destroying it so you can put itsomewhere else
2nd option parameter, set tofalsemyPanel.remove(myField, false)
Sencha Touch: how to get a handle on directchildren of Component
getComponent( )can pass index, id or itemId
Sencha Touch: how to find direct childbased on CSS like selector
.child( )
Sencha Touch: how to find children at anylevel of hierarchy using CSS like selectors
.down( ) - returns a single element.query( ) -returns an array of matches
Sencha Touch: layout that sizes child item tofit within the confines of its parent
FitLayoutlayout: 'fit'
Sencha Touch: 2 abstract layouts all otherlayout's extend
ComponentLayoutContainerLayout
Sencha Touch: what is the defaultcomponent layout and its way of showingcontent
AutoComponentLayoutstacks onecomponent over another
Sencha Touch: what is the default container'slayout and its effect
AutoContainerLayoutstacks one componentover another
Sencha Touch: what is Card layout Each sub component is full screen with onlyone card shown at a time
Sencha Touch: how to manage which cardis shown in CardLayout at render time
activeItemconfig option
Sencha Touch: how to change which card isshown in CardLayout component
setActiveIndex
Sencha Touch: 2 layouts to stack itemsvertically and horizontally
HBoxVBox
Sencha Touch: when using hbox layout whatare config options to control horizontal /vertical alignment
pack - horizontalalign - vertical
Sencha Touch: what are values for packwhen using hbox layout
start, center, end, justify
-
Sencha Touch: what are values for alignconfig option when using hbox layout
start, center, end, stretch
Sencha Touch: how to have content take upweight amount of space in hbox layout
use flex configthe flex values are summed upand each component is given weighted
spacing
Sencha Touch: how to dock items at outeredges of Ext.Panel
configdockedItems: [ ]
Sencha Touch: when creating a dockedItemcontainer how to tell it where to place item
use config optiondock: 'top' , 'bottom', 'left','right'
Sencha Touch: how to add / remove dockeditems from Panel
addDockedremoveDocked
Sencha Touch: how to force rendering ofPanel's docked items
doComponentLayout()
Sencha Touch: how to grab a docked item inPanel
getDockedComponent( )
Sencha Touch: get a list of all currentlydocked items
getDockedItems()
Sencha Touch: how to create a floating /draggable Panel
config optionsdraggable: truefloating: true
Sencha Touch: how to position a floatingpanel
floatingPanel.setPosition(50, 50)
Sencha Touch: how to turn on floating anddragging after Component is instantiated
.setFloating( ).setDragging( )
Sencha Touch: how to make a floatingComponent modal
config optionmodal: true
Sencha Touch: on modal Component how toturn off default behavior of hiding when usertaps outside Component
hideOnMaskTap: false
Sencha Touch: how to set show / hideanimations on popup Panel
showAnimation: 'fade'hideAnimation: 'pop'
Sencha Touch: Component used togenerate space between components
xtype: 'spacer'
Sencha Touch: how to turn a button into icon config:iconCls: 'search'icon class - must mapto one of the icons included in SASS files
Sencha Touch: what is the default xtype foritems in a toolbar
'button'
Sencha Touch: how to set code to buttonclick in button Component
handler: function() {}
-
Sencha Touch: how to set what this keywordwill point to when Button handler is run
scope: myObject
Sencha Touch: how to set alignment ofbutton icon
iconAligncan be: 'top', 'bottom', 'right', 'left'
Sencha Touch: how to control visibility ofButton icon image
config optioniconMask
Sencha Touch: how to alter appearance ofbuttons based on built in themes
configui: 'action'
Sencha Touch: TabPanel uses specialbuttons called ____ located in a specialToolbar called ____
TabTabBar
Sencha Touch: how to control tab switchanimation
cardSwitchAnimation
Sencha Touch: component type to hold formwidgets
FormPanel
Sencha Touch: xtype for form text fields 'textfield'
Sencha Touch: xtype for form select boxes selectfield
Sencha Touch: how to set drop down valuesfor 'selectfield' widget
options: [ { text: 'Arkansas', value: 'AR }, ...]
Sencha Touch: how to put instruction text inForm text field
config optionplaceholder:
Sencha Touch: how to retrieve all valuesfrom FormPanel
myForm.getValues()
Sencha Touch: how to turn on auto creation,capitalization, and completion in Form textfields
config optionsautoCorrect:trueautoCapitalize: trueautoComplete: true
Sencha Touch: how to attach label to aForm field widget
label: 'Name'
Sencha Touch: on Form text field what iseffect of optionrequired: true
puts an asterisk next to field but does not dovalidation
Sencha Touch: xtypes for URL, number andemail fields
urlfieldnumberfieldemailfield
Sencha Touch: xtype for password fields passwordfield
Sencha Touch: xtype for Form text area textareafield
Sencha Touch: xtypes for Form check boxand radio buttons
checkboxradio
Sencha Touch: xtype for date selection field datepickerfield
-
Sencha Touch: xtype for number spinnerform field
spinnerfield
Sencha Touch: xtype that implements nativeSencha slider
sliderfield
Sencha Touch: xtype Form field that allowstoggling field like on / off switch
togglefield
Sencha Touch: how to create a Data Storethat pulls JSON from server
Ext.data.JsonStore { proxy: {}}
Sencha Touch: widget used to group Formfields and has a title
xtype: 'fieldset'
Sencha Touch: when using Fieldset to groupForm items, 2 options to give user feedbackon what to do
title: 'Personal Information'instructions:"Enter first and last name:"
Sencha Touch: syntax to submit a form toserver
myForm.submit( { url: 'form-submit', success:function() {}, failure: function() {}});
Sencha Touch: format of data server mustreturn after Form submission
[success: true, msg: "Something clever" ]
Sencha Touch: how to grab a model withname string
Ext.ModelMgr.getModel('myModel')
Sencha Touch: how to grab model datawhen model has proxy
myModel.load( id, {success: function(){},failure: function() {}});
Sencha Touch: how to put values in Formfrom Model that has returned from load
myForm.loadRecord( theRecord )
Sencha Touch: how to put values in formwith the record in JavaScript object format
myForm.setValues(dataObject)
Sencha Touch: how to update underlyingmodel record being used on a form
myForm.updateRecord(myForm.record)
Sencha Touch: default layout type for aPanel
layout: 'auto'
Sencha Touch: how does layout: 'auto'handle vertical versus horizontal space
will take all horizontal space but only neededvertical space to render
Sencha Touch: how to get Panel to take allhorizontal and vertical space
layout: 'fit'
Sencha Touch: 2 special widgets thatprovide auto handling of card type layout
TabPanelCarousel
Sencha Touch: what is only layout allowedfor TabPanel
'card', applied automatically and any otherlayout is ignored
-
Sencha Touch: how to control swipingdirection of Carousel
direction: 'vertical' / 'horizontal'
Sencha Touch: when using vbox, how tohave items take all horizontal space
align: 'stretch'
Sencha Touch: how to layout data fromStore in a DataView widget
tpl: new Ext.XTemplate( '',....,'')
Sencha Touch: what class handlestemplating
Ext.Template
Sencha Touch: how to hook a store toHTML5 sessionStorage object
proxy: { type: 'sessionStorage', id:'mySessionStore' }
Sencha Touch: when does icon andphoneStartupScreen images get used fromExt.startup
if user saves page to home screen, the iconis used for app and when launched from
there phoneStartupScreen image is usedduring launch
Sencha Touch: how to grab access toTabBar portion of TabPanel
myPanel.getTabBar()
Sencha Touch: how to tell button to use iconimage only
iconMask: true
Sencha Touch: when using tpl withExt.Component how to cause it to draw data
myCompent.update(dataObj)
Sencha Touch: how to request script fromoutside domain source ( cross domainrequest )
Ext.util.JSONP.request( {url: ....}
Sencha Touch: how to prevent caching ofquery requests
add a param with unique valueparams: { un:Math.random()}
Sencha Touch: how to get Map to center oncurrent location
useCurrentLocation: true
Sencha Touch: how to get access to currentcoordinates from Map
var coords = myMap.geo.coords
Sencha Touch: what object handles the userlocation
GeoLocation
Sencha Touch: what event doesGeoLocation fire when location is received
myMap.geo.on('update', function);
Sencha Touch: how to create a namespacefor scoping variables
Ext.namespace('Company.data')orExt.ns( )
Sencha Touch: how to add validation to amodel
validations : [ {type: ... }]
-
Sencha Touch: how to validate in Modelensuring a field has a value
validations: [{type: 'presence', name:'field_name' }]
Sencha Touch: how to connect one Model toanother
associations: [ { type: 'hasMany', model:'MyModel', name: 'Something' }]
Sencha Touch: how to set background colorof Panel
style: "background-color: white"
Sencha Touch: how to attach custom classesto Panel
cls: "name"
Sencha Touch: how to put data fields intoXTemplate
by using {varName} syntaxtpl:"{name}"
Sencha Touch: where are templateformatting helpers located in Ext classsystem
Ext.util.Format
Sencha Touch: how to include data inTemplate that has HTML characters
{name.htmlEncode}
Sencha Touch: syntax for callingExt.util.Format functions in Template
{myVar:utilFunction}or if it hasparameters{myVar:ellipsis(140, true)}
Sencha Touch: how to loop in XTemplate
Sencha Touch: type of quotes to use forXTemplate tpl tag definition
single quotes on outside with double quoteson inside''
Sencha Touch: in XTemplate, how to loop ondata items that are arrays
{.} for data value'','{.}',''
Sencha Touch: how to do conditionals inXTemplate
Sencha Touch: how to handle characters in XTemplate conditionals
replace with < and >
Sencha Touch: how to access loop index {#}index + 1Sencha Touch: how to insert pure JavaScriptinto XTemplate
{[ JavaScript here ]}
Sencha Touch: XTemplate - how to accesscurrent variable in inline JavaScript
{ [ values ] }
Sencha Touch: how to get parents of currentobject in inner loop
parent keyword{ parent.something }
Sencha Touch: how to do XTemplatefunctions without having to escape HTMLcharacters
Ext.Template( ) can take a config as lastparameter and functions can be defined in it{
myFunction: function() {}}Sencha Touch: how to call config functions inXTemplate
if="this.myFunction"using this keyword toaccess
-
Sencha Touch: XTemplate JavaScriptvariables for index and count of loop items
xindexxcount
Sencha Touch: class for hiding elements class="x-hidden-display"
Sencha Touch: how to load XTemplate fromDOM element
Ext.XTemplate.from("id")
Sencha Touch: how to turn off including alldefault icons
in sencha-touch.scss@include-default-icons:false;
Sencha Touch: how to include specific iconsin css
in sencha-touch.scss@includepictos-iconmask('action')
Sencha Touch: in what folder do icons gowhen you use them in sencha-touch.scsswith @include pictos-iconmask('name')
themes/images/default/pictos
Sencha Touch: how to change basic colorused in sencha theme
in sencha-touch.scss file$base-color:#...;$base-gradient: 'glossy';
Sencha Touch: tool included to create olderstyle CSS effects like rounded corners
sencha slice theme
Sencha Touch: how to attach a listener toDOM elements of Panel
listeners: { el: { tap: function() {} }}or can usebody instead of el
Sencha Touch: how to add event listener topanel after creation
myPanel.addListener( { } )
Sencha Touch: how to add a custom eventto a widget
this.addEvents('myevent')
Sencha Touch: how to trigger a customevent
this.fireEvent('myEvent', type, event)
Sencha Touch: how to make an eventlistener only respond to first event
single: true
Sencha Touch: how to put a delay betweenevent happening and firing of event
delay: 3000
Sencha Touch: how to group things in Listwidget
grouped: truegetGroupString:function(record) {}
Sencha Touch: how to sort records in Listview
sorters: 'fieldName'
Sencha Touch: how to get an index in List toallow Navigation
indexBar: true
Sencha Touch: how to include disclosureicon for List items
onItemDisclosure: true / function() {}
Sencha Touch: what type of store is neededfor NestedList
Ext.data.TreeStore
-
Sencha Touch: type of reader forExt.data.TreeStore
reader : { type: 'tree' }
Sencha Touch: function to respond to leafnode being tapped in NestedList
getDetailCard
Sencha Touch: how to change the field usedfor displaying an item
displayField
Sencha Touch: how to change NestedListdisplay using a function
getItemTextTpl
Sencha Touch: how to add badge to bottomToolbar
in configbadgeText: "1"
Sencha Touch: how to define a customTabBar ui style type
add to them .scss file@includesencha-toolbar-ui('myUI', base-color,
gradient, activeColor );