Dialog에 Form 인스턴스 배치

3741 단어 htmljsp작업extprototype
filter.html 

<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>

filter.js 

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);

업무 중에 이 문제에 부딪혀서 아직 관련 예시를 보지 못했는데, 오늘 마침내 해결되었다.혹시 여러분이 쓰실지도 몰라요.
양식 Validator
PageSize plugin for PagingToolbar

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage