[ 置顶] [加锁] [修改] [删除] [精华] [转移] [锁定用户] [修改]　 [关闭问题]　 收藏   [引用回复]

今天晚上坐在电脑上面闲着没有事，就在收集一下网上一些事例，希望对大家有用。 在下面转载的的内容如果版权问题，我将会做即时的处理。

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

extjs 的日期加时间控件

看到有人发的ext 2.0日期加时间控件，我也把自己写的一个拿出来，大家共享。
文件夹放到extjs 包的examples目录即可运行。

转载：http://www.javaeye.com/topic/152135
相关附件: Datetime.rar　

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

java+struts2+ext+json(完整的示例程序)实现CRUD

javaeye是我最喜欢的java技术站点，在这里找到一些我需要的东西，可长期以来，我都只是在这里看看和找找我需要的东西，确从来没做过什么贡献。
这段时间，我用ext做了两个项目，期间遇到好多问题，也走了很多湾路。项目现在已接近尾声了。为了总结一下ext,我特别做了一个java+struts2+ext+json的完整的例子，希望对初学ext的人各位朋友能有点帮助。
本文包括两个附件，其中JsonExt.war是一个可运行的web包,JsonExt.rar为源代码。
JsonExt.war在xp操作系统,jdk6,tomcat6,ie,maxthon,firefox环境下测试运行正常。
JsonExt.rar是一个web项目，开发环境myeclipse6.0

转载自：http://www.javaeye.com/topic/158338
相关附件: JsonExt.war.rar　
JsonExt.rar　

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

用prototype实现的form表单验证(进行了改进和内容的扩充）

转载自：http://www.javaeye.com/topic/105881
相关附件: validator.rar　

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

JSP+Ext实现CURD, 更简洁明了
学习Ext有三天了, 参考《Ext2.0入门与精通》和官方的examples照猫画虎搞了个 员工管理'系统' 和 员工签到'系统'

希望大家一起学习, 由于学艺不精, 若有不足之处还请各位批评指正, 谢谢大家

转载自：http://www.javaeye.com/topic/189474
相关附件: MichealWazowski.rar　

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

EXT2.0 checkbox树的扩展(支持单选,级联多选,只选叶子等)

转载自http://www.javaeye.com/topic/164426

在ext1.x里,树是没有checkbox的, 幸好在2.X版本里提供了这个功能, 在许多应用里, 带有checkbox的树使用还是很常见的



Ext2.X提供了简单的checkbox实现,但对于一些复杂的需求,如: 级联多选(选中父结点,自选中其所有子结点和所有父结点) , 单选等等, Ext2.X并没有帮我们实现

还有最难解决的情况, 当树是异步的时候, 要想级联多选, 实现起来有些难度

在此, 通过对Ext.tree.TreeNodeUI进行扩展,这些问题都得到很好的解决


  1. /**
  2.  * @class Ext.tree.TreeCheckNodeUI
  3.  * @extends Ext.tree.TreeNodeUI
  4.  *  
  5.  * 对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性
  6.  *  
  7.  * 扩展的功能点有：
  8.  * 一、支持只对树的叶子进行选择
  9.  *    只有当返回的树结点属性leaf = true 时，结点才有checkbox可选
 10.  *    使用时，只需在声明树时，加上属性 onlyLeafCheckable: true 既可，默认是false
 11.  *  
 12.  * 二、支持对树的单选
 13.  *    只允许选择一个结点
 14.  *    使用时，只需在声明树时，加上属性 checkModel: "single" 既可
 15.  *  
 16.  * 二、支持对树的级联多选  
 17.  *    当选择结点时，自动选择该结点下的所有子结点，以及该结点的所有父结点（根结点除外），特别是支持异步，当子结点还没显示时，会从后台取得子结点，然后将其选中/取消选中
 18.  *    使用时，只需在声明树时，加上属性 checkModel: "cascade" 既可
 19.  *  
 20.  * 三、添加"check"事件
 21.  *    该事件会在树结点的checkbox发生改变时触发
 22.  *    使用时，只需给树注册事件,如：
 23.  *    tree.on("check",function(node,checked){...});
 24.  *  
 25.  * 默认情况下，checkModel为'multiple'，也就是多选，onlyLeafCheckable为false，所有结点都可选
 26.  *  
 27.  * 使用方法：在loader里加上 baseAttrs:{uiProvider:Ext.tree.TreeCheckNodeUI} 既可.
 28.  * 例如：
 29.  *   var tree = new Ext.tree.TreePanel({
 30.  *      el:'tree-ct',
 31.  *      width:568,
 32.  *      height:300,
 33.  *      checkModel: 'cascade',   //对树的级联多选
 34.  *      onlyLeafCheckable: false,//对树所有结点都可选
 35.  *      animate: false,
 36.  *      rootVisible: false,
 37.  *      autoScroll:true,
 38.  *      loader: new Ext.tree.DWRTreeLoader({
 39.  *          dwrCall:Tmplt.getTmpltTree,
 40.  *          baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI } //添加 uiProvider 属性
 41.  *      }),
 42.  *      root: new Ext.tree.AsyncTreeNode({ id:'0' })
 43.  *  });
 44.  *  tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
 45.  *  tree.render();
 46.  *  
 47.  */  
 48.  
 49. Ext.tree.TreeCheckNodeUI = function() {  
 50.     //'multiple':多选; 'single':单选; 'cascade':级联多选  
 51.     this.checkModel = 'multiple';  
 52.      
 53.     //only leaf can checked  
 54.     this.onlyLeafCheckable = false;  
 55.      
 56.     Ext.tree.TreeCheckNodeUI.superclass.constructor.apply(this, arguments);  
 57. };  
 58.  
 59. Ext.extend(Ext.tree.TreeCheckNodeUI, Ext.tree.TreeNodeUI, {  
 60.  
 61.     renderElements : function(n, a, targetNode, bulkRender){  
 62.         var tree = n.getOwnerTree();  
 63.         this.checkModel = tree.checkModel || this.checkModel;  
 64.         this.onlyLeafCheckable = tree.onlyLeafCheckable || false;  
 65.          
 66.         // add some indent caching, this helps performance when rendering a large tree  
 67.         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';  
 68.  
 69.     var cb = (!this.onlyLeafCheckable || a.leaf);  
 70.         var href = a.href ? a.href : Ext.isGecko ? "" : "#";  
 71.         var buf = ['<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',  
 72.             '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",  
 73.             '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',  
 74.             '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',  
 75.             cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',  
 76.             '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',  
 77.              a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",  
 78.             '<ul class="x-tree-node-ct" style="display:none;"></ul>',  
 79.             "</li>"].join('');  
 80.  
 81.         var nel;  
 82.         if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){  
 83.             this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);  
 84.         }else{  
 85.             this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);  
 86.         }  
 87.          
 88.         this.elNode = this.wrap.childNodes[0];  
 89.         this.ctNode = this.wrap.childNodes[1];  
 90.         var cs = this.elNode.childNodes;  
 91.         this.indentNode = cs[0];  
 92.         this.ecNode = cs[1];  
 93.         this.iconNode = cs[2];  
 94.         var index = 3;  
 95.         if(cb){  
 96.             this.checkbox = cs[3];  
 97.             Ext.fly(this.checkbox).on('click', this.check.createDelegate(this,[null]));  
 98.             index++;  
 99.         }  
100.         this.anchor = cs[index];  
101.         this.textNode = cs[index].firstChild;  
102.     },  
103.      
104.     // private  
105.     check : function(checked){  
106.         var n = this.node;  
107.         var tree = n.getOwnerTree();  
108.         this.checkModel = tree.checkModel || this.checkModel;  
109.          
110.         if( checked === null ) {  
111.             checked = this.checkbox.checked;  
112.         } else {  
113.             this.checkbox.checked = checked;  
114.         }  
115.          
116.         n.attributes.checked = checked;  
117.         tree.fireEvent('check', n, checked);  
118.          
119.         if(!this.onlyLeafCheckable && this.checkModel == 'cascade'){  
120.             var parentNode = n.parentNode;  
121.             if(parentNode !== null) {  
122.                 this.parentCheck(parentNode,checked);  
123.             }  
124.             if( !n.expanded && !n.childrenRendered ) {  
125.                 n.expand(false,false,this.childCheck);  
126.             }  
127.             else {  
128.                 this.childCheck(n);  
129.             }  
130.         }else if(this.checkModel == 'single'){  
131.             var checkedNodes = tree.getChecked();  
132.             for(var i=0;i<checkedNodes.length;i++){  
133.                 var node = checkedNodes[i];  
134.                 if(node.id != n.id){  
135.                     node.getUI().checkbox.checked = false;  
136.                     node.attributes.checked = false;  
137.                     tree.fireEvent('check', node, false);  
138.                 }  
139.             }  
140.         }  
141.          
142.     },  
143.      
144.     // private  
145.     childCheck : function(node){  
146.         var a = node.attributes;  
147.         if(!a.leaf) {  
148.             var cs = node.childNodes;  
149.             var csui;  
150.             for(var i = 0; i < cs.length; i++) {  
151.                 csui = cs[i].getUI();  
152.                 if(csui.checkbox.checked ^ a.checked)  
153.                     csui.check(a.checked);  
154.             }  
155.         }  
156.     },  
157.      
158.     // private  
159.     parentCheck : function(node ,checked){  
160.         var checkbox = node.getUI().checkbox;  
161.         if(typeof checkbox == 'undefined')return ;  
162.         if(!(checked ^ checkbox.checked))return;  
163.         if(!checked && this.childHasChecked(node))return;  
164.         checkbox.checked = checked;  
165.         node.attributes.checked = checked;  
166.         node.getOwnerTree().fireEvent('check', node, checked);  
167.          
168.         var parentNode = node.parentNode;  
169.         if( parentNode !== null){  
170.             this.parentCheck(parentNode,checked);  
171.         }  
172.     },  
173.      
174.     // private  
175.     childHasChecked : function(node){  
176.         var childNodes = node.childNodes;  
177.         if(childNodes || childNodes.length>0){  
178.             for(var i=0;i<childNodes.length;i++){  
179.                 if(childNodes[i].getUI().checkbox.checked)  
180.                     return true;  
181.             }  
182.         }  
183.         return false;  
184.     },  
185.      
186.     toggleCheck : function(value){  
187.         var cb = this.checkbox;  
188.         if(cb){  
189.             var checked = (value === undefined ? !cb.checked : value);  
190.             this.check(checked);  
191.         }  
192.     }  
193. });  



使用方法都在注释里了,应该已经很详细了,我就不多说了



需要注意的是, 使用例子里的Tree 使用了Ext.tree.DWRTreeLoader这个扩展类,用来加载后台树结点,这和使用其它的loader没有区别的,

如果您使用其它的loader, 同样加上baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI }就行了

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

Ext2.0 综合应用

转载自http://www.javaeye.com/topic/196314

// JavaScript Document
/**
* @author Erit
*/

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
Ext.BLANK_IMAGE_URL = '../images/default/s.gif';

var frm = Ext.form;

var columns = [
{
id:'contractId',
header:'合同编号',
sortable:false,
align: 'center',
renderer:function (v) {
return '<span class="index_listid_underline" style="cursor:pointer;">' + v + '</font>';
},
dataIndex:'contractId',
width:60
},
{
id:'areaName',
header:'区域',
dataIndex:'areaName',
align: 'center',
sortable: true,
width:60

},
{
id:'agencyName',
header:'客户名称',
dataIndex:'agencyName',
align: 'center',
sortable: true,
width:120
},
{
id:'efDate',
header:'开通日期',
align: 'center',
dataIndex:'efDate',
sortable:true,
//renderer: Ext.util.Format.dateRenderer('Y年m月d日'),
width:100
},
{
id:'joinMode',
header:'加盟方式',
dataIndex:'joinMode',
align: 'center',
sortable:true,
width:80
},
{
id:'contractStatus',
header:'合同状态',
dataIndex:'contractStatus',
align: 'center',
sortable:true,
width:100
}
];

var contract = [
{name:'areaName',type:'string'},
{name:'agencyName',type:'string'},
{name:'contractId',type:'string'},
{name:'efDate',type:'string'},
{name:'joinMode',type:'string'},
{name:'contractStatus',type:'string'}
];

var store = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({url:''}),
reader: new Ext.data.JsonReader(
{
totalProperty:'dataForm',
root:'contract'
},
contract
),
remoteSort: true,
sortInfo:{field: 'areaName', direction: "DESC"},
groupField:'areaName'
});

var view = new Ext.grid.GroupingView({
forceFit:true,
sortAscText :'正序',
sortDescText :'倒序',
columnsText:'列显示/隐藏',
groupByText:'依本列分组',
showGroupsText:'分组显示',
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 0 ? "份合同" : "暂无合同"]})'
})

var store_selectType = new Ext.data.SimpleStore({
fields: ['typeCode', 'typeText'],
data : [
[1,'不限'],
[2, '合同编号'],
[3,'区域'],
[4,'加盟方式'],
[5,'合同状态'],
[6,'客户名称']
]
});


var selectType = new Ext.form.ComboBox({//查询类别的下拉框
store:store_selectType,
name: 'selectTypeName',
valueField:'typeCode',
displayField:'typeText',
typeAhead: true,
editable:false,//不可编辑的
mode: 'local',//本地模式
triggerAction: 'all',
blankText:'不限',
emptyText:'不限',
width:80
});

var store_selectArea = new Ext.data.SimpleStore({
fields: ['areaCode', 'areaText'],
data : [
[1,'不限'],
[2, '黄浦'],
[3,'浦东'],
[4,'闸北'],
[5,'闵行'],
[6,'徐汇'],
[7,'杨浦'],
[8,'虹口'],
[9,'长宁'],
[10,'静安'],
[11,'卢湾'],
[12,'宝山'],
[13,'嘉定'],
[14,'青浦'],
[15,'奉贤'],
[16,'南汇'],
[17,'普陀'],
[18,'金山'],
[19,'松江'],
[20,'崇明'],
[21,'周边地区']
]
});

var selectArea = new Ext.form.ComboBox({//查询类别的下拉框
store:store_selectArea,
name: 'selectAreaName',
valueField:'areaText',
displayField:'areaText',
typeAhead: true,
editable:false,//不可编辑的
mode: 'local',//本地模式
triggerAction: 'all',
blankText:'不限',
emptyText:'不限',
width:80
});

var beginDate = new Ext.form.DateField({
name: 'beginDate',
width:100,
readOnly:true,
format: 'Y年m月d日'
});

var endDate = new Ext.form.DateField({
id: 'endDate',
width:100,
readOnly:true,
format: 'Y年m月d日'
});

var selectKey = new Ext.form.TextField({
name:'KeyInfo',
width:80
});

