- 浏览: 157428 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
影非弦：
有错误，代码中有错误
用JFreeChart来生成统计图表 -
影非弦：
这个貌似还没有写完啊
JFreeChart学习教程（一） -
ljzzs：
非常好！！！
iBatis学习总结 -
695165987：
转到注释 字段
转至 → 注释
Ctrl+R
SAP 快捷键 -
lalaeye：
至少你的加了空格， 标出了颜色。
解决Ibatis一对多映射n+1问题
文档载入结束 初始化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,
发表评论
相关推荐
ext学习笔记代码 ext学习笔记代码 ext学习笔记代码
【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展，主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识，适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...
在阅读《Gwt-ext学习笔记.pdf》这份资料时，应重点学习上述知识点，并通过实践项目来加深理解。同时，关注Gwt-ext的更新和社区资源，以便获取最新的API信息和最佳实践。不断练习和探索，你将能够熟练运用Gwt-ext构建...
### Gwt-ext学习笔记之基础篇 #### 一、安装CypalStudio工具 为了能够开始Gwt-ext的学习之旅，首先需要确保开发环境已经搭建好。CypalStudio是一款非常实用的工具，它能帮助开发者更高效地进行GWT项目的开发。 1....
这篇EXT学习笔记主要涵盖了EXTJS中面向对象编程的一些关键概念和实践，包括命名空间、类定义、构造函数、属性与方法的访问控制（私有和公有）、静态属性与方法以及继承机制。 1. **命名空间**：在EXTJS中，命名空间...
在EXT学习笔记中，"What_is_that_Scope_all_about2.htm"可能涉及的是JavaScript作用域和EXT中的scope概念，这对于理解和调试EXT应用中的事件处理和回调函数至关重要。"JsonTool.htm"可能介绍了EXT如何与JSON数据进行...
以下是对EXT学习笔记中涉及的关键知识点的详细说明： 1. **EXT Form**: EXT中的表单组件是构建用户交互界面的重要部分。它们允许用户输入数据并将其提交到服务器。EXT Form支持多种字段类型，如文本框、选择框、...
EXT学习笔记，是本人在一个月的学习期间整理的
标题中的"Gwt-Ext学习笔记之基础篇"指的是关于Gwt-Ext的初级教程，这是一种基于Google Web Toolkit (GWT) 的扩展库，用于构建富互联网应用程序(RIA)。Gwt-Ext提供了丰富的用户界面组件，使得开发者可以利用Java语言...
在GWT-Ext的学习过程中，首先你需要了解如何定义和实现远程服务。这是GWT的一个核心特性，它允许客户端和服务器之间的安全通信。在GWT中，远程服务调用通常涉及以下几部分： 1. **远程服务接口（Remote Service ...
Ext是一个JavaScript库，主要用于构建富客户端应用程序，尤其是那些基于Web的桌面级应用。它提供了一套完整的组件模型、布局管理、数据绑定以及丰富的用户界面组件，使得开发者能够创建出功能强大的交互式网页应用。...