Ext JS quiz - Bryntum

handslustyInternet and Web Development

Dec 14, 2013 (3 years and 9 months ago)

183 views

EXT JS QUIZ

In all questions below, if not specially noted,
the

answer is supposed to use the ExtJS library
, however
if mentioned, pure JavaScript should be used.

You can skip the question #14, though solving it will be
a big plus.


1.

Given 2 arrays “a” and “b”, how would you:

a)

append all elements of “b” to “a”

b)

prepend all element
s

of ”b” to ”a”

c)

put all elements of ”b” in the middle of ”a” (assuming ”a” contains even number of elements)

In all points of this question (a, b, c) y
our code

should modify
existing

array “a”, not create a new
one.
Try to find the shortest code in pure JavaScript to solve this task.

Answer:



2.

Given an arbitrary array which potentially contains other
flat

arrays:


[ [1, 2, “a”], 3, “foo”, [ “bar”, {} ] ]

How do
you transform this into a completely flat array?

[ 1, 2, “a”, 3, “foo”, “bar”, {} ]


Try to find the shortest code
in pure JavaScript
to solve this task.

Answer:




3.

Write a single RegExp

to extract the Ext JS version identifier (e.g. “3.4.0”, or “4.1.1
-
rc
-
1”) out of
the URLs below.
Note, that
URLs potentially can point to some other resource

with similar URL (for
example
ext
-
all
-
this
-
is
-
not
-
ext
.js
)
, in which case the RegExp should not mat
ch.


http://bryntum.com/examples
-
1.2.3/advanced/advanced.html

http://bryntum.com/doc/1.2.3/foo/bar.html

http://cdn.sencha.io/ext
-
3.4.0/ext
-
all
-
debug.js

http://cdn.sencha.io/ext
-
3.4.0
-
beta
-
1/ext
-
all.js

http://cdn.sencha.io/extjs
-
4.1.0
-
rc
-
1/ext
-
all
-
debug.js

http://bryntum.com/
examples
for
/
extjs
-
4.1.1
/
foo
/
bar
.html

http://bryntum.com/library/extjs
-
4.1.2/ext
-
all
-
debug.js

http://bryntum.com/library/extjs
-
10.11.21/ext
-
all
-
debug.js

http://bryntum.com/
library
/
extjs
-
4.1.2
/ext
-
all
-
this
-
is
-
not
-
ext
.js



Answer:




4.

Write a RegExp to extract the
x, y, z
offset values from th
e
s
e

CSS style declarations:


translate3d(0, 0, 0)

translate3d(0,
0,

0)

translate3d(1px, 10px, 100px)

translate3d(
-
1px,
-
10px,
-
100px)


The x, y, z offsets should be numbered as 1, 2, 3 in the RegExp match object.

Strings of other
formats should not match.


5.

You are given a following JSON tree structure:


var tree = {


id : '1',




children : [


{


id

: '2',




children : [


{


id : '5',


children : [


{


id : '9'


}



]


},


{


id : '6'


}


]


},


{


id : '3',




children : [


{


id : '7'


},


{


id : '8'


}


]


},


{


id : '4'


}


]

}

Write the iterator function

using pure JavaScript
, which will call the provided “func” for each

node in
the tree, so the following console output will be correct:



var iterator = function (root, func) {


...

}


iterator(tree, function (node) {


console.log(node.id)

})


>>Output:

1

2

3

4

5

6

7

8

9


Answer:


6.

You need to add a visual effect when the user is hovering the mouse over the
<li>

items in
the list below, how do you solve it?

The <ul> list contains 10 items.



<ul class=”
somelist
”>


<li>one</li>


<li>two</li>


<li>three</li>


...

</ul>


Answer:




7.

What is wrong with the following Ext JS 4 class definition:



Ext.define(
'MyPanel'
, {


extend :
'Ext.Panel'
,



sayHello :
function
() { console.log(
'Hello world'
); },



tbar : [


{


text :
'Click to say hello'
,


handler :
this
.sayHello,


scope :
this


}


],


... // stores, columns defined below

});