var tbar =[
{
xtype:'button',
iconCls:'excelIcon',
tooltip:'把数据导出到excel',
handler:exportExcel
},'-',
'->','开始时间:',beginDate,'-','结束时间:',endDate,'-','区域:',selectArea,'-','查询条件:',selectType,'-','查询关键字:',selectKey,'-',
{
text:'查询',
handler:doSelect
}
];
var grid = new Ext.grid.GridPanel({
el:'contract-grid',
id:'contract-grid',
store: store,
columns: columns,
bodyBorder:false,
sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
view:view,
loadMask:({msg :'数据正在加载中……'}),
width: 1024,
height: 474,
tbar:tbar,
bbar:new Ext.PagingToolbar(
{
pageSize:15,
store:store,
displayInfo:true,
beforePageText:'第',
afterPageText:'页 共 {0} 页',
refreshText:'刷新',
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条合同记录',
emptyMsg: '没有记录'
})
});

grid.render();
store.load({params:{start:0, limit:15}});

grid.addListener('cellclick', cellclick);
//var mainPanel = Ext.getCmp('contract-grid');

function cellclick(grid,rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex);
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
var maskDiv = document.getElementById('extMask');
var cnID = record.get('contractId');
if (fieldName == 'contractId') {
var cmWindow;
if (!cmWindow) {
//mainPanel.body.mask();
maskDiv.style.display = '';
var tCBar = ['->',{
text:'确定修改',
name:'saveContract',
handler:function(){
if (!Ext.get('idForContract').getValue()) {
Ext.MessageBox.alert('提示','合同编号不能为空!');
return false;
}

if (!Ext.get('agency').getValue()) {
Ext.MessageBox.alert('提示','中介名称不能为空!');
return false;
}

if (!Ext.get('join_mode').getValue()) {
Ext.MessageBox.alert('提示','加盟形式不能为空!');
return false;
}

if (!Ext.get('service_item').getValue()) {
Ext.MessageBox.alert('提示','服务项目不能为空!');
return false;
}

if (!Ext.get('efficient_date').getValue()) {
Ext.MessageBox.alert('提示','开通日期不能为空且格式为 年-月-日!');
return false;
} else if(!dateCheck(Ext.get('efficient_date').getValue())) {
Ext.MessageBox.alert('提示','开通日期格式为 年-月-日!');
return false;
}

if (!Ext.get('end_date').getValue()) {
Ext.MessageBox.alert('提示','时间截点不能为空且格式为 年-月-日!');
return false;
}else if(!dateCheck(Ext.get('end_date').getValue())) {
Ext.MessageBox.alert('提示','时间截点格式为 年-月-日!');
return false;
}

if(cPanel.form.isValid()){
Ext.MessageBox.wait('正在保存数据中, 请稍候……');
cPanel.form.submit({
//reset: true,
failure: function(form, action) {
Ext.MessageBox.hide();
Ext.MessageBox.alert('提示',action.result.info);
},
success: function(form_instance_create, action) {
Ext.MessageBox.hide();
Ext.MessageBox.alert('提示',action.result.info);
cmWindow.close(this);
store.reload({params:{start:0, limit:15}});
//mainPanel.body.unmask();
maskDiv.style.display = 'none';
beginDate.setValue('');
endDate.setValue('');
}
});
}
}

},'-',
{
text:'查看收费详情',
id:'seeContract',
handler:function () {
var seeWind;

if (!seeWind) {
var ctColumns = new Ext.grid.ColumnModel([{
hidden:true,
id:'payID',
dataIndex:'payID'
},{
id:'transact',
header:'执行例次',
dataIndex:'transact',
renderer:function (v) {
return '<span class="index_listid_underline" style="cursor:pointer;">第' + v + '次</span>';
},
align:'center',
width:90
},
{
id:'sPayDate',
header:'付款时间',
dataIndex:'sPayDate',
align:'center',
width:140
},
{
id:'sPayMoney',
header:'此次金额(元)',
dataIndex:'sPayMoney',
align:'center',
width:100
},
{
id:'sEStartDate',
header:'服务开始时间',
dataIndex:'sEStartDate',
align:'center',
width:130
},
{
id:'sEEndDate',
header:'服务结束时间',
dataIndex:'sEEndDate',
align:'center',
width:130
},
{
id:'sPayStatus',
header:'状态',
dataIndex:'sPayStatus',
align:'center',
renderer:function (v) {
if (v == '已支付')
return '<span class="index_listid_underline" style="cursor:pointer;">' + v + '</span>';
else if (v == '未支付')
return '<span class="index_listid_underline" style="cursor:pointer;">' + v + '</span>';
},
width:81
}]
);

var sStract = [
{name:'payID'},
{name:'transact'},
{name:'sPayDate'},
{name:'sEStartDate'},
{name:'sEEndDate'},
{name:'sPayMoney',type:'float'},
{name:'sPayStatus'}
];

var sStroe = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:''}),
reader: new Ext.data.JsonReader(
{
totalProperty:'ConDataForm',
root:'getContract'
},
sStract
)
});

var sFModyCon = new Ext.form.Hidden({
id:'sFMody',
name:'sFMody',
value:'2'
});

var seeTextFiled = new Ext.form.FieldSet({
id:'sFieldset_panel',
title: '增加新收费（* 为必填项）',
autoHeight:true,
//collapsible: true,
defaultType: 'textfield',
items :[sFModyCon,
{
xtype:'hidden',
id:'payID',
name:'payID'
},
{
xtype:'hidden',
id:'contractId',
value:Ext.get('contractId').getValue()
},
{
xtype:'datefield',
fieldLabel: '付款时间',
id:'sPayDate',
name: 'sPayDate',
format:'Y-m-d',
allowBlank:false,
blankText:'请输入或选择时间',
invalidText:'输入日期:<font color="#ff0000">"{0}"</font>的格式不对，请按<font color="#ff0000">"{1}"</font>格式输入',
width:120
},{
fieldLabel: '此次金额(元)',
id:'sPayMoney',
blankText:'此次金额不能为空且为数字',
allowBlank:false,
name: 'sPayMoney'
},{
xtype:'datefield',
fieldLabel: '服务开始时间',
id:'sEStartDate',
format:'Y-m-d',
name: 'sEStartDate',
allowBlank:false,
blankText:'请输入或选择时间',
invalidText:'输入日期:<font color="#ff0000">"{0}"</font>的格式不对，请按<font color="#ff0000">"{1}"</font>格式输入',
width:120
},{
xtype:'datefield',
fieldLabel: '服务结束时间',
id:'sEEndDate',
format:'Y-m-d',
name: 'sEEndDate',
allowBlank:false,
blankText:'请输入或选择时间',
invalidText:'输入日期:<font color="#ff0000">"{0}"</font>的格式不对，请按<font color="#ff0000">"{1}"</font>格式输入',
anchor:'90%',
width:120
}]
});

function selectRow(sm, row, rec) {
Ext.getCmp('seePanel_grid').getForm().loadRecord(rec);
Ext.getCmp('sFieldset_panel').setTitle('修改收费项目（* 为必填项）');
}

var rsm = new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect:selectRow
}
});


var seeGPanel = new Ext.grid.GridPanel({
id:'seeGPanel_grid',
title:'合同编号: '+cnID,
cm:ctColumns,
ds:sStroe,
sm: rsm,
autoScroll:true,
width:693,
height:180,
loadMask:({msg :'数据正在加载中……'})
});

