www.YoYoBrain.

com - Accelerators for Memory and Learning

Questions for Sencha Touch
Category: Default - (203 questions)
Sencha Touch: the base library for Sencha
Touch is ______
Sench Platform
Sencha Touch: widget which is a floating
modal panel that animates into view
Sheet
Sencha Touch: sheet widget is a subclass of
_____
Panel
Sencha Touch: purpose of ActionSheet
widget
subclass of Sheet that allows you to render
buttons in a vertical row, to ask user to make
a decision
Sencha Touch: ____ widget provides an
alert-like functionality
MessageBox
Sencha Touch: 3 provided data bound views DataViewListNestedList
Sencha Touch: widget that binds to a data
store and gives you 100% control on how
you will render your data
DataView
Sencha Touch: what is needed to stamp out
HTML fragments in DataView widget
XTemplate
Sencha Touch: widget that is data bound
and renders a native list view
List
Sencha Touch: data bound widget for
displaying nested lists
NestedList
Sencha Touch: widget that wraps Google
maps
Map
Sencha Touch: 4 tap related events tapstarttapendtapdoubletab
Sencha Touch: utility function that can be
used to configure Sencha Touch for use on
mobile device
Ext.setup( )
Sencha Touch: config option to run code
when browser is booted on Ext.setup
onReady
Sencha Touch: how to register application in
app.js
Ext.regApplication( { } );
Sencha Touch: how to run code after
registration 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 with
data
store: Ext.StoreMgr.get('MyStore')
Sencha Touch: how to create a view
extending List
MyApp.MyList = Ext.extend( Ext.List, {});
Sencha Touch: how to register a class with
Component Manager for lazy registration
Ext.reg('MyList', MyApp.MyList )
Sencha Touch: how to tell List how to render
data from store
itemTpl: '{lastName}, {firstName}'
Sencha Touch: widget for forms Ext.form.FormPanel
Sencha Touch: how to tell FormPanel the
default widget to use for form fields
defaultType: 'textfield'
Sencha Touch: how to tell application to run
in full screen mode
Ext.setup configfullscreen: true
Sencha Touch: how to set startup screen
during bootstrap for phone / tables
Ext.setup config optionstabletStartupScreen:
URLphoneStartupScreen: URL
Sencha Touch: how to set the icon for
general / phone / tablets
in Ext.setup configicon: URLtabletIcon:
URLphoneIcon: URL
Sencha Touch: how to config iOS top-most
status bar style
in Ext.setup configstatusBarStyle
Sencha Touch: how to set a model to local
storage
in Ext.regModel configproxy : { type:
'localstorage', ...}
Sencha Touch: how to set text for List when
there are no items to show
emptyText: 'Nothing to see here'
Sencha Touch: how to get a store to grab
data in a view
this.store.load()
Sencha Touch: how to control direction a
FormPanel scrolls in
scroll: 'vertical'
Sencha Touch: how to supply default config
options for FormPanel display items
defaults { labelWidth: 20}
Sencha Touch: how to add docked elements
to top / bottom / left / right of Panel
dockedItems: [ ]
Sencha Touch: how to create a toolbar for
top 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 index
from store
myStore.getAt(index)
Sencha Touch: how to create a new model
record
Ext.ModelMgr.create( { }, 'ModelName' )
Sencha Touch: how to get DataView to
update view
myView.updateRecord( record )
Sencha Touch: how to grab current data
being used in DataView
dataView.getRecord( )
Sencha Touch: ___ is the class all widgets
are based on
Ext.Component
Sencha Touch: 3 phases of component life
cycle
InitializationRenderDestruction
Sencha Touch: 1st thing that happens in
component initialization
the Component config options are applied
Sencha Touch: in Component initialization
phase, what happens after Component
config is applied
Base Events are registered
Sencha Touch: where do core events come
from in Ext.Component
Ext.Observable
Sencha Touch: how to set observers on
Component 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 components
registered and managed
Ext.ComponentMgr
Sencha Touch: how to assign an id to
component that only has to be unique within
a given container
use itemId instead of id
Sencha Touch: in component initialization
phase, what happens after unique id is
assigned
initComponent is executed
Sencha Touch: what happens after
initComponent is called in Component
initialization
Component is registered with
ComponentMgr
Sencha Touch: what happens next in
Component initialization after Component is
registered with ComponentMgr
plugins are registered
Sencha Touch: what triggers rendering of
Component automatically in initialization
phase
if renderTo or applyTo parameters have been
set
Sencha Touch: how to explicitly get a
Component 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 in
Component render phase
beforerender event is fired
Sencha Touch: how to prevent rendering of
Component 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 renderTo
versus applyTo when Component is
rendering
renderTo - adds div to container specified
and renders this component in divapplyTo -
puts this component's content inside
referenced div
Sencha Touch: what happens in Component
render phase after container is set
onRender is executed and all DOM elements
are inserted to hold custom content
Sencha Touch: in Component render phase
what 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 and
styling applied
Sencha Touch: 2 ways to inject custom
HTML content into Component
html - raw HTML stringcontentEl - points to
existing HTML's id and uses it
Sencha Touch: how to create custom
component content that generates by
iterating over data objects
data: [{ name: "Joe", age: 20 },......]tpl: '<tpl
for="."><div>(name) - (sex)</div></tpl>'
Sencha Touch: in Component render cycle,
what happens after custom content is
injected
afterRender method is executed. This is to
position the content properly.
Sencha Touch: in Component render cycle,
what happens after afterRender is executed
afterrender event is fired
Sencha Touch: what is the Lazy
Instantiation syntax for creating a component
var myPanel = { xtype: 'panel', html: "I'm
lazy"}Ext.ComponentMgr.create(myPanel).s
how();
Sencha Touch: ____ is behind the scenes
class that helps Component manage
children items
Container
Sencha Touch: 2 ways to add components
into a Component's container
.add( ).insert( )
Sencha Touch: how to grab a Component
with its itemId
Ext.getCmp('myName')
Sencha Touch: how to tell a component to
repaint itself
.doLayout()
Sencha Touch: how to remove a component
from another component's container
.remove( )
Sencha Touch: how to remove a component
without destroying it so you can put it
somewhere else
2nd option parameter, set to
falsemyPanel.remove(myField, false)
Sencha Touch: how to get a handle on direct
children of Component
getComponent( )can pass index, id or itemId
Sencha Touch: how to find direct child
based on CSS like selector
.child( )
Sencha Touch: how to find children at any
level of hierarchy using CSS like selectors
.down( ) - returns a single element.query( ) -
returns an array of matches
Sencha Touch: layout that sizes child item to
fit within the confines of its parent
FitLayoutlayout: 'fit'
Sencha Touch: 2 abstract layouts all other
layout's extend
ComponentLayoutContainerLayout
Sencha Touch: what is the default
component layout and its way of showing
content
AutoComponentLayoutstacks one
component over another
Sencha Touch: what is the default container's
layout and its effect
AutoContainerLayoutstacks one component
over another
Sencha Touch: what is Card layout Each sub component is full screen with only
one card shown at a time
Sencha Touch: how to manage which card
is shown in CardLayout at render time
activeItemconfig option
Sencha Touch: how to change which card is
shown in CardLayout component
setActiveIndex
Sencha Touch: 2 layouts to stack items
vertically and horizontally
HBoxVBox
Sencha Touch: when using hbox layout what
are config options to control horizontal /
vertical alignment
pack - horizontalalign - vertical
Sencha Touch: what are values for pack
when using hbox layout
start, center, end, justify
Sencha Touch: what are values for align
config option when using hbox layout
start, center, end, stretch
Sencha Touch: how to have content take up
weight amount of space in hbox layout
use flex configthe flex values are summed up
and each component is given weighted
spacing
Sencha Touch: how to dock items at outer
edges of Ext.Panel
configdockedItems: [ ]
Sencha Touch: when creating a dockedItem
container how to tell it where to place item
use config optiondock: 'top' , 'bottom', 'left',
'right'
Sencha Touch: how to add / remove docked
items from Panel
addDockedremoveDocked
Sencha Touch: how to force rendering of
Panel's docked items
doComponentLayout()
Sencha Touch: how to grab a docked item in
Panel
getDockedComponent( )
Sencha Touch: get a list of all currently
docked items
getDockedItems()
Sencha Touch: how to create a floating /
draggable Panel
config optionsdraggable: truefloating: true
Sencha Touch: how to position a floating
panel
floatingPanel.setPosition(50, 50)
Sencha Touch: how to turn on floating and
dragging after Component is instantiated
.setFloating( ).setDragging( )
Sencha Touch: how to make a floating
Component modal
config optionmodal: true
Sencha Touch: on modal Component how to
turn off default behavior of hiding when user
taps outside Component
hideOnMaskTap: false
Sencha Touch: how to set show / hide
animations on popup Panel
showAnimation: 'fade'hideAnimation: 'pop'
Sencha Touch: Component used to
generate space between components
xtype: 'spacer'
Sencha Touch: how to turn a button into icon config:iconCls: 'search'icon class - must map
to one of the icons included in SASS files
Sencha Touch: what is the default xtype for
items in a toolbar
'button'
Sencha Touch: how to set code to button
click in button Component
handler: function() {}
Sencha Touch: how to set what this keyword
will point to when Button handler is run
scope: myObject
Sencha Touch: how to set alignment of
button icon
iconAligncan be: 'top', 'bottom', 'right', 'left'
Sencha Touch: how to control visibility of
Button icon image
config optioniconMask
Sencha Touch: how to alter appearance of
buttons based on built in themes
configui: 'action'
Sencha Touch: TabPanel uses special
buttons called ____ located in a special
Toolbar called ____
TabTabBar
Sencha Touch: how to control tab switch
animation
cardSwitchAnimation
Sencha Touch: component type to hold form
widgets
FormPanel
Sencha Touch: xtype for form text fields 'textfield'
Sencha Touch: xtype for form select boxes selectfield
Sencha Touch: how to set drop down values
for 'selectfield' widget
options: [ { text: 'Arkansas', value: 'AR }, ...]
Sencha Touch: how to put instruction text in
Form text field
config optionplaceholder:
Sencha Touch: how to retrieve all values
from FormPanel
myForm.getValues()
Sencha Touch: how to turn on auto creation,
capitalization, and completion in Form text
fields
config optionsautoCorrect:
trueautoCapitalize: trueautoComplete: true
Sencha Touch: how to attach label to a
Form field widget
label: 'Name'
Sencha Touch: on Form text field what is
effect of optionrequired: true
puts an asterisk next to field but does not do
validation
Sencha Touch: xtypes for URL, number and
email fields
urlfieldnumberfieldemailfield
Sencha Touch: xtype for password fields passwordfield
Sencha Touch: xtype for Form text area textareafield
Sencha Touch: xtypes for Form check box
and radio buttons
checkboxradio
Sencha Touch: xtype for date selection field datepickerfield
Sencha Touch: xtype for number spinner
form field
spinnerfield
Sencha Touch: xtype that implements native
Sencha slider
sliderfield
Sencha Touch: xtype Form field that allows
toggling field like on / off switch
togglefield
Sencha Touch: how to create a Data Store
that pulls JSON from server
Ext.data.JsonStore { proxy: {}}
Sencha Touch: widget used to group Form
fields and has a title
xtype: 'fieldset'
Sencha Touch: when using Fieldset to group
Form items, 2 options to give user feedback
on what to do
title: 'Personal Information'instructions:
"Enter first and last name:"
Sencha Touch: syntax to submit a form to
server
myForm.submit( { url: 'form-submit', success:
function() {}, failure: function() {}});
Sencha Touch: format of data server must
return after Form submission
[success: true, msg: "Something clever" ]
Sencha Touch: how to grab a model with
name string
Ext.ModelMgr.getModel('myModel')
Sencha Touch: how to grab model data
when model has proxy
myModel.load( id, {success: function()
{},failure: function() {}});
Sencha Touch: how to put values in Form
from Model that has returned from load
myForm.loadRecord( theRecord )
Sencha Touch: how to put values in form
with the record in JavaScript object format
myForm.setValues(dataObject)
Sencha Touch: how to update underlying
model record being used on a form
myForm.updateRecord(myForm.record)
Sencha Touch: default layout type for a
Panel
layout: 'auto'
Sencha Touch: how does layout: 'auto'
handle vertical versus horizontal space
will take all horizontal space but only needed
vertical space to render
Sencha Touch: how to get Panel to take all
horizontal and vertical space
layout: 'fit'
Sencha Touch: 2 special widgets that
provide auto handling of card type layout
TabPanelCarousel
Sencha Touch: what is only layout allowed
for TabPanel
'card', applied automatically and any other
layout is ignored
Sencha Touch: how to control swiping
direction of Carousel
direction: 'vertical' / 'horizontal'
Sencha Touch: when using vbox, how to
have items take all horizontal space
align: 'stretch'
Sencha Touch: how to layout data from
Store in a DataView widget
tpl: new Ext.XTemplate( '<tpl
for=".">',....,'</tpl>')
Sencha Touch: what class handles
templating
Ext.Template
Sencha Touch: how to hook a store to
HTML5 sessionStorage object
proxy: { type: 'sessionStorage', id:
'mySessionStore' }
Sencha Touch: when does icon and
phoneStartupScreen images get used from
Ext.startup
if user saves page to home screen, the icon
is used for app and when launched from
there phoneStartupScreen image is used
during launch
Sencha Touch: how to grab access to
TabBar portion of TabPanel
myPanel.getTabBar()
Sencha Touch: how to tell button to use icon
image only
iconMask: true
Sencha Touch: when using tpl with
Ext.Component how to cause it to draw data
myCompent.update(dataObj)
Sencha Touch: how to request script from
outside domain source ( cross domain
request )
Ext.util.JSONP.request( {url: ....}
Sencha Touch: how to prevent caching of
query requests
add a param with unique valueparams: { un:
Math.random()}
Sencha Touch: how to get Map to center on
current location
useCurrentLocation: true
Sencha Touch: how to get access to current
coordinates from Map
var coords = myMap.geo.coords
Sencha Touch: what object handles the user
location
GeoLocation
Sencha Touch: what event does
GeoLocation fire when location is received
myMap.geo.on('update', function);
Sencha Touch: how to create a namespace
for scoping variables
Ext.namespace('Company.data')orExt.ns( )
Sencha Touch: how to add validation to a
model
validations : [ {type: ... }]
Sencha Touch: how to validate in Model
ensuring a field has a value
validations: [{type: 'presence', name:
'field_name' }]
Sencha Touch: how to connect one Model to
another
associations: [ { type: 'hasMany', model:
'MyModel', name: 'Something' }]
Sencha Touch: how to set background color
of Panel
style: "background-color: white"
Sencha Touch: how to attach custom classes
to Panel
cls: "name"
Sencha Touch: how to put data fields into
XTemplate
by using {varName} syntaxtpl:
"<p>{name}</p>"
Sencha Touch: where are template
formatting helpers located in Ext class
system
Ext.util.Format
Sencha Touch: how to include data in
Template that has HTML characters
{name.htmlEncode}
Sencha Touch: syntax for calling
Ext.util.Format functions in Template
{myVar:utilFunction}or if it has
parameters{myVar:ellipsis(140, true)}
Sencha Touch: how to loop in XTemplate <tpl for="."></tpl>
Sencha Touch: type of quotes to use for
XTemplate tpl tag definition
single quotes on outside with double quotes
on inside'<tpl for=".">'
Sencha Touch: in XTemplate, how to loop on
data items that are arrays
{.} for data value'<tpl
for="ArrayName">','{.}','</tpl>'
Sencha Touch: how to do conditionals in
XTemplate
<tpl if="name.length === 0" >
Sencha Touch: how to handle characters <
and > in XTemplate conditionals
replace with &lt; and &gt;
Sencha Touch: how to access loop index {#}index + 1
Sencha Touch: how to insert pure JavaScript
into XTemplate
{[ JavaScript here ]}
Sencha Touch: XTemplate - how to access
current variable in inline JavaScript
{ [ values ] }
Sencha Touch: how to get parents of current
object in inner loop
parent keyword{ parent.something }
Sencha Touch: how to do XTemplate
functions without having to escape HTML
characters
Ext.Template( ) can take a config as last
parameter and functions can be defined in it{
myFunction: function() {}}
Sencha Touch: how to call config functions in
XTemplate
if="this.myFunction"using this keyword to
access
Sencha Touch: XTemplate JavaScript
variables for index and count of loop items
xindexxcount
Sencha Touch: class for hiding elements class="x-hidden-display"
Sencha Touch: how to load XTemplate from
DOM element
Ext.XTemplate.from("id")
Sencha Touch: how to turn off including all
default icons
in sencha-touch.scss@include-default-icons:
false;
Sencha Touch: how to include specific icons
in css
in sencha-touch.scss@include
pictos-iconmask('action')
Sencha Touch: in what folder do icons go
when you use them in sencha-touch.scss
with @include pictos-iconmask('name')
themes/images/default/pictos
Sencha Touch: how to change basic color
used in sencha theme
in sencha-touch.scss file$base-color:
#...;$base-gradient: 'glossy';
Sencha Touch: tool included to create older
style CSS effects like rounded corners
sencha slice theme
Sencha Touch: how to attach a listener to
DOM elements of Panel
listeners: { el: { tap: function() {} }}or can use
body instead of el
Sencha Touch: how to add event listener to
panel after creation
myPanel.addListener( { } )
Sencha Touch: how to add a custom event
to a widget
this.addEvents('myevent')
Sencha Touch: how to trigger a custom
event
this.fireEvent('myEvent', type, event)
Sencha Touch: how to make an event
listener only respond to first event
single: true
Sencha Touch: how to put a delay between
event happening and firing of event
delay: 3000
Sencha Touch: how to group things in List
widget
grouped: truegetGroupString:
function(record) {}
Sencha Touch: how to sort records in List
view
sorters: 'fieldName'
Sencha Touch: how to get an index in List to
allow Navigation
indexBar: true
Sencha Touch: how to include disclosure
icon for List items
onItemDisclosure: true / function() {}
Sencha Touch: what type of store is needed
for NestedList
Ext.data.TreeStore
Sencha Touch: type of reader for
Ext.data.TreeStore
reader : { type: 'tree' }
Sencha Touch: function to respond to leaf
node being tapped in NestedList
getDetailCard
Sencha Touch: how to change the field used
for displaying an item
displayField
Sencha Touch: how to change NestedList
display using a function
getItemTextTpl
Sencha Touch: how to add badge to bottom
Toolbar
in configbadgeText: "1"
Sencha Touch: how to define a custom
TabBar ui style type
add to them .scss file@include
sencha-toolbar-ui('myUI', base-color,
gradient, activeColor );