]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | /*\r |
2 | * Shows how a Slider widget can be used with a ViewModel.\r | |
3 | */\r | |
4 | Ext.define('KitchenSink.view.binding.SliderWidget', {\r | |
5 | extend: 'Ext.panel.Panel',\r | |
6 | \r | |
7 | requires: [\r | |
8 | 'Ext.slider.Widget'\r | |
9 | ],\r | |
10 | xtype: 'binding-slider-form',\r | |
11 | \r | |
12 | //<example>\r | |
13 | exampleTitle: 'Slider and Form Fields',\r | |
14 | profiles: {\r | |
15 | classic: {\r | |
16 | height: 150,\r | |
17 | labelWidth: 125\r | |
18 | },\r | |
19 | neptune: {\r | |
20 | height: 165,\r | |
21 | labelWidth: 125\r | |
22 | },\r | |
23 | 'neptune-touch': {\r | |
24 | height: 220,\r | |
25 | labelWidth: 150\r | |
26 | }\r | |
27 | },\r | |
28 | //</example>\r | |
29 | \r | |
30 | width: 400,\r | |
31 | title: 'Color Components',\r | |
32 | bodyPadding: 10,\r | |
33 | \r | |
34 | viewModel: {\r | |
35 | data: {\r | |
36 | red: 255,\r | |
37 | green: 100,\r | |
38 | blue: 150\r | |
39 | }\r | |
40 | },\r | |
41 | \r | |
42 | layout: 'anchor',\r | |
43 | defaultType: 'fieldcontainer',\r | |
44 | defaults: {\r | |
45 | anchor: '0',\r | |
46 | labelWidth: 60,\r | |
47 | layout: {\r | |
48 | type: 'hbox',\r | |
49 | align: 'center'\r | |
50 | }\r | |
51 | },\r | |
52 | \r | |
53 | items: [{\r | |
54 | fieldLabel: 'Red',\r | |
55 | defaults: {\r | |
56 | maxValue: 255,\r | |
57 | minValue: 0\r | |
58 | },\r | |
59 | items: [\r | |
60 | { xtype: 'numberfield', width: 100, bind: '{red}', margin: '0 10 0 0' },\r | |
61 | { xtype: 'sliderwidget', flex: 1, bind: '{red}', publishOnComplete: false }\r | |
62 | ]\r | |
63 | },{\r | |
64 | fieldLabel: 'Green',\r | |
65 | defaults: {\r | |
66 | maxValue: 255,\r | |
67 | minValue: 0\r | |
68 | },\r | |
69 | items: [\r | |
70 | { xtype: 'numberfield', width: 100, bind: '{green}', margin: '0 10 0 0' },\r | |
71 | { xtype: 'sliderwidget', flex: 1, bind: '{green}', publishOnComplete: false }\r | |
72 | ]\r | |
73 | },{\r | |
74 | fieldLabel: 'Blue',\r | |
75 | defaults: {\r | |
76 | maxValue: 255,\r | |
77 | minValue: 0\r | |
78 | },\r | |
79 | items: [\r | |
80 | { xtype: 'numberfield', width: 100, bind: '{blue}', margin: '0 10 0 0' },\r | |
81 | { xtype: 'sliderwidget', flex: 1, bind: '{blue}', publishOnComplete: false }\r | |
82 | ]\r | |
83 | }, {\r | |
84 | xtype: 'component',\r | |
85 | height: 100,\r | |
86 | bind: {\r | |
87 | style: {\r | |
88 | backgroundColor: '#{red:hex(2)}{green:hex(2)}{blue:hex(2)}'\r | |
89 | }\r | |
90 | }\r | |
91 | }]\r | |
92 | });\r |