sStroe.load({params:{cnID:Ext.get('contractId').getValue()}});

//var listPayInfo = Ext.getCmp("seeGPanel_grid");
var conMoneySum = new Ext.Button ({
id:'conMoneySum',
name:'conMoneySum',
text:''
});

var mButn = new Ext.Button({
id:'modyPayInfo',
name:'modyPayInfo',
text:'确定',
handler: function () {
var sFieldName = Ext.getCmp('sFieldset_panel').title;
if(sFieldName == '增加新收费（* 为必填项）'){
if (!Ext.get('sPayDate').getValue()) {
Ext.get('sPayDate').focus();
return false;
}

if (isNaN(Ext.get('sPayMoney').getValue())) {
Ext.get('sPayMoney').focus();
return false;
}

if (!Ext.get('sEStartDate').getValue()) {
Ext.get('sEStartDate').focus();
return false;
}

if (!Ext.get('sEEndDate').getValue()) {
Ext.get('sEEndDate').focus();
return false;
}

sFModyCon.value = '1';
sFModyCon.setValue(sFModyCon.value);

if(seePanel.form.isValid()){
Ext.MessageBox.wait('正在保存数据中, 请稍候……');
seePanel.form.submit({
reset: true,
failure: function(form, action) {
Ext.MessageBox.hide();
//Ext.MessageBox.alert('提示',action.result.info);
},
success: function(form_instance_create, action) {
Ext.MessageBox.hide();
Ext.MessageBox.alert('提示',action.result.info);
sStroe.reload();
}
});
Ext.getCmp('sFieldset_panel').title = '增加新收费（* 为必填项）';
}
} else {
if (!Ext.get('sPayDate').getValue()) {
Ext.get('sPayDate').focus();
return false;
}

if (isNaN(Ext.get('sPayMoney').getValue())) {
Ext.get('sPayMoney').focus();
Ext.get('sPayMoney').setValue(1);
return false;
}

if (!Ext.get('sEStartDate').getValue()) {
Ext.get('sEStartDate').focus();
return false;
}

if (!Ext.get('sEEndDate').getValue()) {
Ext.get('sEEndDate').focus();
return false;
}

if(seePanel.form.isValid()){
Ext.MessageBox.wait('正在保存数据中, 请稍候……');
seePanel.form.submit({
reset: true,
failure: function(form, action) {
Ext.MessageBox.hide();
//Ext.MessageBox.alert('提示',action.result.info);
},
success: function(form_instance_create, action) {
Ext.MessageBox.hide();
Ext.MessageBox.alert('提示',action.result.info);
sStroe.reload();
}
});
Ext.getCmp('sFieldset_panel').title = '增加新收费（* 为必填项）';
}
}
}
});

var seePanel = new Ext.FormPanel({
url:'',
id:'seePanel_grid',
border:false,
frame:true,
width:705,
autoHeight:true,
//height:350,
items:[seeGPanel,seeTextFiled],
tbar:[{
id:'conMCount',
name:'conMCount',
text:'金额统计:'
},conMoneySum,'-',
{
xtype:'button',
iconCls:'excelIcon',
tooltip:'把数据导出到excel',
handler:function () {
if (sStroe.getCount() == 0) {
Ext.Msg.show({
title:'提示',
msg: '暂无数据!',
icon: Ext.MessageBox.WARNING
});
return false;
}
var contractID = document.getElementById('contractID');
var formObjList = document.getElementById('toListExcel');
contractID.value = Ext.get('contractId').getValue();

formObjList.submit();
}
},'-',
'->',
{
xtype:'button',
id:'closePayInfo',
text:'关闭',
handler:function () {
seeWind.close(this);
cmWindow.show(this);
}
}
],
bbar:['->',mButn,'-',
{
text: '清空',handler:function(){
var frm=Ext.getCmp("seePanel_grid").getForm();
frm.reset();
Ext.getCmp('sFieldset_panel').setTitle('增加新收费（* 为必填项）');
}
}]
});

seeWind = new Ext.Window({
width: 715,
border:false,
frame:true,
resizable:false,
bodyStyle:'padding-top:0px;',
closable:false,//是否可以关闭
closeAction:'hide',
defaults : {
// 容器内元素是否显示边框
border : false
},
items:[seePanel]
});

function changRowNum(grid,rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex);
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
var dataValue = record.get(fieldName);

if (fieldName == 'sPayStatus') {
if (dataValue == '未支付') {
seePanel.form.submit({
reset: true,
url:'',
method:'GET',
failure: function(form, action) {
Ext.MessageBox.alert('提示',action.result.info);
},
success: function(form_instance_create, action) {
sStroe.reload();
}
});
} else if (dataValue == '已支付'){
seePanel.form.submit({
reset: true,
url:'',
method:'GET',
failure: function(form, action) {
Ext.MessageBox.alert('提示',action.result.info);
},
success: function(form_instance_create, action) {
sStroe.reload();
}
});
}
}
}


seeGPanel.addListener('cellclick', changRowNum);
sStroe.on('load',function (){
conMoneySum.setText(sStroe.sum('sPayMoney',0,sStroe.getTotalCount()-1) + '元');
});
cmWindow.hide();
seeWind.show(this);
}
}
},
{
text:'关闭',
name:'closePage',
handler:function () {
cmWindow.close(this);
maskDiv.style.display = 'none';
beginDate.setValue('');
endDate.setValue('');

//mainPanel.body.unmask();
}
}];

var cPanel = new Ext.FormPanel({
url:'',
id:'cPanel',
tbar:tCBar,
defaults:{
border : false
},
items:[{autoLoad:{id:'listGrid',url: '', scope: this,callback:function(){}, scripts: true,params:'cnID='+cnID}}]
});

cmWindow = new Ext.Window({
width: 715,
border:false,
frame:true,
resizable:false,
style: {
'background-color':'#999999'
},
closable:false,//是否可以关闭
closeAction:'hide',
defaults : {
// 容器内元素是否显示边框
border : false
},
items:[cPanel]
})
cmWindow.setPosition(278,100);
cmWindow.show(this);
}
}
}

endDate.on('blur',function () {
var bDate = beginDate.getValue();
var eDate = endDate.getValue();

if (bDate)
bDate = bDate.format('Y-m-d');
else
bDate = '';

if (eDate)
eDate = eDate.format('Y-m-d');
else
eDate = '';

if (bDate == '') {
Ext.MessageBox.alert("提示","起始时间不能为空!");
}

});

function doSelect() {
var id = selectType.getValue();
var xiInfo = selectKey.getValue();//得到当前选择输入框的值
var bDate = beginDate.getValue();
var eDate = endDate.getValue();
var area = selectArea.getValue();
if (bDate == null || bDate == '') {
bDate = '';
} else
bDate = bDate.format('Y-m-d');

if (eDate== null || eDate== '') {
eDate= '';
} else
eDate= eDate.format('Y-m-d');

if(id == null || id == ''){
id = '1';
}

if(eDate && !bDate) {
Ext.MessageBox.alert("提示","请选择开始结束时间!");
return false;
}

if(bDate && eDate == '') {
Ext.MessageBox.alert("提示","请选择结束结束时间!");
return false;
}

if (bDate && eDate)
if (compareDate(eDate,bDate) == 2) {
Ext.MessageBox.alert("提示","结束时间不能小于起始时间!");
return false;
}

store.load({params:{start:0,limit:15,typeId:id,info:xiInfo,beginDate:bDate,endDate:eDate,area:area}});
}

