收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > extjs > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

ExtJs 學習筆記基礎篇 Ext組件的使用第1/2頁

天介紹一下Ext中組件舉幾個簡單的例子做說明。注意:文章內容有些摘自本人學習過程中看到的資料。
Ext2.0對框架進行了非常大的重構,其中最重要的是形成了一個結構及層次分明的組件體系,由這些組件形成了Ext控件。Ext組件由Component類定義,每一種組件都有一個指定的xtype屬性值,通過該值可以得到一個組件的類型或者是定義一個指定類型的組件。
Ext組件體系由下圖所示:
查看圖片
組件大致可分成三大類,即基本組件、工具欄組件、表單元素組件。
基本組件有
查看圖片
查看圖片
查看圖片
這么多的組件,可都是非常酷的。組件使用可以直接通過關鍵字new 來創建,比如上篇文章中說到的創建一個Window框
var win=new Ext.Window();
除了這種創建方式,一般都會在構造函數中加一些配置屬性來初始化組件。比如創建一個面板:
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script src="extjs/ext-base.js" type="text/javascript"></script>
<script src="extjs/ext-all.js" type="text/javascript"></script>
<script src="extjs/ext-lang-zh_CN.js" type="text/javascript"></script>
<script language="javascript">
function panel(){
var params={title:"Hello",width:300,height:200,html:"<h1>一個面板</h1>"};
var panel=new Ext.Panel(params);
panel.render("panel");
}
</script>
</head>
<body>
<input type="button" onclick="panel()" value="顯示面板">
<hr/>
<div id="panel"></div>
</body>
</html>
關鍵代碼:
function panel(){
var params={title:"Hello",width:300,height:200,html:"<h1>一個面板</h1>"};
var panel=new Ext.Panel(params);
panel.render("panel");
}
params是設置Panle的參數,title:標題,width:寬度,height:高度,html:面板顯示的內容
var panel=new Ext.Panel(params); 這句代碼創建了一個面板,并在構造函數中設置了面板屬性。
panel.render("panel"); 表示頁面上的div元素id.、
代碼可以簡寫為:

var panel=new Ext.Panel({renderTo:"panel",title:"Hello",width:300,height:200,html:"<h1>一個面板</h1>"});

查看圖片
對于組件中的子元素組件,都支持延遲加載的方式創建控件,此時可以直接通過父容器的items傳遞數組方式實現。

function panel(){
var params={
title:"Hello",
width:300,
height:200,
html:"<h1>一個面板</h1>",
items:[
new Ext.Panel({title:"Panel1",height:100}),
new Ext.Panel({title:"Panel2",height:100})
]
};
var panel=new Ext.Panel(params);
panel.render("panel");
}
查看圖片
如果需要讓組件顯示出不同的效果,我們就需要通過構造函數中的參數設置。
由于組件都繼承自Ext.Component,因此所有組件可能有共同的屬性,如下圖查看圖片
查看圖片

ExtJs 學習筆記 Ext.Panle Ext.TabPanel Ext.Viewport第1/3頁
通過此文能學習到如下內容1.創建一個簡單的面板Ext.Panel2.制作一個可以拖動的面板Ext.Panel3.使用選項卡面板3.使用Ext.Viewport搭一個簡單布局(用一個小例

javascript Ext JS 狀態默認存儲時間
Ext.state.CookieProvider=function(config){Ext.state.CookieProvider.superclass.constructor.call(this);this.path="/";this.expires=newDate(newDate().getTime()+(1000*60*60*24*7));//7daysthis.domain=null;t

Ext JS Grid在IE6 下寬度的問題解決方法
解決方法:1、修改ext-all.css,找到.x-grid3-header-offset,修改為.x-grid3-header-offset{padding-left:1px;/*width:10000px;*/width:auto;}2、在grid中加入下面代碼:monitorResize:tr

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
捕鱼大师辅助软件 吉林快3压大小规律 广东36选7彩票开奖 湖南快乐十分网上投注 德国赛车运动 广西快乐十分开奖结果查询 独平码四中四 上海外盘期货配资 湖北快3出号规律 重庆时时彩二组包胆 北京快乐8开奖号码 广西快乐双彩中奖规则 体彩11选五中奖助手 002294股票分析 河南快三购买平台 幸运赛车全天计划 幸运赛马计划全天