[extjs.git] / extjs / examples / classic / toolbar / vertical-toolbars.js

Ext.require([\r
    'Ext.panel.*',\r
    'Ext.toolbar.*',\r
    'Ext.button.*',\r
    'Ext.container.ButtonGroup',\r
    'Ext.layout.container.Table',\r
    'Ext.tip.QuickTipManager'\r
]);\r
\r
Ext.onReady(function() {\r
    var fakeHTML = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";\r
\r
    Ext.QuickTips.init();\r
\r
    // The default dockedItem weights have TLRB order, but TBLR matches border layout:\r
    Ext.panel.Panel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };\r
\r
    var SamplePanel = Ext.extend(Ext.Panel, {\r
        width    : 500,\r
        height   : 250,\r
        style    : 'margin-top:15px',\r
        bodyStyle: 'padding:10px',\r
        renderTo : Ext.getBody(),\r
        html     : fakeHTML,\r
        scrollable: true\r
    });\r
    \r
    new SamplePanel({\r
        title: 'Standard (lbar)',\r
        lbar: [{\r
                iconCls: 'add16',\r
                tooltip: 'Button 1'\r
            },\r
            '-',\r
            {\r
                iconCls: 'add16',\r
                tooltip: {\r
                    text: 'Button 2',\r
                    anchor: 'left'\r
                }\r
            },{\r
                iconCls: 'add16'\r
            },{\r
                iconCls: 'add16'\r
            },\r
            '-',\r
            {\r
                iconCls: 'add16'\r
            }\r
        ]\r
    });\r
\r
    new SamplePanel({\r
        title: 'Standard w/Split Buttons (rbar)',\r
        rbar: [{\r
                iconCls: 'add16',\r
                menu: [{text: 'Menu Button 1'}]\r
            },'-',{\r
                iconCls: 'add16',\r
                menu: [{text: 'Cut Menu Item'}]\r
            },{\r
                iconCls: 'add16'\r
            },{\r
                iconCls: 'add16',\r
                menu: [{text: 'Paste Menu Item'}]\r
            },'-',{\r
                iconCls: 'add16'\r
            }\r
        ]\r
    });\r
\r
    new SamplePanel({\r
        title: 'Standard w/Short Text',\r
        lbar: [{\r
                xtype:'splitbutton',\r
                text: 'Menu',\r
                iconCls: 'add16',\r
                menu: [{text: 'Menu Button 1'}]\r
            },\r
            //'-',\r
            {\r
                xtype:'splitbutton',\r
                text: 'Cut',\r
                textAlign: 'left',\r
                iconCls: 'add16',\r
                menu: [{text: 'Cut Menu Item'}]\r
            },{\r
                text: 'Copy',\r
                textAlign: 'left',\r
                iconCls: 'add16'\r
            },{\r
                text: 'Paste',\r
                textAlign: 'left',\r
                iconCls: 'add16',\r
                menu: [{text: 'Paste Menu Item'}]\r
            },\r
            //'-',\r
            {\r
                text: 'Format',\r
                textAlign: 'left',\r
                iconCls: 'add16'\r
            }\r
        ]\r
    });\r
\r
    new SamplePanel({\r
        title: 'Standard w/Long Text',\r
        rbar: [{\r
                xtype:'splitbutton',\r
                text: 'Menu Button',\r
                iconCls: 'add16',\r
                textAlign: 'left',\r
                menu: [{text: 'Menu Button 1'}]\r
            },'-',{\r
                xtype:'splitbutton',\r
                text: 'Cut Selection',\r
                iconCls: 'add16',\r
                textAlign: 'left',\r
                menu: [{text: 'Cut Menu Item'}]\r
            },{\r
                text: 'Copy Selection',\r
                textAlign: 'left',\r
                iconCls: 'add16'\r
            },{\r
                text: 'Paste',\r
                iconCls: 'add16',\r
                textAlign: 'left',\r
                menu: [{text: 'Paste Menu Item'}]\r
            },'-',{\r
                text: 'Format',\r
                textAlign: 'left',\r
                iconCls: 'add16'\r
            }\r
        ]\r
    });\r
\r
    new SamplePanel({\r
        title: 'One of Everything',\r
        tbar: [{\r
                iconCls: 'add16',\r
                text: 'Button 1'\r
            },\r
            '-',\r
            {\r
                iconCls: 'add16',\r
                text: 'Button 2'\r
            },{\r
                iconCls: 'add16'\r
            },{\r
                iconCls: 'add16'\r
            },\r
            '-',\r
            {\r
                iconCls: 'add16'\r
            }\r
        ],\r
        lbar: [{\r
                iconCls: 'add16',\r
                tooltip: 'Button 1'\r
            },\r
            '-',\r
            {\r
                iconCls: 'add16',\r
                tooltip: {\r
                    text: 'Button 2',\r
                    anchor: 'left'\r
                }\r
            },{\r
                iconCls: 'add16'\r
            },{\r
                iconCls: 'add16'\r
            },\r
            '-',\r
            {\r
                iconCls: 'add16'\r
            }\r
        ],\r
        rbar: [{\r
                iconCls: 'add16',\r
                tooltip: 'Button 1'\r
            },\r
            '-',\r
            {\r
                iconCls: 'add16',\r
                tooltip: {\r
                    text: 'Button 2',\r
                    anchor: 'left'\r
                }\r
            },{\r
                iconCls: 'add16'\r
            },{\r
                iconCls: 'add16'\r
            },\r
            '-',\r
            {\r
                iconCls: 'add16'\r
            }\r
        ],\r
        bbar: [{\r
                iconCls: 'add16',\r
                text: 'Button 3'\r
            },\r
            '-',\r
            {\r
                iconCls: 'add16',\r
                text: 'Button 4'\r
            },{\r
                iconCls: 'add16'\r
            },{\r
                iconCls: 'add16'\r
            },\r
            '-',\r
            {\r
                iconCls: 'add16',\r
                text: 'Button 5',\r
                menu: [\r
                    { text: "Menu Item 1" }\r
                ]\r
            }\r
        ]\r
    });\r
});
Commit	Line	Data
6527f429 DM	1	Ext.require([\r
	2	'Ext.panel.*',\r
	3	'Ext.toolbar.*',\r
	4	'Ext.button.*',\r
	5	'Ext.container.ButtonGroup',\r
	6	'Ext.layout.container.Table',\r
	7	'Ext.tip.QuickTipManager'\r
	8	]);\r
	9	\r
	10	Ext.onReady(function() {\r
	11	var fakeHTML = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";\r
	12	\r
	13	Ext.QuickTips.init();\r
	14	\r
	15	// The default dockedItem weights have TLRB order, but TBLR matches border layout:\r
	16	Ext.panel.Panel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };\r
	17	\r
	18	var SamplePanel = Ext.extend(Ext.Panel, {\r
	19	width : 500,\r
	20	height : 250,\r
	21	style : 'margin-top:15px',\r
	22	bodyStyle: 'padding:10px',\r
	23	renderTo : Ext.getBody(),\r
	24	html : fakeHTML,\r
	25	scrollable: true\r
	26	});\r
	27	\r
	28	new SamplePanel({\r
	29	title: 'Standard (lbar)',\r
	30	lbar: [{\r
	31	iconCls: 'add16',\r
	32	tooltip: 'Button 1'\r
	33	},\r
	34	'-',\r
	35	{\r
	36	iconCls: 'add16',\r
	37	tooltip: {\r
	38	text: 'Button 2',\r
	39	anchor: 'left'\r
	40	}\r
	41	},{\r
	42	iconCls: 'add16'\r
	43	},{\r
	44	iconCls: 'add16'\r
	45	},\r
	46	'-',\r
	47	{\r
	48	iconCls: 'add16'\r
	49	}\r
	50	]\r
	51	});\r
	52	\r
	53	new SamplePanel({\r
	54	title: 'Standard w/Split Buttons (rbar)',\r
	55	rbar: [{\r
	56	iconCls: 'add16',\r
	57	menu: [{text: 'Menu Button 1'}]\r
	58	},'-',{\r
	59	iconCls: 'add16',\r
	60	menu: [{text: 'Cut Menu Item'}]\r
	61	},{\r
	62	iconCls: 'add16'\r
	63	},{\r
	64	iconCls: 'add16',\r
65	menu: [{text: 'Paste Menu Item'}]\r
66	},'-',{\r
67	iconCls: 'add16'\r
68	}\r
69	]\r
70	});\r
71	\r
72	new SamplePanel({\r
73	title: 'Standard w/Short Text',\r
74	lbar: [{\r
75	xtype:'splitbutton',\r
76	text: 'Menu',\r
77	iconCls: 'add16',\r
78	menu: [{text: 'Menu Button 1'}]\r
79	},\r
80	//'-',\r
81	{\r
82	xtype:'splitbutton',\r
83	text: 'Cut',\r
84	textAlign: 'left',\r
85	iconCls: 'add16',\r
86	menu: [{text: 'Cut Menu Item'}]\r
87	},{\r
88	text: 'Copy',\r
89	textAlign: 'left',\r
90	iconCls: 'add16'\r
91	},{\r
92	text: 'Paste',\r
93	textAlign: 'left',\r
94	iconCls: 'add16',\r
95	menu: [{text: 'Paste Menu Item'}]\r
96	},\r
97	//'-',\r
98	{\r
99	text: 'Format',\r
100	textAlign: 'left',\r
101	iconCls: 'add16'\r
102	}\r
103	]\r
104	});\r
105	\r
106	new SamplePanel({\r
107	title: 'Standard w/Long Text',\r
108	rbar: [{\r
109	xtype:'splitbutton',\r
110	text: 'Menu Button',\r
111	iconCls: 'add16',\r
112	textAlign: 'left',\r
113	menu: [{text: 'Menu Button 1'}]\r
114	},'-',{\r
115	xtype:'splitbutton',\r
116	text: 'Cut Selection',\r
117	iconCls: 'add16',\r
118	textAlign: 'left',\r
119	menu: [{text: 'Cut Menu Item'}]\r
120	},{\r
121	text: 'Copy Selection',\r
122	textAlign: 'left',\r
123	iconCls: 'add16'\r
124	},{\r
125	text: 'Paste',\r
126	iconCls: 'add16',\r
127	textAlign: 'left',\r
128	menu: [{text: 'Paste Menu Item'}]\r
129	},'-',{\r
130	text: 'Format',\r
131	textAlign: 'left',\r
132	iconCls: 'add16'\r
133	}\r
134	]\r
135	});\r
136	\r
137	new SamplePanel({\r
138	title: 'One of Everything',\r
139	tbar: [{\r
140	iconCls: 'add16',\r
141	text: 'Button 1'\r
142	},\r
143	'-',\r
144	{\r
145	iconCls: 'add16',\r
146	text: 'Button 2'\r
147	},{\r
148	iconCls: 'add16'\r
149	},{\r
150	iconCls: 'add16'\r
151	},\r
152	'-',\r
153	{\r
154	iconCls: 'add16'\r
155	}\r
156	],\r
157	lbar: [{\r
158	iconCls: 'add16',\r
159	tooltip: 'Button 1'\r
160	},\r
161	'-',\r
162	{\r
163	iconCls: 'add16',\r
164	tooltip: {\r
165	text: 'Button 2',\r
166	anchor: 'left'\r
167	}\r
168	},{\r
169	iconCls: 'add16'\r
170	},{\r
171	iconCls: 'add16'\r
172	},\r
173	'-',\r
174	{\r
175	iconCls: 'add16'\r
176	}\r
177	],\r
178	rbar: [{\r
179	iconCls: 'add16',\r
180	tooltip: 'Button 1'\r
181	},\r
182	'-',\r
183	{\r
184	iconCls: 'add16',\r
185	tooltip: {\r
186	text: 'Button 2',\r
187	anchor: 'left'\r
188	}\r
189	},{\r
190	iconCls: 'add16'\r
191	},{\r
192	iconCls: 'add16'\r
193	},\r
194	'-',\r
195	{\r
196	iconCls: 'add16'\r
197	}\r
198	],\r
199	bbar: [{\r
200	iconCls: 'add16',\r
201	text: 'Button 3'\r
202	},\r
203	'-',\r
204	{\r
205	iconCls: 'add16',\r
206	text: 'Button 4'\r
207	},{\r
208	iconCls: 'add16'\r
209	},{\r
210	iconCls: 'add16'\r
211	},\r
212	'-',\r
213	{\r
214	iconCls: 'add16',\r
215	text: 'Button 5',\r
216	menu: [\r
217	{ text: "Menu Item 1" }\r
218	]\r
219	}\r
220	]\r
221	});\r
222	});