function compareDate(DateOne,DateTwo) {

var OneMonth = DateOne.substring(5,DateOne.lastIndexOf ("-"));
var OneDay = DateOne.substring(DateOne.length,DateOne.lastIndexOf ("-")+1);
var OneYear = DateOne.substring(0,DateOne.indexOf ("-"));

var TwoMonth = DateTwo.substring(5,DateTwo.lastIndexOf ("-"));
var TwoDay = DateTwo.substring(DateTwo.length,DateTwo.lastIndexOf ("-")+1);
var TwoYear = DateTwo.substring(0,DateTwo.indexOf ("-"));

if (Date.parse(OneMonth+"/"+OneDay+"/"+OneYear) > Date.parse(TwoMonth+"/"+TwoDay+"/"+TwoYear))
return 1;
else
return 2;
}

function exportExcel() {
if (store.getCount() == 0) {
Ext.Msg.show({
title:'提示',
msg: '暂无数据!',
icon: Ext.MessageBox.WARNING
});
return false;
}
var conID = selectType.getValue();
var xiInfo = selectKey.getValue();//得到当前选择输入框的值
var bDate = beginDate.getValue();
var eDate = endDate.getValue();
var area = selectArea.getValue();

if (bDate)
bDate = bDate.format('Y-m-d');
else
bDate = '';

if (eDate)
eDate = eDate.format('Y-m-d');
else
eDate = '';

var typeIDHidden = document.getElementById('typeID');
var infoHidden = document.getElementById('info');
var begDate = document.getElementById('begDate');
var enDate = document.getElementById('enDate');
var areaSet = document.getElementById('areaSet');

typeIDHidden.value = conID;
infoHidden.value = xiInfo;
begDate.value = bDate;
enDate.value = eDate;
areaSet.value = area;

var formObj = document.getElementById('toExce');
formObj.submit();

}

store.on('load', function() { //数据加载完毕后触发事件
var el = Ext.get('contract-grid');
var tableObj = el.select('table.x-grid3-row-table');
var k = 0;
var j = 0;
var n = 0;
for (var i = 0; i < store.getCount(); i++) {
if (store.getAt(i).get('contractStatus') == '进行中') {
k = i;
tableObj.item(k).addClass('x-grid3-row-customOne-class');
} else if (store.getAt(i).get('contractStatus') == '结束') {
j = i;
tableObj.item(j).addClass('x-grid3-row-customTwo-class');
} else if (store.getAt(i).get('contractStatus') == '完成') {
n = i;
tableObj.item(n).addClass('x-grid3-row-customThree-class');
}
}
});

});
相关附件:

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

ext2的树组件的使用（从底层到表现层，异步加载）
转载自http://www.javaeye.com/topic/132995

  1.  var Tree = Ext.tree;  
  2.      
  3.    var tree = new Tree.TreePanel({  
  4.        el:'tree',  
  5.        autoScroll:true,  
  6.        animate:true,  
  7.        enableDD:true,  
  8.        containerScroll: true,    
  9.        loader: new Tree.TreeLoader({  
 10.            dataUrl:'moduletree.do'  
 11.        })  
 12.    });  
 13.  
 14.    // set the root node  
 15.    var root = new Tree.AsyncTreeNode({  
 16.        text: '管辖单位',  
 17.        draggable:false,  
 18.        id:'source'  
 19.    });  
 20.    tree.setRootNode(root);  
 21.  
 22.    // render the tree  
 23.    tree.render();  
 24.    root.expand();  

el决定了树的显示位置，一般是个div例如



dataUrl决定了树的json数据来源，我这里是一个struts的action，这个action会输出json数据



在服务层要提供一个可以生成json格式数据的service，struts的任务是获取传来的参数调用service方法输出json

我在服务层生成json数据用的是jsonlib包，论坛有详细介绍的帖子，就不多说了

数据库有两个表来构建树，一个是树的节点表，至少包括树的id name 我这里还有一个haschild，代表有没有子节点。

另一个是节点关系表，两列分别是父节点和他对应的子节点。

service层调用dao的方法将结果集组装成List或者Map，再用jsonlib包提供的api将list转化成json,例如

  1.  //根据用户的角色和id生成用户的管辖单位树  
  2. public List getsubdept(String userid,Long roleid){  
  3.         try{  
  4. //调用dao的方法查找到结果集  
  5.         List list=roledeptdao.findRoledept(userid, roleid);  
  6. //生成json所使用的单位list  
  7.         List deptlist=new ArrayList();  
  8.         Iterator it=list.iterator();  
  9.         while(it.hasNext()){  
 10.             Ruledept rd=(Ruledept) it.next();  
 11.             Map tree = new HashMap();  
 12. //节点显示单位名              
 13. tree.put("text", rd.getId().getTYwxtDept().getDeptName());  
 14. //节点的id    
 15.         tree.put("id", rd.getId().getTYwxtDept().getDeptId());  
 16.             Object value = new Object();  
 17.             value = Boolean.TRUE;  
 18.             tree.put("cls", "file");  
 19. //是否是叶子节点，我这里只有一层所以直接写的TRUE  
 20.             tree.put("leaf", value);  
 21. //将这个生成叶子节点对应的MAP加到单位list里  
 22.             deptlist.add(tree);  
 23.         }  
 24.            
 25.         return deptlist;  
 26.         }catch(Exception e){  
 27.             log.error("获取单位列表失败"+e.getMessage());  
 28.             return null;  
 29.         }  
 30.            
 31.     }  
 32.  
 33.     public JSONArray getmoduletree(String userid, String roleid) {  
 34.         List list=this.getsubdept(userid, new Long(roleid));  
 35.         if(list==null){  
 36.             return null;  
 37.         }  
 38. //转换这个list让他变成json格式      
 39.     JSONArray jsonArray = JSONArray.fromObject(list);  
 40.         return jsonArray;  
 41.     }  


在action里面调用这个service方法：
java 代码

  1.  public ActionForward execute(ActionMapping mapping, ActionForm form,  
  2.             HttpServletRequest request, HttpServletResponse response) {  
  3.  
  4.         HttpSession httpsession=request.getSession();  
  5.         String roleid=(String) httpsession.getAttribute("role");  
  6.         UserInfo userinfo=(UserInfo)httpsession.getAttribute("userinfo");  
  7.         String userid=userinfo.getUserID();  
  8.         JSONArray jsonArray=this.getRoledeptservice().getmoduletree(userid, roleid);  
  9.         response.setContentType("text/json; charset=GBK");    
 10.             try {  
 11.                 response.getWriter().print(jsonArray);  
 12.             } catch (IOException e) {  
 13.                 log.error("输出json失败"+e.getMessage());  
 14.                 return null;  
 15.             }  
 16.        
 17.     return null;  
 18.     }  


这样一个完整的树就生成了，现在这个树是只有两层，如果是多层的就需要修改service方法来递归构造一个树的list再转化成json。

异步读取节点：首先，底层的service方法要做到每次生成的是传入参数的下一级节点的list，然后在js的 tree.setRootNode(root);下面加上这句：js 代码

# tree.on('beforeload', function(node){  
# tree.loader.dataUrl = 'createTree.do?id='+node.id;  
# });

tree.loader.dataUrl 的值需要返回的就是该节点id的下一级的json数据

数据量大的时候异步加载要好的多，服务层也代码比起一次性全部加载的反复递归调用省不少

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

在EXT中使用FCKEditor编辑器例子