Answer:




Corrected class definition:




8.

The
hypothetical

grid class below
has special attribute “rowColors” and
can update it
dynamically using

setRowColor

.
What is problematic with th
is implementation?



Ext.define(
'MyGrid'
, {


extend :
'Ext.grid.Panel'
,



//
Row coloring for normal and alternate rows


rowC
olors : {


normal


: ‘
blue
’,


alternate

: ‘
white



},



// Updates the grid row colors


setRowColor
s

: function(
normal, alternate
) {


this
.
rowColors
.
normal

=
normal
;


this
.rowColors.alternate = alternate;



this
.getView().refresh();


}
,


...

});


Answer:




Corrected class definition:




















9.

What is wrong with the following Ext JS 4 class definition:


Ext.define('ReusableButton', {


extend : 'Ext.Button',




initComponent :
function
() {


this
.id = ‘reusable
-
button’; // So we

can use Ext.getCmp


this
.callParent();


}

});


Ext.define('ReusablePanel', {


extend : 'Ext.Panel',



initComponent :
function
() {


this
.buttons = [


new

ReusableButton({


text : ‘Click me’


})


];


this
.callParent();


},


...

})


Answer:




Corrected class definition:



10.

What is wrong with the following Ext JS snippet:



var myEl = Ext.fly(

myDiv

);


myEl.highlight();

// Show user where the element is


myEl.setHeight(200);



// Some other code


// …


var panel = new Ext.Panel();


panel.render(document.body);



myEl.setWidth
(
200
);


Answer:









11.

One of our clients reports an
exception
using our Scheduler

component (which supports both
TreeStore

and the normal flat Store)

in his application. He points to this line in our source code, what
could be the issue?

Assume that “this” reference contains a correct reference to a Scheduler with the
flat store.



var

isTree =
this
.store
instanceof

Ex
t.data.TreeStore;


Answer and improved solution:



12.

List
all
the potential issues

with the following Ext JS 4 plugin definition:


Ext.define('MyGridPlugin', {



init :
function
(grid) {


grid.getStore().on({


load : function() {


grid.el.highlight();
// Some cool fx to bring attention to the grid


}


});


}

});


// Let’s try it out

var myGrid =
new
Ext.grid.Panel({


renderTo : document.body,


store : someStore,


plugins :
new

MyGridPlugin()

});


someStore.load();


Answer:




Corrected plugin definition:




13.

Designing complex and re
-
usable ExtJS
UI
widgets (potentially consisting from other re
-
usable
widgets),
what will be your design principles

/ best practices / etc
?


Answer:





14.

You are given an input array of the intervals on the number axis. For each interval a start
point, end point and some “value” is known. Write a function in pure JavaScript, that

will transform
the input array to another array of the objects with the same structure. Function should sum the
“values” of all intersecting intervals and include in the result all intervals with
different

sum of
“values”. See the exampl
es of input and
expected output. Note, that start and end point coordinates
may have fractional part.
var

input

=

[{


start

:

1,


end

:

2
,




value

:

1

},

{


start

:

2,


end

:

3,




value

:

1

}]


var

output

=

[{


start

:

1,


end

:

3,




value

:

1

}]














var

input

=

[{


start

:

1,


end

:

3,




value

:

1

},

{


start

:

2,


end

:

4,




value

:

1

}]


var

output

=

[{


start

:

1,


end

:

2,




value

:

1

},

{


start

:

2,


end

:

3,




value

:

2

},

{


start

:

3,


end

:

4,




value

:

1

}]










var

input

=

[{


start

:

1,


end

:

3,




value

:

1

},

{


start

:

2,


end

:

4,




value

:

1

},

{


start

:

2,


end

:

5,




value

:

2

},

{


start

:

4,


end

:

5,




value

:

1

}]



var

output

=

[{


start

:

1,


end

:

2,




value

:

1

},

{


start

:

2,


end

:

3,




value

:

4

},

{


start

:

3,


end

:

5,




value

:

3

}]



Answer: