extjs水平導航菜單

❶ 怎樣在Extjs框架中嵌入html

用html屬性
{bodyStyle:'background:#069;color:#FFF;font-size:12px;padding-top:12px;',html:'歡迎您！管理員'}

完整案例：
var hd={//這個就是上
region:'north',
height:40,
bodyStyle:'background:#069;color:#FFF;font-size:12px;padding-top:12px;',
html:'歡迎您！管理員'
};
var mainMenu={
id:'menu_panel',
region:'west',
title:'功能菜單',
iconCls:'icon_menu',
split:true,
width:135,
minSize:100,
maxSize:250,
margins:'2 0 5 5',
cmargins:'2 5 5 5',
collapsible:true,
bodyBorder:false,
bodyStyle:'background-color:#DFE8F6',
layout:{type:'accordion',animate:false},
defaults:{border:false,bodyStyle:'padding:0px'},
items:[]
};
var molePanel={
id:'mole_panel',
region:'center',
border:false,
layout:'card',
margins:'2 5 5 0',
cmargins:'2 5 5 5',
activeItem:0,
items:[
{title:'歡迎進入管理系統 V1.0',id:'dashboard',
html:'內容區'
}]
};

var viewport=new Ext.Viewport({
layout:'border',
items:[hd,mainMenu,molePanel]
});
viewport.doLayout();

❷ extjs怎麼實現左側菜單收縮功能

extjs中通過監聽sidebarchange事件來收縮左側菜單的。
1.在新增選項卡中配置一個自定義屬性版sidebarChange，默認值為false,用於保權存左邊導航菜單是否發生展開收縮動作。
2.在新增的選項卡中添加activate監聽事件，當選項卡被激活且sidebarChange屬性值為true時，則通過tab.loader.load()重新載入選項卡內容。
3.在左邊功能導航面板中配置相應的展開和收縮事件的監聽。及相應的處理方法。
這樣，當左邊功能導航面板收縮或展開時，當前的選項卡會重新載入。
4.至此，當左邊導航面板收縮或展開時，就解決了gridpanel寬度不跟著自動變化問題。

❸ extjs TreePanel 如何根據搜索條件來載入樹形

java">//頁面左邊的導航菜單樹
varleftPanel=newExt.tree.TreePanel({
region:'west',
split:true,
containerScroll:true,
autoScroll:true,
animate:true,
rootVisible:false,
collapsible:true,
title:'功能菜單',
loader:newExt.tree.TreeLoader(),
height:500,
width:200
});

varroot=newExt.tree.AsyncTreeNode({
text:'菜單',
id:'0'
});

leftPanel.setRootNode(root);
leftPanel.on('beforeload',function(node){
leftPanel.loader.dataUrl=loadMenuUrl+'&pid='+node.id;//定義子節點的Loader

});

❹ 深入淺出ExtJS的完整目錄