转载自http://www.javaeye.com/topic/170998

最近有朋友问我在EXT中使用FCKEditor编辑器遇到的一些问题,于是自己花一点时间写了一个例子,提供给大家学习。
例子已经配置好上传图片/flash/文件到服务器的功能，下载附件ext-fckeditor.rar，布署运行工程下的 /ext/examples/form/fckForm.html即可。如http://localhost: 8080/ext/examples/form/fckForm.html
代码如下：

  1. Ext.onReady(function(){  
  2. var fckeditorFormPanel = new Ext.FormPanel({  
  3.         labelWidth: 75,  
  4.         url:'',  
  5.         frame:true,  
  6.         title: 'fckeditor Form',  
  7.         bodyStyle:'padding:5px 5px 0',  
  8.         width: 950,  
  9.         height:450,  
 10.         defaultType: 'textfield',  
 11.  
 12.         items: [{  
 13.                     xtype:'textarea',  
 14.                     fieldLabel:'编辑',  
 15.                     labelSeparator:'：',  
 16.                     id:'code',  
 17.                     name:'code',  
 18.                     height:200,  
 19.                     width:300  
 20.                 }  
 21.         ],  
 22.         buttons: [{  
 23.             text: 'Save'  
 24.         },{  
 25.             text: 'Cancel'  
 26.         }]  
 27.     });    
 28.     fckeditorFormPanel.render(document.body);  
 29.     /**
 30.          * 以下创建在线编辑器
 31.          */  
 32.     var oFCKeditor = new FCKeditor( 'code',810,350 ) ;  
 33.     oFCKeditor.BasePath = "/fckeditor/" ;  
 34.     oFCKeditor.ToolbarSet = 'Default';  
 35.     oFCKeditor.ReplaceTextarea() ;    
 36. });
相关附件: ext-fckeditor.rar　

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

Ext 的实例演示。
转载自http://www.javaeye.com/topic/154369

做了一个基于ext的ajax小例子，包括从前台到后台的完整调用。

前台是jsp加上ext的框架。
后台是hibernate-annotations和spring以及dwr的组合。
顺便演示了一下用servlet来返回json数据给ext框架的方式。

在grid的演示部分，包括了分页的数据调用和如何处理来自于dwr的数据(dwr的部分和官方网站公布的方法一样)
以及grid的事件处理。

实例的源代码中没有包括jar包，如果需要运行，请根据jar.jpg所显示的jar包添加。
数据库部分请根据create.sql来生成。
相关附件: ExtTest.rar　

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

用预配置类设计模式重新实现Hello World例子

转载自http://www.javaeye.com/topic/193544

在ExtJS官方论坛上，jsakalos 提出了采用预配置类(Pre-configured classes)设计界面组件的模式。请看这里：
（1http://extjs.com/forum/showthread.php?t=32292
（2http://extjs.com/forum/showthread.php?t=26728

一直不太习惯这种方式。最近有机会重构原有项目的ExtJS源代码，想使用这种新模式。作为练习，重新实现了ExtJS发行包中的Hello World例子(examples\window\hello.html)。

解开附件，拷贝其中的文件到 examples\window 目录即可（在ExtJS 2.1下测试通过）。
相关附件: hello2.zip　

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

打造Ext2.0模块化单页系统Demo

转载自http://www.javaeye.com/topic/186956

具体的解析http://microboat.javaeye.com/blog/182682
http://microboat.javaeye.com/blog/183149
相关附件: OPOAdemo.rar　

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

Ext Portal 新例子

我综合了Ext社区目前有关Ext Portal的最新发表的扩展和讨论, 形成了一个新的例子.

将附件解开后,放置到与examples\portal目录并行的位置,即:
ext-2.0\examples\portal
ext-2.0\examples\portal2

运行其中的portal.html可以看到下列效果:
1.基本功能
......1).点击复选框,显示Portlet.
......2).取消复选框,关闭Portlet.
......3).点击Portlet中的关闭图标,自动取消复选框.
2.状态保存功能
......1).能保存复选框状态.
......2).能自动打开上次打开过的Portlet.
......3).能记忆Portlet的顺序关系(拖动后保存).
......4).能记忆Portlet的高度（宽度由列布局自动伸展排列）.
3.扩展功能
......1).添加最大化图标
......2).能调整Panel的高度。
4.Portlet中显示内容
......1).访问Google主页。
......2).显示网格。
......3).显示HTML.

遗留问题:
1.在FF下,收缩Google主页所在Portlet,重新回到Google主页,不能保留当前页面状态.
2.打开SampleGrid Portlet,关闭后,重新打开,不能显示网格.

希望大家一起来提高Ext Portal的应用水平.
相关附件: portal2.zip　

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

为感谢论坛发布
http://blog.csdn.net/edisundong/archive/2008/01/25/2065379.aspx

说明：

感谢飞天色鼠和javaeye论坛的sp2，其实是改了飞天色鼠的代码。sp2给了很大帮助，感谢！

演示效果：



没有办法了，图片只能显示在下面，看来只能分开发帖了啊
相关附件:

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

调用代码如下：

var auto_field=new Ext.form.MultiSelectField();
if(contextlist==null)
{
auto_field.contextArray=
[
['1','一'],
['2','二'],
['3','三']
]
}
else
{
auto_field.contextArray=contextlist;
}
auto_field.fieldLabel=text;
auto_field.id=id;
auto_field.name=id;
return auto_field;

