chengyu2099
- 浏览: 459152 次
- 性别:
- 来自: 南京
-
文章分类
最新评论
-
fkbld：
楼主给个密码，谢谢了，baild_zr@126.com
ExtJs direct 推送 DEMO -
文思涌动：
你的方法太好用了，感激不尽。
MyEclipse 安装ADT -
zys08：
...
jquery uploadify -
攻城使：
我现在也在学习使用Uploadfiy，摸索中
jquery uploadify -
gksrxn：
liuyulovely 写道怎么解压还要密码，楼主解压的密码是 ...
ExtJs direct 推送 DEMO
/**
* Title: ExtJs
* 首页
* Description: 基础demo组合查询+列表展示
*
* Copyright: Copyright (c) 2011
*
* Company:
*
* @author 程仁银 id:23949
* @version V1.0 2011-7-13
* @since
*/
Ext.namespace('ECC.demo');
// ___________________________________________________________________________
// | |
// | 查询条件 |
// | ECC.demo.BaseQueryForm |
// | |
// | |
// |___________________________________________________________________________|
// | |
// | |
// | |
// | |
// | |
// | |
// | 查询列表 |
// | ECC.demo.BaseGridPanel |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// |___________________________________________________________________________|
/**
* @name ECC.demo.basePanelFrame
* @author 程仁银
* @description basepanel
*/
ECC.demo.basePanelFrame = function(){
this.formpanel = new ECC.demo.BaseQueryForm(); //定义查询面板为当前对象引用变量
this.gridpanel = new ECC.demo.BaseGridPanel(); //定义列表面板为当前对象引用变量
/**
* 构造函数
*/
ECC.demo.basePanelFrame.superclass.constructor.call(this,{
id : "basePanelFrameId",
name : "basePanelFrameName",
autoWidth : true,
border : false,
layout : 'form',
items :[this.formpanel,this.gridpanel]
});
}
/**
*
* @class ECC.demo.basePanelFrame
* @extends Ext.Panel
*/
Ext.extend(ECC.demo.basePanelFrame,Ext.Panel,{});
/**
* Title: 基础简单查询面板
*
* Description: 基础demo组合查询
*
*
* Company:
*
* @author 程仁银
* @version V1.0 2011-7-11
* @since
*/
Ext.namespace('ECC.demo');
// ___________________________________________________________________________
// | |
// | 查询条件 |
// | ECC.demo.BaseQueryForm |
// | |
// | |
// |___________________________________________________________________________|
/**
* 查询条件的formpanel
*
* @param gridPanel-后续扩展
*/
ECC.demo.BaseQueryForm = function(){
var baseQueryForm = this; //定义当前变量为引用变量
/**
* 设置gridpanel为当前类引用
* store 动态加载列表
*/
// this.baseGridPanel = new ECC.demo.BaseGridPanel();
/**
* 构造方法
*/
ECC.demo.BaseQueryForm.superclass.constructor.call(this,{
id : 'formId',
title : 'ECC 培训 form and grid - demo',
name : 'baseQueryForm',
frame : true,
autoWidth : true,
autoHeight : true,
border : false,
layout : 'form', // 整体以form布局，每一行，用单独的column布局
items : [
{
layout : 'column', // 第一行布局采用 column
items : [
{
columnWidth : .3,
layout : 'form',
labelAlign : 'right',
labelWidth : 60,
items : [
{
xtype : 'textfield',
id : 'eventTitleId',
fieldLabel : '事件标题',
name : 'eventTitle',
allowBlank : false,
anchor : '95%',
invalidText : '事件标题不能为空',
blankText : '请填写事件标题'
}
]
},
/**
* 两种时间控件 Ext.form.TimeField
* Ext.form.DateField
*/
{
columnWidth : .3,
layout : 'form',
labelAlign : 'right',
labelWidth : 60,
items : [
{
xtype : 'datefield',
fieldLabel : '开始时间',
name : 'startTime',
format : 'Y-m-d',
anchor : '95%'
}
]
},
{
columnWidth : .3,
layout : 'form',
labelAlign : 'right',
labelWidth : 60,
items : [
{
xtype : 'timefield',
fieldLabel : '结束时间',
name : 'endTime',
increment: 30, // 设置步长
anchor : '95%'
}
]
},
/*
* 按钮的三种类型（submit、reset、button
*/
{
columnWidth : .1,
layout : 'form',
labelAlign : 'right',
labelWidth : 60,
items : [
{
/**
* 参考 Ext.Component 的 xtype -> class
*/
xtype : 'button',
name : 'searchBtn',
text : '查询',
/**
* 添加提交触发事件
* 区分按钮响应区别
* listeners、handler
* 1、handler是一个特殊的listener；
* 2、handler是一个函数，而listener是<event , 函数>对；
*/
listeners : {
'click' : function(){
if(baseQueryForm.getForm().isValid()){
alert(Ext.getCmp('eventTitleId').getValue());
}else{
// alert(ECC.demo.states);
Ext.Msg.show({
title : 'Ext.Msg.show',
msg : '表单验证未通过',
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
}
}
}
/*
* handler : function (){
Ext.Msg.show({
title : 'Ext.Msg.show',
msg : '表单验证未通过',
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
}*/
}
]
}
]
},
/**
* 第二行 fieldset ，组合查询-高级查询
* 参考ext官方 example(基于修改)
*/
{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true, //True表示为面板是可收缩的
collapsed: false, //True 表示为渲染面板后即闭合
// 默认 闭合状态，样式会乱掉，未解决......
autoHeight:true,
labelWidth : 50,
layout : 'column',
items :[
{
columnWidth : .3,
layout : 'form',
items : [
{
/**
* Ext.form.NumberField = Ext.extend(Ext.form.TextField....
*/
xtype : 'numberfield',
fieldLabel: 'NumberField',
labelWidth : 60,
name: 'NumberField',
invalidText : '输入数字',
emptyText : '只能输入数字'
}]
},
{
columnWidth : .3,
layout : 'form',
items : [
{
xtype : 'textfield',
/**
* url、alpha、alphanum、email
*/
vtype : 'email', //默认验证：参考 Ext.form.VTypes
fieldLabel : 'Email',
name : 'email',
vtypeText : '格式如:chengyu@qq.com' //制定一个错误信息代替默认的
}
]
},
/**
* Ext.form.ComboBox 使用
* The combo box can use any type of Ext.data.Store as its data source.
* This means your data can be XML, JSON, arrays or any other supported format.
* It can be loaded using Ajax, via script tags or locally.
* This combo uses local data from a JS array:
*/
{
columnWidth : .3,
layout : 'form',
items : [
{ // simple array store
xtype : 'combo', // 下拉列表demo
fieldLabel : 'ComboxBox',
/**
* 参考：E:\开发资料\Ext\ext-3.0.0\ext-3.0.0\examples\form\combos.html
* Ext.data.Store ：JsonStore,ArrayStore,XmlStore
* Ext.data.DataProxy : HttpProxy,MemoryProxy,ScriptTagProxy,DirectProxy
* Ext.data.DataReader : JsonReader,ArrayReader,XmlReader
*/
/*
* ExtJs 2.2
* use Ext.data.SimpleStore
*/
store: new Ext.data.SimpleStore({
fields: ['abbr', 'state'],
data: ECC.demo.states
}),
/*
* ExtJs 3.3
* store : new Ext.data.ArrayStore({
proxy : new Ext.data.MemoryProxy(),
reader : new Ext.data.ArrayReader(
{},
new Ext.data.Record.create([
{name: 'abbr',mapping : 1},
{name: 'state',mapping : 2}
])
),
autoLoad : true,
data : ECC.demo.states
}),*/
displayField : 'state',
typeAhead : true,
mode : 'local',
triggerAction : 'all',
emptyText : 'Select a state...',
selectOnFocus : true
}
]
}
]
},
/**
* 第3行布局采用 column
* fieldset checkbox 模式
* 参考ext官方example
*/
{
xtype:'fieldset',
checkboxToggle:true, //checkbox 模式
title: 'User Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
collapsed: true, //True 表示为渲染面板后即闭合
items :[{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}
]
}
]
});
}
/**
*
* @class ECC.demo.BaseQueryForm
* @extends Ext.form.FormPanel
*/
Ext.extend(ECC.demo.BaseQueryForm,Ext.FormPanel,{});
/**
* Title: 基础列表面板
*
* Description: 显示查询列表信息
*
* Company:
*
* @author 程仁银
* @version V1.0 2011-7-13
* @since
*/
Ext.namespace('ECC.demo');
// ___________________________________________________________________________
// | |
// | |
// | |
// | |
// | |
// | |
// | 查询列表 |
// | ECC.demo.BaseGridPanel |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// |___________________________________________________________________________|
/**
* 显示查询列表信息
*
* @param {}
*/
ECC.demo.BaseGridPanel = function(){
var baseGridPanel = this; //定义当前变量为引用变量
/**
* gridpanel Config Options
*/
this.sm = new Ext.grid.CheckboxSelectionModel({
singleSelect : false
});
/**
* 定义表格列模式
*/
this.cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), //显示行号
this.sm, //将多选框加入至表格行头
{
id : 'abbr',
header : '姓名',
dataIndex : 'abbr'
},
{
id : 'state',
header : '描述',
dataIndex : 'state'
}
]);
/**
* 定义数据对象
*/
this.record = new Ext.data.Record.create([
{name:'abbr'},
{name:'state'}
]);
/**
* 本地数据读取，采用
* Ext2.2 Ext.data.SimpleStore
* 后续可以使用 ExtJs 3.3 响应 store
* 本地数据读取，未牵扯到 datareader、dataproxy
*/
// this.store = new Ext.data.SimpleStore({
// fields : ['abbr', 'state'],
// data : ECC.demo.states
// });
this.store = new Ext.data.Store({
proxy: new Ext.data.PagingMemoryProxy(ECC.demo.states),
reader: new Ext.data.ArrayReader({},
this.record)
});
/**
* 构造函数
*/
ECC.demo.BaseGridPanel.superclass.constructor.call(this,{
id : 'gridId',
name : 'BaseGridPanelName',
autoWidth : true,
height : 265,
border : false,
loadMask : { //加载数据时增加用户体验的云遮功能
msg : '加载数据 ing ...'
},
enableColumnMove : false, //关闭列的拖动功能
enableColumnResize : false, //关闭列的大小调节功能
enableHdMenu : false, //关闭列头部出现的下拉按钮
viewConfig : {
forceFit : true
},
cm : this.cm,
sm : this.sm,
store : this.store,
/**
* 定义分页栏
*/
bbar : new Ext.PagingToolbar({
pageSize : 10,
store: this.store,
displayInfo: true
})
});
/**
* store 加载分页
*/
this.store.load(
{
params:{
start : 0,
limit : 10
}
});
}
/**
*
* @class ECC.demo.BaseGridPanel
* @extends Ext.grid.GridPanel
*/
Ext.extend(ECC.demo.BaseGridPanel,Ext.grid.GridPanel,{});
/*
* Ext JS Library 2.0
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
/* Fix for Opera, which does not seem to include the map function on Array's */
if(!Array.prototype.map){
Array.prototype.map = function(fun){
var len = this.length;
if(typeof fun != "function"){
throw new TypeError();
}
var res = new Array(len);
var thisp = arguments[1];
for(var i = 0; i < len; i++){
if(i in this){
res[i] = fun.call(thisp, this[i], i, this);
}
}
return res;
};
}
/* Paging Memory Proxy, allows to use paging grid with in memory dataset */
Ext.data.PagingMemoryProxy = function(data) {
Ext.data.PagingMemoryProxy.superclass.constructor.call(this);
this.data = data;
};
Ext.extend(Ext.data.PagingMemoryProxy, Ext.data.MemoryProxy, {
load : function(params, reader, callback, scope, arg) {
params = params || {};
var result;
try {
result = reader.readRecords(this.data);
}catch(e){
this.fireEvent("loadexception", this, arg, null, e);
callback.call(scope, null, arg, false);
return;
}
// filtering
if (params.filter!==undefined) {
result.records = result.records.filter(function(el){
if (typeof(el)=="object"){
var att = params.filterCol || 0;
return String(el.data[att]).match(params.filter)?true:false;
} else {
return String(el).match(params.filter)?true:false;
}
});
result.totalRecords = result.records.length;
}
// sorting
if (params.sort!==undefined) {
// use integer as params.sort to specify column, since arrays are not named
// params.sort=0; would also match a array without columns
var dir = String(params.dir).toUpperCase() == "DESC" ? -1 : 1;
var fn = function(r1, r2){
return r1 < r2;
};
result.records.sort(function(a, b) {
var v = 0;
if (typeof(a)=="object"){
v = fn(a.data[params.sort], b.data[params.sort]) * dir;
} else {
v = fn(a, b) * dir;
}
if (v==0) {
v = (a.index < b.index ? -1 : 1);
}
return v;
});
}
// paging (use undefined cause start can also be 0 (thus false))
if (params.start!==undefined && params.limit!==undefined) {
result.records = result.records.slice(params.start, params.start+params.limit);
}
callback.call(scope, result, arg, true);
}
});
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
// some data used in the examples
Ext.namespace('ECC.demo');
ECC.demo.states = [
['AL', 'Alabama', 'The Heart of Dixie'],
['AK', 'Alaska', 'The Land of the Midnight Sun'],
['AZ', 'Arizona', 'The Grand Canyon State'],
['AR', 'Arkansas', 'The Natural State'],
['CA', 'California', 'The Golden State'],
['CO', 'Colorado', 'The Mountain State'],
['CT', 'Connecticut', 'The Constitution State'],
['DE', 'Delaware', 'The First State'],
['DC', 'District of Columbia', "The Nation's Capital"],
['FL', 'Florida', 'The Sunshine State'],
['GA', 'Georgia', 'The Peach State'],
['HI', 'Hawaii', 'The Aloha State'],
['ID', 'Idaho', 'Famous Potatoes'],
['IL', 'Illinois', 'The Prairie State'],
['IN', 'Indiana', 'The Hospitality State'],
['IA', 'Iowa', 'The Corn State'],
['KS', 'Kansas', 'The Sunflower State'],
['KY', 'Kentucky', 'The Bluegrass State'],
['LA', 'Louisiana', 'The Bayou State'],
['ME', 'Maine', 'The Pine Tree State'],
['MD', 'Maryland', 'Chesapeake State'],
['MA', 'Massachusetts', 'The Spirit of America'],
['MI', 'Michigan', 'Great Lakes State'],
['MN', 'Minnesota', 'North Star State'],
['MS', 'Mississippi', 'Magnolia State'],
['MO', 'Missouri', 'Show Me State'],
['MT', 'Montana', 'Big Sky Country'],
['NE', 'Nebraska', 'Beef State'],
['NV', 'Nevada', 'Silver State'],
['NH', 'New Hampshire', 'Granite State'],
['NJ', 'New Jersey', 'Garden State'],
['NM', 'New Mexico', 'Land of Enchantment'],
['NY', 'New York', 'Empire State'],
['NC', 'North Carolina', 'First in Freedom'],
['ND', 'North Dakota', 'Peace Garden State'],
['OH', 'Ohio', 'The Heart of it All'],
['OK', 'Oklahoma', 'Oklahoma is OK'],
['OR', 'Oregon', 'Pacific Wonderland'],
['PA', 'Pennsylvania', 'Keystone State'],
['RI', 'Rhode Island', 'Ocean State'],
['SC', 'South Carolina', 'Nothing Could be Finer'],
['SD', 'South Dakota', 'Great Faces, Great Places'],
['TN', 'Tennessee', 'Volunteer State'],
['TX', 'Texas', 'Lone Star State'],
['UT', 'Utah', 'Salt Lake State'],
['VT', 'Vermont', 'Green Mountain State'],
['VA', 'Virginia', 'Mother of States'],
['WA', 'Washington', 'Green Tree State'],
['WV', 'West Virginia', 'Mountain State'],
['WI', 'Wisconsin', "America's Dairyland"],
['WY', 'Wyoming', 'Like No Place on Earth']
];
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
String path = request.getContextPath();
%>
<html>
<head>
<title>My JSP 'ExtHello.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="<%=path %>/ext-2.2/resources/css/ext-all.css">
<script type="text/javascript" src="<%=path %>/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=path %>/ext-2.2/ext-all.js"></script>
<script type="text/javascript" src="<%=path %>/ext-2.2/source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/ExtJsDemo/eccBaseForm.js"></script>
<script type="text/javascript" src="<%=path %>/ExtJsDemo/states.js"></script>
<script type="text/javascript" src="<%=path %>/ExtJsDemo/baseGridPanel.js"></script>
<script type="text/javascript" src="<%=path %>/ExtJsDemo/eccDemoFrame.js"></script>
<script type="text/javascript" src="<%=path %>/ExtJsDemo/PagingMemoryProxy.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../ext-2.2/resources/images/default/s.gif';
Ext.QuickTips.init();
/**
* eccBaseForm demo
*/
//var baseQueryForm = new ECC.demo.BaseQueryForm();
//baseQueryForm.render('div1');
/**
* eccBaseForm demo
*/
//var baseGridPanel = new ECC.demo.BaseGridPanel();
//baseGridPanel.render('div1');
var panelFrame = new ECC.demo.basePanelFrame();
panelFrame.render('div1');
});
--></script>
</head>
<body>
<div id="div1" align="center"></div>
</body>
</html>
分享到：
发表评论
-
ExtJS组件 - store ②- renderer
2011-05-27 09:47 1355Ext.onReady(function() { Ext ... -
ExtJS组件 - GridPanel DEMO
2011-05-25 16:48 1573Ext.onReady(function() { Ext ... -
ExtJS组件 - store ①
2011-05-25 11:45 1210Ext.onReady(function(){ Ex ... -
ExtJS组件 - EditorGridPanel ①
2011-05-23 15:29 1011Ext.onReady(function(){ // E ... -
ExtJS组件 - GridPanel ②
2011-05-23 14:57 972Ext.onReady(function(){ // Ext ... -
ExtJS组件 - GridPanel ①
2011-05-23 11:06 973如附件图片 Ext.onReady(function( ... -
Ext 入门的简单 formPanel ②
2011-05-20 15:50 893Ext.onReady(function() { // 动 ... -
Ext 入门的简单 formPanel
2011-05-19 18:00 929Ext.onReady(function() { // ... -
Ext 入门的简单messageBox DEMO
2011-05-18 19:17 1087<%@ page language="ja ... -
关于ext代码自动提示
2011-05-18 16:51 1693下载ext.3.0 资源包和ext.jsb文件 1.ex ...
相关推荐
NULL 博文链接：https://lucky16.iteye.com/blog/1490278
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
ExtJs Demo100个演示Demo
extjs-theme-bootstrap-master.zip
ExtJS的GridPanel导出excel文件,方便快捷易懂!
extjs-basex.js extjs-basex.js extjs-basex.js
extjs-6.2.0完全离线版本API文档，原本的离线包还是会去请求谷歌的部分js资源和字体资源，导致速度很慢，这个不会了
extjs-4.2.1的基础包.rar,方便自己用.
extJs-demo.zip
extjs-basex.js extjs-basex.js extjs-basex.js
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包（分为32位和64位）和教程，一共四部分
extjs-4.1.1 ExtJs所有文档及库文件，在官网下的，这个版本很好，放在这方便大家下载！
extjs-core 3.0 beta版extjs-core 3.0 beta版SDK extjs-core 3.0 beta版extjs-core 3.0 beta版
ExtJS----HelloWorld程序源码
extjs--创建图表 折线图、饼状图、柱状图
extjs-6.5.3离线API文档，是学习和开发的必要工具。希望有所帮助！
ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。功能丰富，无人能出其右。无论是界面之美，还是功能之强，ext的表格控件都高居榜首。单选行，多选行，高亮显示选中的行，推拽改变列...
extjs-7.0.0-gpl
Ext JS 4.2.6.1811 Release Date: October 5, 2016 Version Number: 4.2.6.1811 ext-src class 926