filter.html
[code]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>查询</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="filter.js"></script>
</head>
<body>
<input type="button" id="show-dialog-btn" value="过滤条件" /><br /><br />
<div id="filter-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">过滤条件</div>
</div>
</body>
</html>
[/code]
filter.js
[code]
var Filter = function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var dialog, showBtn;
var toggleTheme = function(){
Ext.get(document.body, true).toggleClass('xtheme-gray');
};
return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
showBtn.on('click', this.showDialog, this);
},
showDialog : function(){
if(!dialog){
dialog = new Ext.LayoutDialog("filter-dlg", {
modal:true,
width:600,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false
}
});
var layout = dialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel(Ext.id(), {autoCreate:true, background:true}));
layout.endUpdate();
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('确定', dialog.hide, dialog);
dialog.addButton('重填', dialog.hide, dialog);
var filter = new Ext.form.Form({
id: 'filter',
labelAlign: 'right',
labelWidth: 80,
url: 'query-sms.jsp'
});
filter.fieldset(
{legend:''},
new Ext.form.DateField({
fieldLabel: '起始时间',
name: 'begin',
width:180,
format:'Y-m-d H:i:s',
allowBlank:false
}),
new Ext.form.DateField({
fieldLabel: '终止时间',
name: 'end',
width:180,
format:'Y-m-d H:i:s',
allowBlank:false
})
);
filter.render(dialog.body);
}
dialog.show(showBtn.dom);
}
};
}();
Ext.EventManager.onDocumentReady(Filter.init, Filter, true);
[/code]
工作中遇到了这个问题,尚未看到相关的例子,今天终于解决了。或许大家会用的到。
[code]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>查询</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="filter.js"></script>
</head>
<body>
<input type="button" id="show-dialog-btn" value="过滤条件" /><br /><br />
<div id="filter-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">过滤条件</div>
</div>
</body>
</html>
[/code]
filter.js
[code]
var Filter = function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var dialog, showBtn;
var toggleTheme = function(){
Ext.get(document.body, true).toggleClass('xtheme-gray');
};
return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
showBtn.on('click', this.showDialog, this);
},
showDialog : function(){
if(!dialog){
dialog = new Ext.LayoutDialog("filter-dlg", {
modal:true,
width:600,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false
}
});
var layout = dialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel(Ext.id(), {autoCreate:true, background:true}));
layout.endUpdate();
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('确定', dialog.hide, dialog);
dialog.addButton('重填', dialog.hide, dialog);
var filter = new Ext.form.Form({
id: 'filter',
labelAlign: 'right',
labelWidth: 80,
url: 'query-sms.jsp'
});
filter.fieldset(
{legend:''},
new Ext.form.DateField({
fieldLabel: '起始时间',
name: 'begin',
width:180,
format:'Y-m-d H:i:s',
allowBlank:false
}),
new Ext.form.DateField({
fieldLabel: '终止时间',
name: 'end',
width:180,
format:'Y-m-d H:i:s',
allowBlank:false
})
);
filter.render(dialog.body);
}
dialog.show(showBtn.dom);
}
};
}();
Ext.EventManager.onDocumentReady(Filter.init, Filter, true);
[/code]
工作中遇到了这个问题,尚未看到相关的例子,今天终于解决了。或许大家会用的到。