代码如下：
Ext.form.MultiSelectField = Ext.extend(Ext.form.TriggerField,  {    
   readOnly : true ,    
   defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},    
   displayField : 'text',    
   contextArray: undefined, //必须满足每行至少两列,第一、二列分别为[value,text]  
   valueField : undefined,    
   hiddenName : undefined,    
   listWidth : undefined,    
   minListWidth : 50,    
   layerHeight : undefined,    
   minLayerHeight : 60,    
   value : undefined,    
   baseParams : {},    
   checkpanel:undefined,  
   initComponent : function()  
   {    
           Ext.form.MultiSelectField.superclass.initComponent.call(this);    
           this.addEvents  
           (    
                   'select',    
                   'expand',    
                   'collapse',    
                   'beforeselect'          
           );    
           if(this.transform)  
           {    
               this.allowDomMove = false;    
               var s = Ext.getDom(this.transform);    
               if(!this.hiddenName)  
               {    
                   this.hiddenName = s.name;    
               }    
               s.name = Ext.id();      
               if(!this.lazyRender)  
               {    
                   this.target = true;    
                   this.el = Ext.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);    
                   Ext.removeNode(s);      
                   this.render(this.el.parentNode);    
               }else{    
                   Ext.removeNode(s);      
               }    
           }    
   },    
   onRender : function(ct, position)  
   {    
       Ext.form.MultiSelectField.superclass.onRender.call(this, ct, position);    
       if(this.hiddenName)  
       {    
           this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},    
                   'before', true);    
           this.hiddenField.value =    
               this.hiddenValue !== undefined ? this.hiddenValue :    
               this.value !== undefined ? this.value : '';    
           this.el.dom.removeAttribute('name');    
       }    
       if(Ext.isGecko){    
           this.el.dom.setAttribute('autocomplete', 'off');    
       }    
       this.initList();    
   },    
   initList : function()  
   {    
       if(!this.list)  
       {    
           var cls = 'x-multiselectfield-list';    
           this.list = new Ext.Layer  
           ({    
               shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false    
           });    
           var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);    
           this.list.setWidth(lw);    
           this.list.swallowEvent('mousewheel');    
           this.innerList = this.list.createChild({cls:cls+'-inner'});    
           this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));    
           this.innerList.setHeight(this.layerHeight || this.minLayerHeight);    
           if(!this.checkpanel)  
           {    
               this.checkpanel = this.CheckPanel(this.innerList);        
           }    
           this.checkpanel.render();    
       }    
   },    
   onSelect:function(id,text,checked)  
   {    
           this.setValue(id,text,checked);    
   },    
   CheckPanel:function(el)  
   {    
       var checkpanel = new Ext.Panel  
       ({    
           el:el,    
           autoScroll:true  
       });    
       var multiselectField = this;  
       if(typeof this.contextArray != 'undefined')  
       {  
           for(var i=0;i            {  
               var contArry=this.contextArray[i];  
               var auto_field=new Ext.form.Checkbox  
               ({  
                   boxLabel:contArry[1],  
                   id:contArry[0],  
                   name:contArry[0],  
                   cls :'x-multiselectfield-list'  
               });  
               auto_field.on('check',function(auto_field)  
               {    
                   multiselectField.onSelect(auto_field.id,auto_field.boxLabel,auto_field.checked);  
               });    
               checkpanel.add(auto_field);            
           }  
       }  
       return checkpanel  
   },    
   getValue : function()  
   {    
       if(typeof this.value != 'undefined')  
       {    
           return this.value;    
       }  
       else  
       {    
           return Ext.form.MultiSelectField.superclass.getValue.call(this);    
       }    
   },    
   setValue : function(id,text,ischecked)  
   {    
       var text = text;    
       var value = id;    
       var return_text_string;  
       var return_value_string;  
 
       var text_temp    = Ext.form.MultiSelectField.superclass.getValue.call(this);    
       var ids_temp     = typeof this.value != 'undefined' ? this.value : '';  
       var text_arrtemp = text_temp.split(",");  
       var ID_arrtemp   = ids_temp.split(",");  
       if(ischecked)  
       {        
           Array.add(text_arrtemp,text);  
           Array.add(ID_arrtemp,value);  
       }  
       else  
       {  
           Array.remove(text_arrtemp,text);  
           Array.remove(ID_arrtemp,value);        
       }  
       return_text_string  = text_arrtemp.toString();  
       return_value_string = ID_arrtemp.toString();  
       var first_text_str  = return_text_string.substr(0,1);  
       var first_value_str = return_value_string.substr(0,1);  
       if(first_text_str==",")  
       {  
         return_text_string=return_text_string.substr(1);  
       }  
       if(first_value_str==",")  
       {  
         return_value_string=return_value_string.substr(1);  
       }  
       Ext.form.MultiSelectField.superclass.setValue.call(this, return_text_string);    
       this.value = return_value_string;  
       if(this.hiddenField)  
       {    
           this.hiddenField.value = return_value_string;    
       }    
 
   },      
   onDestroy : function()  
   {    
       if(this.list)  
       {    
           this.list.destroy();    
       }    
       Ext.form.MultiSelectField.superclass.onDestroy.call(this);    
   },    
   collapseIf : function(e)  
   {    
       if(!e.within(this.wrap) && !e.within(this.list))  
       {    
           this.collapse();    
       }    
   },    
   expand : function()  
   {    
       if(this.isExpanded() || !this.hasFocus)  
       {    
           return;    
       }    
       this.list.alignTo(this.wrap, this.listAlign);    
       this.list.show();    
       Ext.getDoc().on('mousewheel', this.collapseIf, this);    
       Ext.getDoc().on('mousedown', this.collapseIf, this);    
       this.fireEvent('expand', this);    
   },    
   collapse : function()  
   {    
       if(!this.isExpanded())  
       {    
           return;    
       }    
       this.list.hide();    
       Ext.getDoc().un('mousewheel', this.collapseIf, this);    
       Ext.getDoc().un('mousedown', this.collapseIf, this);    
       this.fireEvent('collapse', this);    
   },    
   isExpanded : function()  
   {    
       return this.list && this.list.isVisible();    
   },    
   onTriggerClick : function()  
   {    
       if(this.disabled)  
       {    
           return;    
       }    
       if(this.isExpanded())  
       {    
           this.collapse();    
       }  
       else  
       {    
           this.onFocus({});    
           this.expand();    
       }    
       this.el.focus();    
   }    
});    
Ext.reg('multiselectfield', Ext.form.MultiSelectField);

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

超简单实现:Ext.TabPanel加入iframe

转载自http://www.javaeye.com/topic/168550


funtab.add({  
                 title:titleText ,  
                 id:'tab_'+id,  
                 iconCls: 'tabs',                    
                 margins:'0 4 4 0',  
                 autoHeight:true,  
                 autoScroll:true,  
                 autoWidth:true,  
                 closable:true,  
                 frame:true,  
                 html:'+UrlText+'" width="100%" height="400" frameborder="0" scrolling="auto">'  
           }).show();

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

ExtJS2.0+struts实现文件上传
Extjs+struts实现文件上传
本人最近一直在研究extjs，感觉其功能强大复杂，前段时间做了个项目，要使用extjs实现文件上传，下面写出研究成果，与各位一起分享。
1.fileUpload.js

Ext.onReady(function(){  
 
 var form = new Ext.form.FormPanel({  
    renderTo:'file',  
    labelAlign: 'right',  
    title: '文件上传',  
    labelWidth: 60,  
    frame:true,  
    url: '../upload.do?op=uploadFile',//fileUploadServlet  
    width: 300,  
    height:200,  
    fileUpload: true,  
   
 
    items: [{  
       xtype: 'textfield',  
       fieldLabel: '文件名',  
       name: 'file',  
       inputType: 'file'//文件类型  
     }],  
     
   buttons: [{  
       text: '上传',  
       handler: function() {  
       form.getForm().submit({  
       success: function(form, action){  
          Ext.Msg.alert('信息', '文件上传成功！');  
       },  
      failure: function(){  
         Ext.Msg.alert('错误', '文件上传失败');  
      }  
    });  
   }  
 }]  
 });  
 
 });  

2.uploadAction.java 其中使用了cos上传组件，下载地址http://www.servlets.com/cos/cos-05Nov2002.zip

  1. package zx.struts.actions;  
  2.  
  3. import java.io.File;  
  4. import java.util.Enumeration;  
  5.  
  6. import javax.servlet.http.HttpServletRequest;  
  7. import javax.servlet.http.HttpServletResponse;  
  8.  
  9. import org.apache.struts.action.ActionForm;  
 10. import org.apache.struts.action.ActionForward;  
 11. import org.apache.struts.action.ActionMapping;  
 12.  
 13. import com.oreilly.servlet.MultipartRequest;  
 14.  
 15.  
 16. public class UploadAction extends DispatchAction{  
 17.     public ActionForward uploadFile(ActionMapping mapping, ActionForm form,  
 18.             HttpServletRequest request, HttpServletResponse response)throws Exception {  
 19.  
 20.          
 21.         String saveDirectory ="F:\\jboss-4.2.2.GA\\server\\default\\deploy\\userDemo.war\\upload";      //文件上传后，保存的位置  
 22.  
 23.         int maxPostSize =3 * 5 * 1024 * 1024 ;   //每个文件最大5MB,最多3个文件,所以...  
 24.        
 25.         //response的编码为"gb2312"  
 26.         MultipartRequest multi =  
 27.                new MultipartRequest(request, saveDirectory, maxPostSize,  
 28.                                     "gb2312");  
 29.  
 30.         //输出反馈信息  
 31.          Enumeration files = multi.getFileNames();    
 32.              while (files.hasMoreElements()) {  
 33.                  
 34.                String name = (String)files.nextElement();  
 35.                File f = multi.getFile(name);  
 36.                if(f!=null){  
 37.                  String fileName = multi.getFilesystemName(name);  
 38.                  String lastFileName= saveDirectory+"\\" + fileName;  
 39.                  System.out.println("上传的文件:"+lastFileName);  
 40.                    
 41.  
 42.                }  
 43.              }  
 44.  
 45.      
 46.    return null;  
 47. }  
 48. }  