第1章EXT概述 11.1下載EXT發布包 11.2如何查看EXT自帶的API和示例 11.3為什麼有些示例必須放在伺服器上才能看到效果 21.4Hello World 21.4.1直接使用下載的發布包 21.4.2在項目中使用EXT 31.5為什麼頁面提示找不到圖片 31.6輔助開發 41.6.1調試工具Firebug 41.6.2開發利器Spket 71.7本章小結 10第2章EXT框架基礎 112.1EXT的事件和類 112.1.1自定義事件 112.1.2瀏覽器事件 132.1.3Ext.lib.Event 132.1.4Ext.util.Observable 142.1.5Ext.EventManager 172.1.6Ext.EventObject 192.2EXT的核心組件 202.2.1Ext.Component 202.2.2Ext.BoxComponent 222.2.3Ext.Container 232.2.4Ext.Panel 242.2.5Ext.TabPanel 242.3本章小結 27第3章表格控制項 283.1Grid的特性簡介 283.2製作一個簡單的Grid 293.3Grid常用功能詳解 323.3.1部分屬性功能 323.3.2自主決定每列的寬度 333.3.3讓Grid支持按列排序 353.3.4解決中文排序 353.3.5顯示日期類型數據 373.4在單元格里顯示紅色的字、圖片和按鈕 383.5給Grid的行和列設置顏色 413.6自動顯示行號和復選框 423.6.1自動顯示行號 433.6.2復選框 443.7選擇模型 453.8表格視圖--Ext.grid.GridView 463.9表格分頁 473.9.1為Grid添加分頁工具條 483.9.2通過後台腳本獲得分頁數據 493.9.3分頁工具欄顯示在Grid的頂部 513.9.4讓EXT支持前台排序 523.10後台排序 533.11可編輯表格控制項--EditorGrid 553.11.1製作一個簡單的EditorGrid 553.11.2添加一行數據 563.11.3保存修改結果 583.11.4驗證EditGrid中的數據 593.11.5限制輸入數據的類型 603.12屬性表格控制項--PropertyGrid 633.12.1PropertyGrid 643.12.2隻能看不能動的PropertyGrid 653.12.3強制對name列排序 653.12.4根據name獲得value 663.12.5自定義編輯器 663.13分組表格控制項--group 663.13.1分組表格簡介 673.13.2分組表格視圖Ext.grid.GroupingView 683.14可拖放的表格 693.14.1拖放改變表格的大小 693.14.2在同一個表格里拖放 703.14.3表格之間的拖放 723.14.4表格與樹之間的拖放 733.15Grid與右鍵菜單 733.16本章小結 74第4章表單與輸入控制項 764.1製作一個表單 764.2FormPanel和BasicForm詳解 774.3EXT支持的控制項 774.3.1控制項繼承圖 774.3.2表單控制項 784.3.3基本輸入控制項Ext.form.Field 784.3.4文本輸入控制項Ext.form.TextField 794.3.5多行文本輸入控制項Ext.form.TextArea 804.3.6日期輸入控制項Ext.form.DateField 804.3.7時間輸入控制項Ext.form.TimeField 814.3.8在線編輯器Ext.form.HtmlEditor 814.3.9隱藏域Ext.form.Hidden 824.3.10下拉輸入框Ext.form.TriggerField 824.4使用表單提交數據 834.4.1EXT默認的提交形式 834.4.2使用HTML原始的提交形式 854.4.3單純Ajax 854.5數據校驗 864.5.1輸入不能為空 864.5.2最大長度和最小長度 874.5.3藉助vtype 884.5.4自定義校驗規則 884.5.5算不上校驗的NumberField 884.5.6使用後台返回的校驗信息 894.6表單布局 904.6.1默認的平鋪布局 904.6.2平行分列布局 914.6.3在布局中使用fieldset 934.6.4在fieldset中使用布局 954.6.5自定義布局：在表單中加入圖片 964.7ComboBox、datefield和timefield詳解 974.7.1ComboBox簡介 984.7.2將Select轉換成ComboBox 994.7.3ComboBox結構詳解 994.7.4使用遠程數據 1014.7.5ComboBox的高級配置 1024.7.6監聽用戶選擇了哪條數據 1044.7.7使用本地數據實現省、市、縣級聯 1044.7.8使用後台數據實現省、市、縣級聯 1074.8復選框和單選框 1104.8.1復選框 1104.8.2單選框Radio 1114.9文件上傳 1124.10自動把數據填充到表單中 1134.11本章小結 114第5章樹形結構 1165.1TreePanel的基本使用 1165.1.1創建一棵樹 1165.1.2為樹生枝展葉 1175.1.3tree的配置 1185.1.4使用TreeLoader獲得數據 1195.1.5讀取本地JSON數據 1215.1.6Struts 2的JsonPlugin 1215.1.7使用JSP提供後台數據 1225.2樹的事件 1255.3右鍵菜單 1265.4修改節點的默認圖標 1275.5從節點彈出對話框 1285.6節點提示信息 1295.7為節點設置超鏈接 1295.8直接修改樹節點名稱 1305.9樹形的拖放 1315.9.1節點拖放的三種形式 1315.9.2葉子不能append 1315.9.3判斷拖放的目標 1325.9.4樹之間的拖放 1345.10樹形過濾器TreeFilter 1355.11利用TreeSorter對樹進行排序 1375.12樹形節點視圖--Ext.tree.TreeNodeUI 1385.13表格與樹形的結合--Ext.tree.ColumnTree 1395.14本章小結 142第6章拖放 1436.1拖放簡介 1436.2拖放的簡單應用 1436.3拖放組件體系 1446.4拖放的事件 1466.5高級拖放 1486.5.1Basic 1486.5.2Handle 1496.5.3On Top 1506.5.4Proxy 1516.5.5Group 1526.5.6Grid 1546.5.7Circle 1556.5.8Region 1576.6本章小結 158第7章彈出窗口 1597.1Ext.MessageBox 1597.1.1Ext.MessageBox.alert() 1597.1.2Ext.MessageBox.confirm() 1607.1.3Ext.MessageBox.prompt() 1607.2對話框的更多配置 1617.2.1可以輸入多行的輸入框 1617.2.2自定義對話框的按鈕 1627.2.3進度條 1627.2.4動畫效果 1647.3Ext.window的常用屬性 1647.3.1創建一個窗口 1647.3.2窗口的最大化和最小化 1657.3.3窗口的隱藏與銷毀 1677.3.4防止窗口超出瀏覽器 1677.3.5設置窗口中的按鈕 1697.3.6窗口的其他配置選項 1707.4窗口分組 1717.5向窗口中放入各種控制項 1727.5.1在窗口中加入表格 1727.5.2在窗口中加入表單 1737.5.3復雜布局 1747.6本章小結 176第8章布局 1778.1布局的用途 1778.2最簡單的布局FitLayout 1798.3常用的邊框布局BorderLayout 1828.3.1設置子區域的大小 1848.3.2使用split並限制它的范圍 1858.3.3子區域的展開和折疊 1878.4製作伸縮菜單的布局--Accordion 1918.5實現操作向導的布局--CardLayout 1928.6控制位置和大小的布局--AnchorLayout和AbsoluteLayout 1948.7表單專用的布局FormLayout 1998.8分列式的布局ColumnLayout 2008.9表格狀的布局TableLayout 2028.10與布局相關的其他知識 2048.10.1超類Ext.Conainter的公共配置與xtype的概念 2048.10.2layout的超類Ext.layout.ContainerLayout 2058.10.3不指定任何布局時會發生的情況 2068.10.4使用Viewport對整個頁面進行布局 2068.10.5使用嵌套實現復雜布局 2078.11本章小結 210第9章工具欄和菜單 2119.1簡單菜單 2119.2向菜單中添加分隔線 2129.3多級菜單 2139.4高級菜單 2149.4.1多選菜單和單選菜單 2149.4.2日期菜單 2169.4.3顏色菜單 2169.4.4Ext.menu.Adapter菜單適配器 2179.4.5使用Ext.menu.MenuMgr統一管理菜單 2209.5工具欄組件詳解 2209.5.1Ext.Toolbar.Button 2219.5.2Ext.Toolbar.TextMenu 2219.5.3Ext.Toolbar.Spacer 2229.5.4Ext.Toolbar.Separator 2229.5.5Ext.Toolbar.Fill 2239.5.6Ext.Toolbar.SplitButton 2239.5.7為工具條添加HTML標簽 2249.5.8為工具條添加輸入控制項 2259.6分頁工具條Ext.PagingToolbar 2259.6.1Ext.PagingToolbar的基本用法 2259.6.2向Ext.PagingToolbar添加按鈕組件 2269.7右鍵彈出菜單 2279.8本章小結 229第10章數據存儲與傳輸 23010.1Ext.data簡介 23010.2Ext.data.Connection 23010.3Ext.data.Record 23210.4Ext.data.Store 23310.4.1基本應用 23310.4.2對數據進行排序 23410.4.3從store中獲取數據 23410.4.4更新store中的數據 23610.4.5載入及顯示數據 23710.4.6其他功能 23810.5常用proxy 23910.5.1MemoryProxy 23910.5.2HttpProxy 24010.5.3ScriptTagProxy 24010.6常用Reader 24110.6.1ArrayReader 24110.6.2JsonReader 24210.6.3XmlReader 24310.7高級store 24510.8EXT中的Ajax 24610.8.1最容易看到的Ext.Ajax 24610.8.2Ext.lib.Ajax是更底層的封裝 24710.9關於scope和createDelegate() 24710.10DWR與EXT整合 24910.10.1在EXT中直接使用DWR 24910.10.2DWRProxy 25010.10.3DWRTreeLoader 25210.10.4DWRProxy和ComboBox 25310.11localXHR支持本地使用Ajax 25410.12本章小結 255第11章實用工具 25611.1EXT提供的常用函數 25611.1.1onReady函數 25611.1.2get函數 25711.1.3query函數和select函數 26011.1.4encode函數和decode函數 26311.1.5extend函數 26511.1.6apply和applyIf函數 26611.1.7namespace函數 26611.1.8Ext.isEmpty函數 26711.1.9Ext.each函數 26811.1.10Ext.DomQuery 26911.2用DomHelper和Template動態生成HTML 27211.2.1用DomHelper生成小片段 27211.2.2Ext.DomHelper.applyStyles函數 27511.2.3Template模板 27611.2.4Ext.DomHelper.createTemplate函數 27811.2.5復雜模板XTemplate 27911.3用Ext.Utils.CSS切換主題 28111.4懸停提示 28211.4.1初始化 28211.4.2注冊提示 28311.4.3標簽提示 28311.4.4全局配置 28311.4.5個體配置 28411.5使用Ext.state保存狀態 28511.6fx實現的動畫效果 28811.7局部更新網頁內容 28811.8Ext.util.Format 29011.9使用Ext.util.CSS管理CSS樣式 29011.10使用Ext.util.ClickRepeater處理點擊事件 29111.11使用Ext.util.DelayedTask延時執行函數 29311.12使用Ext.util.TaskRunner執行循環任務 29411.13混合型集合Ext.util.MixedCollection 29511.14使用Ext.util.TextMetrices獲得文本所佔的高度和寬度 29911.15Ext.KeyNav處理導航按鍵 30011.16Ext.KeyMap為對象綁定按鍵功能 30211.17擴展 30411.17.1擴展Date 30411.17.2擴展String 30611.17.3擴展Function 30611.17.4擴展Number 30811.17.5擴展Array 30811.18Ext.ux.Portal 30911.19Ext.Desktop 31211.20本章小結 316第12章一個完整的EXT應用 31712.1確定整體布局 31712.2使用HTML和CSS設置靜態信息 31912.3對學生信息進行數據建模 32012.4在頁面中顯示學生信息列表 32412.5添加表單編輯學生信息 32912.6為表單添加提交事件 33212.7清空表單信息 33512.8刪除指定的學生信息 33612.9在Grid和Form之間進行數據交互 33712.10本章小結 338第13章通過Ext Framework合理地應用EXT 33913.1Ext Framework簡介 33913.2Ext Framework架構解析 34213.2.1主要的第三方包 34213.2.2後台類關系圖 34213.2.3前台組件關系圖 34413.3本章小結 347附錄A EXT常見問題 348附錄B EXT對AIR的支持 355附錄C EXT的版本變遷 364