EXTJS框架-入門實例

時間 2019-12-14

標籤 extjs 框架入門實例简体版

原文原文鏈接

extjs框架是一個JavaScript框架，能夠渲染出豐富的控件javascript

實例：css

代碼：html

<html>
<head>
	<title>test</title>
<link type="text/css" rel="Stylesheet" href="css/ext-all.css"/>
<!--
<link rel="stylesheet" type="text/css" href="css/ux-all.css" />
<link rel="stylesheet" type="text/css" href="css/yourtheme.css" />
-->
<script src="js/ext-base.js" type="text/javascript"></script>
<script src="js/ext-all.js" type="text/javascript"></script>
<!--
<script type ="text/javascript" src="js/ux-all.js"></script>
提示框
<script type ="text/javascript" src="js/App.js"></script>
-->
	   
</head>
<body>
<div style="border:4px dashed #ccc;margin:50px 50px;padding:50px 50px;">
輸入框<input id="text" />
<br/>
表格
<div id="grid" style="height:200px;"></div>
<br/>
表單
<div id="form" style="height:120px;"></div>

表單組件
<div id="formGroup" ></div>
</div>


<script type="text/javascript">
  Ext.onReady(function () {
	//提示框
	//Ext.Msg.alert('<span style="color:red;">tip</span>','這個是EXTJS的demo，初始化加載方法都應該<span style="color:red;">寫在Ext.onReady裏面</span>');
	//事件綁定
	Ext.get('text').on('keypress',enterEvent);
	//表格
	gridControl();
	//表單
	formControl();
	//表單組件
	formGroupControl();
  });

///回車事件  
function enterEvent(e){
	if(e.charCode==Ext.EventObject.ENTER){
		console.log(Ext.get('text').dom.value);
		Ext.Msg.alert('info','hello,'+Ext.get('text').dom.value);
	}
}  

//表格控件
function gridControl(){
	//行號
	var rn=new Ext.grid.RowNumberer();
	//列
	var cm=new Ext.grid.ColumnModel([
		rn,
		{header:'編號',dataIndex:'id'},
		{header:'名稱',dataIndex:'name',renderer:function(value){
				return '<span style="color:red;" onclick="e_alert(\''+value+'\')">名稱是'+value+'</span>';
			}
		},
		{header:'描述',dataIndex:'desc'},
		{header:'備註',dataIndex:'remark'}
	]);
	//數據
	var data=[
		['id','name','desc','remark'],
		['2','name','desc','remark'],
		['3','name','desc','remark'],
		['4','name','desc','remark'],
		['5','name','desc','remark'],
		['7','name','desc','remark'],
		['8','name','desc','remark'],
		['1','2','3','4']
	];
	var store=new Ext.data.Store({
		proxy:new Ext.data.MemoryProxy(data),
		//proxy:new Ext.data.ScriptTagProxy({url:'http://www.family168.com/data.json'}),
		reader:new Ext.data.ArrayReader({},[
			{name:'id',mapping:0},
			{name:'name',mapping:1},
			{name:'desc'},
			{name:'remark'}
		])
	});
	//面板
	var grid=new Ext.grid.GridPanel({
		renderTo:'grid',
		height:200,
		store:store,
		loadMask:true,
		cm:cm,
		viewConfig:{
			forceFit:true
		}
	});
	//加載數據
	store.load();
}

function e_alert(value){
	Ext.Msg.alert('info',value);
}

//表單
function formControl(){
	var form=new Ext.form.FormPanel({
		defaultType:'textfield',
		labelAlign:'right',
		title:'form',
		frame:true,
		labelWidth:50,
		buttonAlign:'center',
		width:220,
		items:[
			{fieldLabel:'文本框'}
		],
		buttons:[
			{text:'按鈕'}
		]
	});
	form.render('form');
}
//表單組件
function formGroupControl(){
	Ext.QuickTips.init();
	
	var formGroup=new Ext.form.FormPanel({
		title:'form',
		frame:true,
		labelWidth:50,
		width:600,
		labelAlign:'right',
		buttonAlign:'center',
		items:[
			{
				layout:'column',
				items:[
					{
						title:'單純輸入',
						xtype:'fieldset',
						checkboxToggle:true,
						autoHeight:true,
						columnWidth:0.7,
						defaults:{width:300},
						items:[
							{
								fieldLabel:'文本',
								xtype:'textfield',
								name:'text'
							},
							{
								fieldLabel:'數字',
								xtype:'numberfield',
								name:'number'
							},
							{
								fieldLabel:'選擇',
								xtype:'combo',
								name:'combo',
								store:new Ext.data.SimpleStore({
									fields:['value','text'],
									data:[
										['1','2'],
										['aa','bb'],
										['aa2','bb2'],
										['aa3','bb3'],
										['hello','你好'],
									]
								}),
								valueField:'value',
								displayField:'text',
								mode:'local',
								emptyText:'請選擇'
							},
							{
								fieldLabel:'日期',
								xtype:'datefield',
								name:'date'
							},
							{
								fieldLabel:'時間',
								xtype:'timefield',
								name:'time'
							},
							{
								fieldLabel:'多行',
								xtype:'textarea',
								name:'textarea'
							},
						]
					},
					{
						title:'多選',
						xtype:'fieldset',
						checkboxToggle:true,
						hideLabels:true,
						style:'margin-left:10px;',
						columnWidth:0.3,
						defaultType:'checkbox',
						items:[
							{
								boxLabel:'首先要吃飽',
								name:'check',
								value:'1',
								width:'auto'
							},
							{
								boxLabel:'而後也要吃飽',
								name:'check',
								value:'2',
								checked:false,
								width:'auto'
							},
							{
								boxLabel:'接着仍是要吃飽',
								name:'check',
								value:'3',
								checked:true,
								width:'auto'
							},
							{
								boxLabel:'最後也要吃飽',
								name:'check',
								value:'4',
								checked:false,
								width:'auto'
							},
						]
					},
					{
						title:'單選',
						xtype:'fieldset',
						checkboxToggle:true,
						defaultType:'radio',
						style:'margin-left:10px;',
						columnWidth:0.3,
						hideLabels:true,
						autoHeight:true,
						items:[
							{
								boxLabel:'渴望自由',
								name:'rad',
								value:'1',
								checked:true,
								width:'auto'
							},
							{
								boxLabel:'祈求愛情',
								name:'rad',
								value:'2',
								width:'auto'
							}
						]
					}
				]
			},
			{
				layout:'form',
				labelAlign:'top',
				items:[
					{
						xtype:'htmleditor',
						fieldLabel:'在線編輯器',
						id:'editor',
						anchor:'98%'
					}
				]
			}
			
		],
		buttons:[
			{text:'保存'},
			{text:'讀取'},
			{text:'取消'},
		]
	});
	
	formGroup.render('formGroup');
}

</script>
</body>
</html>

1. ExtJS入門實例
2. CXF框架入門實例
3. scrapy爬蟲框架入門實例
4. Apache CXF框架webservice入門實例
5. SCRAPY爬蟲框架入門實例（一）
6. IDEA Spring框架入門實例
7. Struts2框架入門案例
8. Scrapy框架----- 入門案例
9. ajax框架---- ExtJS
10. ssm框架入門實踐
更多相關文章...
• Memcached入門教程 - NoSQL教程
• XML DOM 實例 - XML DOM 教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。