]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | /**\r |
2 | * Demonstrates a the docking of toolbars in each dimension on a panel.\r | |
3 | */\r | |
4 | Ext.define('KitchenSink.view.toolbar.DockedToolbars', {\r | |
5 | extend: 'Ext.container.Container',\r | |
6 | xtype: 'docked-toolbars',\r | |
7 | id: 'docked-toolbars',\r | |
8 | \r | |
9 | //<example>\r | |
10 | exampleTitle: 'Docked Toolbars',\r | |
11 | profiles: {\r | |
12 | classic: {\r | |
13 | listCls: 'list',\r | |
14 | closeCls: 'close',\r | |
15 | pasteCls: 'paste',\r | |
16 | editCls: 'edit'\r | |
17 | },\r | |
18 | neptune: {\r | |
19 | listGlyph: 61,\r | |
20 | closeGlyph: 88,\r | |
21 | pasteGlyph: 70,\r | |
22 | editGlyph: 47\r | |
23 | }\r | |
24 | },\r | |
25 | //</example>\r | |
26 | layout: {\r | |
27 | type: 'table',\r | |
28 | columns: 2,\r | |
29 | tdAttrs: { style: 'padding: 10px;' }\r | |
30 | },\r | |
31 | \r | |
32 | defaults: {\r | |
33 | xtype: 'panel',\r | |
34 | height: 220,\r | |
35 | width: 220,\r | |
36 | bodyPadding: 10\r | |
37 | },\r | |
38 | width: 480,\r | |
39 | \r | |
40 | initComponent: function() {\r | |
41 | this.items = [\r | |
42 | {\r | |
43 | title: 'Top',\r | |
44 | xtype: 'panel',\r | |
45 | dockedItems: [{\r | |
46 | dock: 'top',\r | |
47 | xtype: 'toolbar',\r | |
48 | items: [{\r | |
49 | iconCls: this.profileInfo.listCls,\r | |
50 | glyph: this.profileInfo.listGlyph,\r | |
51 | xtype: 'button'\r | |
52 | }, '-', {\r | |
53 | iconCls: this.profileInfo.closeCls,\r | |
54 | glyph: this.profileInfo.closeGlyph,\r | |
55 | xtype: 'button'\r | |
56 | }, {\r | |
57 | iconCls: this.profileInfo.pasteCls,\r | |
58 | glyph: this.profileInfo.pasteGlyph,\r | |
59 | xtype: 'button'\r | |
60 | }, '-', {\r | |
61 | iconCls: this.profileInfo.editCls,\r | |
62 | glyph: this.profileInfo.editGlyph,\r | |
63 | xtype: 'button'\r | |
64 | }]\r | |
65 | }],\r | |
66 | html: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'\r | |
67 | },\r | |
68 | {\r | |
69 | title: 'Right',\r | |
70 | xtype: 'panel',\r | |
71 | dockedItems: [{\r | |
72 | dock: 'right',\r | |
73 | xtype: 'toolbar',\r | |
74 | items: [{\r | |
75 | iconCls: this.profileInfo.listCls,\r | |
76 | glyph: this.profileInfo.listGlyph,\r | |
77 | xtype: 'button'\r | |
78 | }, '-', {\r | |
79 | iconCls: this.profileInfo.closeCls,\r | |
80 | glyph: this.profileInfo.closeGlyph,\r | |
81 | xtype: 'button'\r | |
82 | }, {\r | |
83 | iconCls: this.profileInfo.pasteCls,\r | |
84 | glyph: this.profileInfo.pasteGlyph,\r | |
85 | xtype: 'button'\r | |
86 | }, '-', {\r | |
87 | iconCls: this.profileInfo.editCls,\r | |
88 | glyph: this.profileInfo.editGlyph,\r | |
89 | xtype: 'button'\r | |
90 | }]\r | |
91 | }],\r | |
92 | html: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'\r | |
93 | },\r | |
94 | {\r | |
95 | title: 'Left',\r | |
96 | xtype: 'panel',\r | |
97 | dockedItems: [{\r | |
98 | dock: 'left',\r | |
99 | xtype: 'toolbar',\r | |
100 | items: [{\r | |
101 | iconCls: this.profileInfo.listCls,\r | |
102 | glyph: this.profileInfo.listGlyph,\r | |
103 | xtype: 'button'\r | |
104 | }, '-', {\r | |
105 | iconCls: this.profileInfo.closeCls,\r | |
106 | glyph: this.profileInfo.closeGlyph,\r | |
107 | xtype: 'button'\r | |
108 | }, {\r | |
109 | iconCls: this.profileInfo.pasteCls,\r | |
110 | glyph: this.profileInfo.pasteGlyph,\r | |
111 | xtype: 'button'\r | |
112 | }, '-', {\r | |
113 | iconCls: this.profileInfo.editCls,\r | |
114 | glyph: this.profileInfo.editGlyph,\r | |
115 | xtype: 'button'\r | |
116 | }]\r | |
117 | }],\r | |
118 | html: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'\r | |
119 | },\r | |
120 | {\r | |
121 | title: 'Bottom',\r | |
122 | xtype: 'panel',\r | |
123 | dockedItems: [{\r | |
124 | dock: 'bottom',\r | |
125 | xtype: 'toolbar',\r | |
126 | items: [{\r | |
127 | iconCls: this.profileInfo.listCls,\r | |
128 | glyph: this.profileInfo.listGlyph,\r | |
129 | xtype: 'button'\r | |
130 | }, '-', {\r | |
131 | iconCls: this.profileInfo.closeCls,\r | |
132 | glyph: this.profileInfo.closeGlyph,\r | |
133 | xtype: 'button'\r | |
134 | }, {\r | |
135 | iconCls: this.profileInfo.pasteCls,\r | |
136 | glyph: this.profileInfo.pasteGlyph,\r | |
137 | xtype: 'button'\r | |
138 | }, '-', {\r | |
139 | iconCls: this.profileInfo.editCls,\r | |
140 | glyph: this.profileInfo.editGlyph,\r | |
141 | xtype: 'button'\r | |
142 | }]\r | |
143 | }],\r | |
144 | html: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'\r | |
145 | }\r | |
146 | ];\r | |
147 | \r | |
148 | this.callParent();\r | |
149 | }\r | |
150 | }); |