Ext-Menu-日期控件过长
Code
1<%
2/**
3 * @author lzb
4 * Created on 2008-12-18
5 * 练习使用Ext-menu
6 *
7 */
8 %>
9 <%@ page contentType="text/html; charset=UTF-8" %>
10<html>
11<head>
12<title>练习使用Ext-menu</title>
13 <!-- Ext css -->
14 <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/../resources/css/ext-all.css"/>
15 <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/examples.css"/>
16 <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/menu/menus.css" />
17
18 <!-- Ext js -->
19 <script type="text/javascript" src="http://www.cnblogs.com/../adapter/ext/ext-base.js"></script>
20 <script type="text/javascript" src="http://www.cnblogs.com/../ext-all.js"></script>
21 <script type="text/javascript" src="http://www.cnblogs.com/../source/locale/ext-lang-zh_CN.js"></script>
22 <script type="text/javascript" src="http://www.cnblogs.com/examples.js"></script>
23 <script type="text/javascript">
24 Ext.onReady(function(){
25 //关于日期控件(DateField)在FireFox3下过长的解决办法
26 //Ext.override(Ext.menu.DateMenu,{
27 // render : function(){
28 // Ext.menu.DateMenu.superclass.render.call(this);
29 // if(Ext.isGecko){
30 // this.picker.el.dom.childNodes[0].style.width = '178px';
31 // this.picker.el.dom.style.width = '178px';
32 // }
33 // }
34 //});
35 //或者CSS中明确设置它的宽度
36 //
37 //.x-date-middle {
38 //padding-top:2px;padding-bottom:2px;
39 //width:130px; /* FF3 */
40 //}
41 Ext.QuickTips.init();
42 //必须用new
43 //我在写得时候掉了一个new;大小写问题 ColorMenu,这个对象中c必须大写
44 var dateMenu = new Ext.menu.DateMenu({
45 handler:function(dp,date){
46 Ext.example.msg('选择日期','你选择了日期{0}.',date.format('Y-m-d'));
47 }
48 });
49 var colorMenu = new Ext.menu.ColorMenu({
50 handler:function(cm,color){
51 Ext.example.msg('选择颜色','你选择了颜色{0}.',color);
52 }
53 });
54 //var menu = new Ext.menu.Menu 掉了一个new
55 //checked 我把单词写错,害得checkItem方法不能显示效果
56 var menu = new Ext.menu.Menu({
57 id:'mainBar',
58 items:[{
59 text:'喜欢排骨汤',
60 checkHandler:checkItem,
61 checked:true
62 },{
63 text:'喜欢杂江面',
64 checked:true,
65 checkHandler:checkItem
66
67 },'-',{
68 text:'选择日期',
69 iconCls:'calendar',
70 menu:dateMenu
71 },{
72 text:'选择颜色',
73 iconCls:'blist',
74 menu:colorMenu
75 }]
76 });
77 var toolBar = new Ext.Toolbar();
78 //render和add是有先后顺序的,否则: this.tr is undefined
79 toolBar.render("bar");
80 toolBar.add({
81 text:'主菜单',
82 iconCls:'bmenu',
83 menu:menu
84 });
85
86 function checkItem(item,checked){
87 Ext.example.msg('是否选择','你{0}了{1}',checked ? 'checked' : 'unchecked',item.text);
88 }
89
90 });
91 </script>
92</head>
93<body>
94 <div id="container">
95 <div id="bar"></div>
96 </div>
97</body>
98</HTML>
99
1<%
2/**
3 * @author lzb
4 * Created on 2008-12-18
5 * 练习使用Ext-menu
6 *
7 */
8 %>
9 <%@ page contentType="text/html; charset=UTF-8" %>
10<html>
11<head>
12<title>练习使用Ext-menu</title>
13 <!-- Ext css -->
14 <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/../resources/css/ext-all.css"/>
15 <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/examples.css"/>
16 <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/menu/menus.css" />
17
18 <!-- Ext js -->
19 <script type="text/javascript" src="http://www.cnblogs.com/../adapter/ext/ext-base.js"></script>
20 <script type="text/javascript" src="http://www.cnblogs.com/../ext-all.js"></script>
21 <script type="text/javascript" src="http://www.cnblogs.com/../source/locale/ext-lang-zh_CN.js"></script>
22 <script type="text/javascript" src="http://www.cnblogs.com/examples.js"></script>
23 <script type="text/javascript">
24 Ext.onReady(function(){
25 //关于日期控件(DateField)在FireFox3下过长的解决办法
26 //Ext.override(Ext.menu.DateMenu,{
27 // render : function(){
28 // Ext.menu.DateMenu.superclass.render.call(this);
29 // if(Ext.isGecko){
30 // this.picker.el.dom.childNodes[0].style.width = '178px';
31 // this.picker.el.dom.style.width = '178px';
32 // }
33 // }
34 //});
35 //或者CSS中明确设置它的宽度
36 //
37 //.x-date-middle {
38 //padding-top:2px;padding-bottom:2px;
39 //width:130px; /* FF3 */
40 //}
41 Ext.QuickTips.init();
42 //必须用new
43 //我在写得时候掉了一个new;大小写问题 ColorMenu,这个对象中c必须大写
44 var dateMenu = new Ext.menu.DateMenu({
45 handler:function(dp,date){
46 Ext.example.msg('选择日期','你选择了日期{0}.',date.format('Y-m-d'));
47 }
48 });
49 var colorMenu = new Ext.menu.ColorMenu({
50 handler:function(cm,color){
51 Ext.example.msg('选择颜色','你选择了颜色{0}.',color);
52 }
53 });
54 //var menu = new Ext.menu.Menu 掉了一个new
55 //checked 我把单词写错,害得checkItem方法不能显示效果
56 var menu = new Ext.menu.Menu({
57 id:'mainBar',
58 items:[{
59 text:'喜欢排骨汤',
60 checkHandler:checkItem,
61 checked:true
62 },{
63 text:'喜欢杂江面',
64 checked:true,
65 checkHandler:checkItem
66
67 },'-',{
68 text:'选择日期',
69 iconCls:'calendar',
70 menu:dateMenu
71 },{
72 text:'选择颜色',
73 iconCls:'blist',
74 menu:colorMenu
75 }]
76 });
77 var toolBar = new Ext.Toolbar();
78 //render和add是有先后顺序的,否则: this.tr is undefined
79 toolBar.render("bar");
80 toolBar.add({
81 text:'主菜单',
82 iconCls:'bmenu',
83 menu:menu
84 });
85
86 function checkItem(item,checked){
87 Ext.example.msg('是否选择','你{0}了{1}',checked ? 'checked' : 'unchecked',item.text);
88 }
89
90 });
91 </script>
92</head>
93<body>
94 <div id="container">
95 <div id="bar"></div>
96 </div>
97</body>
98</HTML>
99