ext-- 드롭다운 목록

1. 로컬 데이터

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>combobox.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
	<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../ext/ext-all.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			var city = [
				[1001," "],
				[1002," "],
				[1003," "],
				[1004," "],
				[1005," "],
				[1006," "]
			];
			
			var proxy__ = new Ext.data.MemoryProxy(city);
			var record = new Ext.data.Record.create(
				[
					{name:"id",type:"int",mapping:0},
					{name:"name",type:"string",mapping:1}
				]
			);
			var reader__ = new Ext.data.ArrayReader({},record);
			var store__ = new Ext.data.Store(
				{
					proxy:proxy__,
					reader:reader__,
					autoLoad:true
				}			
			);
			
			var combobox = new Ext.form.ComboBox(
				{
					renderTo:document.body,// 
					triggerAction:"all",// ，all ，query 。
					store:store__,
					displayField:"name",// 
					valueField:"id",// 。
					mode:"local",//local: ；remote: 。
					emptyText:" "// 。
				}
			);
			
			var btn = new Ext.Button(
			 {
			 	text:" ",
			 	renderTo:document.body,
			 	handler:function(){
			 		Ext.Msg.alert("","id:"+combobox.getValue()+",name:"+combobox.getRawValue());
			 	}
			 }
			);
		});
	</script>
  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
</html>

2. 원격 데이터

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>pagination_combobox.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="/extjs/ext/resources/css/ext-all.css" />
    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="/extjs/ext/adapter/ext/ext-base.js"></script>
 	<script type="text/javascript" src="/extjs/ext/adapter/ext/ext-all.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="/extjs/ext/ext-all-debug.js"></script>
    <script type="text/javascript">
    	Ext.onReady(function(){
    	// {total:10,data:[{'id':1,'name':' '},{'id':2,'name':' '},{'id':3,'name':' '},{'id':4,'name':' '},{'id':5,'name':' '},{'id':6,'name':' '},{'id':7,'name':' '},{'id':8,'name':' '},{'id':9,'name':' '},{'id':10,'name':' '}]}
    	
    		var proxy__ = new Ext.data.HttpProxy({url:"dept!queryDept.action"});
    		var record = new Ext.data.Record.create([
    			{
    				name:"id",type:"int",mapping:"id"
    			},
    			{
    				name:"name",type:"string",mapping:"name"
    			}]
    		);
    		
    		var reader__ = new Ext.data.JsonReader({
    			totalProperty:"total",// ( json key)
    			root:"data"// json ( json key)。
    		},record);
    		var store__ = new Ext.data.Store(
    			{
    				proxy:proxy__,
    				reader:reader__
    			});
    			
    		var dept_combobox = new Ext.form.ComboBox(
    			{
    				renderTo:document.body,
    				emptyText:" ",
    				displayField:"name",
    				valueField:"id",
    				triggerAction:"all",
    				mode:"remote",
    				store:store__,
    				pageSize:3,// 
    				listWidth:200// 。
    			}
    		);
    		
    		var button = new Ext.Button(
    			{
    				text:" ",
    				renderTo:document.body,
    				handler:function(){
    					Ext.Msg.alert(""," "+dept_combobox.getRawValue());			
    				}
    			}
    		);
    	});
    </script>

  </head>
  
  <body>
     ：
  </body>
</html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

ExtJS 3.2 학습 노트(3) 사용자 정의 이벤트

Extjs에서 모든 상속은 Ext.util에서 합니다.Observable 클래스의 컨트롤은 이벤트를 지원할 수 있습니다. 클래스에 대해 이벤트를 사용자 정의하려면 다음 절차를 따르십시오. 1, 먼저 클래스를 정의합니...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

ext-- 드롭다운 목록

좋은 웹페이지 즐겨찾기