Ext学习笔记
文档载入结束 初始化dom
Ext.onReady(function(){
//初始化以及应用代码
});
弹出警告对话框
Ext.MessageBox.alert("Warning", "This example is not done and results may vary.");
表单
<form id="form1" class="x-form"> //整个表单的样式
<div style="width:800px;"> //表单宽度显示
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div> //表单顶部样式
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"> //表单中部样式
<h3 style="margin-bottom:5px;">Ext Live Forms</h3> //表单头部
<div class="x-form-bd" id="container"> //表单中部
<fieldset> //分割栏
<div class="x-form-item"> //表单内部元素
<label for="combo-local">Local Data:</label> //标题
<div class="x-form-element"> //表单元素样式
<input type="text" size="20" name="combo-local" id="combo-local" />
</div>
</div>
<div class="x-form-item"> //日期表单元素
<label for="markup-date">Date:</label>
<div class="x-form-element">
<input type="text" size="10" value="03/08/03" name="markup-date" id="markup-date" />
</div>
</div>
/*
var date = new Ext.form.DateField({ //构造日期选择元素的ext代码
allowBlank:false //不允许空白
});
date.applyTo(’markup-date’);
*/
<div class="x-form-item">
<label for="combo-tpl">Unobtrusive:</label>
<div class="x-form-element">
<select name="light" id="light">
<option value="Shade">Shade</option>
<option value="Mostly Shady">Mostly Shady</option>
<option value="Sun or Shade">Sun or Shade</option>
<option value="Mostly Sunny">Mostly Sunny</option>
<option value="Sunny">Sunny</option>
</select>
</div>
</div>
/*
var tranny = new Ext.form.ComboBox({
typeAhead: true, //类型在前？
triggerAction: ‘all’, //引发动作？
transform:’light’, //转变表单元素ID
width:120,
forceSelection:true //强制选择
});
*/
<div class="x-form-item"> //日期表单元素
<label for="markup-date">Date:</label>
<div class="x-form-element">
<input type="text" size="20" name="required" id="required" />
</div>
</div>
/*
var required = new Ext.form.TextField({
allowBlank:false,
vtype:’alphanum’ //字段样式 url|email|alpha
});
required.applyTo(’required’);
*/
</fieldest>
</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div> //表单底部样式
</div>
</form>
1 表单内元素需要使用div class="x-form-element"标签环绕，但是同一个标签中可以包含多个表单元素
对话框的使用
1 ：Confirm对话框
<button id="mb1">Show Me</button>
/*
Ext.get(’mb1′).on(’click’, function(e){
Ext.MessageBox.confirm(’Confirm’, ‘Are you sure you want to do that?’, showResult); //关键点在于回调函数
});
function showResult(btn){
Ext.example.msg(’Button Click’, ‘You clicked the {0} button’, btn); //这里有一个{0}看起来可以在这里种使用模板
};
*/
2：警告对话框
Ext.MessageBox.alert(’Status’, ‘Changes saved successfully.’, showResult);
3：单行文本输入对话框
Ext.MessageBox.prompt(’Name’, ‘Please enter your name:’, showResultText);
4：多行文本输入对话框
Ext.MessageBox.show({
title: ‘Address’, //标题
msg: ‘Please enter your address:’, //正文信息
width:300, //宽度
buttons: Ext.MessageBox.OKCANCEL, //按钮设定 使用 Ext.MessageBox.OKCANCEL 可选 YESNOCANCEL
multiline: true, //多行编辑
fn: showResultText, //回调函数
animEl: ‘mb3′ //绑定动画的元素名称
});
5：输入对话框 如果不指定multiline的话就可以不显示输入框
Ext.MessageBox.show({
title:’Save Changes?’,
msg: ‘Your are closing a tab that has unsaved changes. Would you like to save your changes?’,
buttons: Ext.MessageBox.YESNOCANCEL,
fn: showResult,
animEl: ‘mb4′
});
6：进度条
Ext.MessageBox.show({
title: ‘Please wait…’,
msg: ‘Initializing…’,
width:240,
progress:true,
closable:false,
animEl: ‘mb6′
});
// this hideous block creates the bogus progress
var f = function(v){
return function(){
if(v == 11){
Ext.MessageBox.hide();
}else{
Ext.MessageBox.updateProgress(v/10, ‘Loading item ‘ + v + ‘ of 10…’); //更新进度条状态 参数为状态图和状态文字
}
};
};
for(var i = 1; i < 12; i++){
setTimeout(f(i), i*1000); //每隔1秒调用f一次
}
7：复杂对话框（对话框设定内容）
<input type="button" id="show-dialog-btn" value="Show Dialog" /> //由这个按钮触发
对话框内的内容
<!– dialog is created from existing markup –>
<div id="hello-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Layout Dialog</div>
<div class="x-dlg-bd">
<div id="west" class="x-layout-inactive-content">
West
</div>
<div id="center" class="x-layout-inactive-content" style="padding:10px;">
<p>This dialog has the Vista theme applied.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
</div>
</div>
</div>
showBtn.on(’click’, this.showDialog, this);调用方法 第二个
showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once 对话框之创建一次
dialog = new Ext.LayoutDialog("hello-dlg", { 设定对话框句柄 第一个参数表示所要引用的dom元素
modal:true, //形式设定
width:600,
height:400,
shadow:true, //阴影
minWidth:300, //最大最小形状
minHeight:300,
proxyDrag: true, //允许拖拽
west: { //为west对象设定布局
split:true, //分隔
initialSize: 150,
minSize: 100,
maxSize: 250,
titlebar: true,
collapsible: true,
animate: true
},
center: { //为center元素设定布局
autoScroll:true,
tabPosition: ‘top’,
closeOnTab: true,
alwaysShowTabs: true
}
});
//定义好对话框的布局
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton(’Submit’, dialog.hide, dialog);
dialog.addButton(’Close’, dialog.hide, dialog);
//获得对话框布局的句柄
var layout = dialog.getLayout();
layout.beginUpdate();
layout.add(’west’, new Ext.ContentPanel(’west’, {title: ‘West’})); //为布局设定位置
layout.add(’center’, new Ext.ContentPanel(’center’, {title: ‘The First Tab’}));
// generate some other tabs
layout.add(’center’, new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: ‘Another Tab’, background:true})); //为布局设定位置引用
layout.add(’center’, new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: ‘Third Tab’, closable:true, background:true}));
layout.endUpdate(); //更新布局
}
dialog.show(showBtn.dom);
}
布局修改器 东east 西:west 南：south 北：north
1 简单布局
<div id ="header"></div>
<div id ="footer"></div>
<div id ="nav"></div>
<div id ="content"></div>
var layout = new Ext.BorderLayout(document.body, { //参数为应用面板的根元素 边框布局
north: { //使用对象方式设定布局 北
split:false, //分割线
initialSize: 35 //初始化大小
},
south: { 南
split:false,
initialSize: 20
},
west: { 西
split:false,
initialSize: 200,
collapsible: false
},
center: {
autoScroll: true 自动滚动 中间
}
});
layout.beginUpdate();
layout.add(’north’, new Ext.ContentPanel(’header’, {fitToFrame:true})); //为布局添加内部元素 内容面板 参数为适合结构
layout.add(’south’, new Ext.ContentPanel(’footer’, {fitToFrame:true}));
layout.add(’west’, new Ext.ContentPanel(’nav’, {fitToFrame:true}));
layout.add(’center’, new Ext.ContentPanel(’content’));
layout.endUpdate();
2 复杂布局
var layout = new Ext.BorderLayout(document.body, {
west: {
split:true,
initialSize: 240,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
},
center: {
autoScroll: true
},
east: {
split:true,
initialSize: 240,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
}
});
layout.beginUpdate();
layout.add(’west’, new Ext.ContentPanel(’nav1′, {title: ‘翻译项目’, fitToFrame:true, closable:false}));
layout.add(’west’, new Ext.ContentPanel(’nav2′, {title: ‘审校项目’, fitToFrame:true, closable:false}));
layout.add(’west’, new Ext.ContentPanel(’nav3′, {title: ‘所有项目’, fitToFrame:true, closable:true}));
var innerLayout = new Ext.BorderLayout(’content’, {
south: {
split:true,
initialSize: 200,
minSize: 100,
maxSize: 400,
autoScroll:true,
collapsible:true,
titlebar: true
},
center: {
autoScroll:true
},
north: {
split:true,
initialSize: 200,
minSize: 100,
maxSize: 400,
autoScroll:true,
collapsible:true,
titlebar: true
}
});
innerLayout.add(’south’, new Ext.ContentPanel(’inner1′, "更多信息"));
innerLayout.add(’south’, new Ext.ContentPanel(’inner3′, "更多信息"));
innerLayout.add(’center’, new Ext.ContentPanel(’inner2′, "文档列表"));
innerLayout.add(’north’, new Ext.ContentPanel(’inner2′, "文档列表"));
layout.add(’east’, new Ext.ContentPanel(’nav4′,{title: ‘kao’,fitToFrame:true, colsable:false}))
layout.add(’center’, new Ext.NestedLayoutPanel(innerLayout));
layout.endUpdate();
布局的使用方法是 先创建Ext.BorderLayout 然后设定边框布局的样式
west: {
split:true,
initialSize: 240,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
},
center: {
autoScroll: true
},
east: {
split:true,
initialSize: 240,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
}
然后layout.beginUpdate(); 然后添加布局内容
layout.add(’west’, new Ext.ContentPanel(’nav1′, {title: ‘翻译项目’, fitToFrame:true, closable:false}));
最后layout.endUpdate();
关键点在于对页面上存在的一些元素的引用
对象传递参数的方法是 {属性:’值’,属性:’值’}
布局时候使用在边上的参数可以是
split:true, //分割线，可以允许拖动
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true, //工具条，包括关闭按钮 和标签页的头信息显示
collapsible: false, //可以缩进
animate: false //缩进时使用动画
在中间的参数
titlebar: true, //顶部的工具栏
autoScroll:true, //
closeOnTab: true //Tab上可以使用close按钮
更高级的布局管理
layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 25,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true,
autoScroll:false,
useShim:true,