转载自：http://www.javaeye.com/topic/174741

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

一个java+sitemesh+ext+ar+json的例子

数据库采用MYSQL，表结构在/myweb/db/myweb.sql中定义，仅是一个用户资料管理的简单例子，演示各个环节如何结合使用。运行环境JDK6,TOMCAT6。

转载自：http://www.javaeye.com/topic/180028
相关附件: myweb.rar　

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

学习EXT过程中做的一个例子

转载自：http://www.javaeye.com/topic/150258
相关附件: Ext.rar　

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

验证图片客户端控制类for Ext


obj = page = UI = Ext; //注意这句，Ext作用太多，明确一下对象的用途希望代码更清晰：）  
/**
* @class Client.Util.html.waterMarkPic  
* 验证图片客户端控制类
* @param {Object} config
*/  
Client.Util.html.waterMarkPic = function(config){  
   obj.apply(this, config);  
}  
Client.Util.html.waterMarkPic.prototype = {  
   tag: 'img',  
   alt: '单击刷新验证图片',  
   cls: 'waterMarkImg',  
   src: 'demoResources/waterMarkPic.jpg',  
   vspace: 5,  
   hspace: 5,  
   init: function(container){  
       container.on('render', function(container){  
           var imgEl = container.getEl().child('img.waterMarkImg');  
           imgEl.addClass('mouseHoverWithHand');  
           imgEl.on('click', this.onImgClick, this);  
       }, this, {  
           delay: 100  
       });  
   },  
   onImgClick: function(e, el){  
       el.src = this.src;  
   }  
}  

示例：


obj.namespace('global.membership');  
global.membership.loginPanel = obj.extend(UI.Window, {  
   title : 'xxx欢迎您！',  
   initComponent : function(){  
       //建立验证图片实例  
       var waterMarkPic = new Client.Util.html.waterMarkPic();  
       this.html.children[2].children[2] = waterMarkPic;  
       global.membership.loginPanel.superclass.initComponent.call(this);  
       waterMarkPic.init(this);  
   },  
   html: {  
       tag : 'form', children : [  
           {  
               tag : 'div', cls: 'global-membership-loginPanel-row', children : [  
                   {  
                       tag : 'span', html : "E-Mail"  
                   },{  
                       tag: 'input', type : 'text',  
                       cls: 'global-membership-loginPanel-inputStyle_1',  
                       value : 'email', name: "email"    
                   }  
               ]  
           },{  
               tag : 'div', cls: 'global-membership-loginPanel-row',  children : [  
                   {  
                       tag : 'span', html : "密码"  
                   },{  
                       cls : 'global-membership-loginPanel-inputStyle_1',  
                       tag: 'input', type : 'password', value : '', name: "password"    
                   }  
               ]  
           },{  
               tag : 'div', cls: 'global-membership-loginPanel-row', children : [  
                   {  
                       tag : 'span', html : "验证码"  
                   },{  
                       tag: 'input', type : 'text',  
                       cls : 'global-membership-loginPanel-inputWaterMarkPic',  
                       value : 'email', name: "waterMarkPic"    
                   }  
                   //应该在这里建立验证图片的实例  
               ]  
           },  
           Client.Util.html.CF_br,{  
               tag :'a', children:[  
                   {  
                       tag : 'input', type: 'checkbox', id: 'global-membership-loginPanel-optionRememberMe'  
                   },{  
                       tag : 'lable', html :'记住我', 'for': 'global-membership-loginPanel-optionRememberMe'  
                   }  
               ]  
           },{  
               tag : 'div', children:[  
                   {tag : 'a', html:'忘记了密码？'},  
                   {tag : 'a', html:'还未注册？'}  
               ]  
           }  
       ]  
   },  
   buttons : [{  
       text: 'submit',  
       handler : function(){  
           l(9)  
       }  
   }],  
   title : 'dfdf',  
   width:270,  
   height:300  
});  

样式：

div.global-membership-loginPanel-row {
   margin-top: 10px;
}

div.global-membership-loginPanel-row span {
   width: 60px;
   display: block;
   float: left;
   clear: left;
   color: red;
   text-align: right;
   padding: 3px;
}
input.global-membership-loginPanel-inputWaterMarkPic{
   height: 18px;
   width: 60px;    
}
input.global-membership-loginPanel-inputStyle_1 {
   height: 18px;
   width: 120px;
}

转载自：http://www.javaeye.com/topic/178064

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

第二个
转载自：http://www.javaeye.com/topic/142073
相关附件: AjaxHou2.zip　

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

我的ext范例

转载自http://www.javaeye.com/topic/142073
附件太大了。还是一个一个上传吧
相关附件: AjaxHou1.zip　

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

第三个：
转载自http://www.javaeye.com/topic/142073
相关附件: AjaxHou3.zip　

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

演示地址http://www.javaxm.cn/myblog/login.html
使用Ext 2.0做的管理员登录实例,后台语言是asp

目前你所访问的这个程序是我正在开发的程序，服务器端是使用ASP。我不擅长使用ASP语言编写数据库管理程序，我研究的方面是J2EE，目前正在探索Struts,Spring,Hibernate,Ext Js,DWR等技术在项目中的实际应用，不过由于目前网上J2EE服务器的价格很贵，我只能在ASP服务器上演示我的程序，因此服务端的后台均采用 ASP。
这是一个人个博客程序，此程序正处于开发阶段，我将持续开发此程序，以期以完整实现。

转载自：http://www.javaeye.com/topic/162148
相关附件: 我的博客.rar　

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

我顶！我顶！我顶！我顶！我我顶！我顶！我顶！我顶！我顶！我顶！顶！我顶！我顶！

强烈要求加精！太棒啦！

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

太好了。真的对ext学习好有帮忙。顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶！
同时感谢这位大侠了。

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

为了大家的供同学习,大家多多提供资源.  发帖交流

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

支持一下呀!

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

支持,太好了

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

不错，哈哈。早就想看一看了，不知道是我以前的浏览器有问题还是怎么的，这个帖子一进来，浏览器就死了，今天我把firefox装上了，才看到。学习了，哈哈。

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

真是好东西哈。呵呵！

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

用extjs做的appspot网站

在日常生活中，经常花了钱，但又不知道钱花在什么地方，总感觉钱不知不觉就没了，为此我做了一个小网站，记录日常消费和收入情况，通过报表反应出个人消费喜好，以及收入情况，用到的技术包括: python,extjs,FusionCharts(js报表),google app engine等，相信本网站对每个人都会有用的。
网址:http://ttlicai.appspot.com [url][/url]


http://ttlicai.appspot.com/images/j3.jpg[img][/img]


http://ttlicai.appspot.com/images/j1.jpg[img][/img]

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

gjk