Extjs单独定义各组件的实例代码


Posted in Javascript onJune 25, 2013

网上看到的一个事例,其中包含了组件的定义拷贝下来供大家参考:

Ext.onReady(function(){ 
var dtCategory=[ 
['all','所有种类'], 
['1','Beverages'], 
['2','Condiments'], 
['3','Confections'], 
['4','Dairy Products'], 
['5','Grains/Cereals'], 
['6','Meat/Poultry '], 
['7','Produce'], 
['8','Seafood'] 
]; 
var stCategory=new Ext.data.SimpleStore({ 
fields:['value','text'], 
data:dtCategory 
}); 
var cbCategory=new Ext.form.ComboBox({ 
id:"cbCategory", 
store:stCategory, 
displayField:"text", 
valueField:"value", 
typeAhead:true, 
mode:"local", 
triggerAction:"all", 
emptyText:"请选择商品种类...", 
editable:false, 
allowBlank:false, 
blankText:"商品种类必须选择", 
autoSelect:true, 
selectOnFoucus:true, 
value:'', 
dfval:'' 
}); 
cbCategory.setValue("all"); 
var tfName=new Ext.form.TextField({ 
id:'tfName' 
}); 
var btnSearch=new Ext.Button({ 
id:'btnSearch', 
iconCls:'btn_search', 
text:'搜索', 
handler:function(){ 
stProduct.load({params:{start:0,limit:10,categoryName:Ext.getCmp("cbCategory").getValue(),productName:Ext.getCmp("tfName").getValue()}}); 
} 
}); 
var btnHelp=new Ext.Button({ 
text:'帮助', 
iconCls:'btn_help' 
}) 
var tb=new Ext.Toolbar({ 
id:'tb', 
items:[ 
'商品种类:', 
cbCategory, 
'-', 
'商品名称:', 
tfName, 
btnSearch, 
'->', 
btnHelp 
] 
}); 
var pnNorth=new Ext.Panel({ 
id:'pnNorth', 
region:'north', 
autoHeight:true, 
items:[ 
tb 
] 
}); 
var url="Default.aspx"; 
var stProduct=new Ext.data.Store({ 
id:"st", 
proxy:new Ext.data.HttpProxy({url:url}), 
reader:new Ext.data.JsonReader({totalProperty:"totalProperty",root:"root",fields:[{name:"ProductID"},{name:"ProductName"},{name:"CategoryName"},{name:'UnitPrice'},{name:'Discontinued'},{name:'QuantityPerUnit'},{name:'CompanyName'}] })//ProductID作为隐藏列,不显示在gridpanel中 
}); 
stProduct.load({params:{start:0,limit:10,categoryName:Ext.getCmp("cbCategory").getValue(),productName:Ext.getCmp("tfName").getValue()}}); 
var cmProduct=new Ext.grid.ColumnModel([ 
new Ext.grid.RowNumberer(), 
{header:"产品名称",dataIndex:"ProductName",sortable:true}, 
{header:"产品种类",dataIndex:"CategoryName",sortable:true}, 
{header:"单价",dataIndex:"UnitPrice",sortable:true}, 
{header:"是否停产",dataIndex:"Discontinued",sortable:true}, 
{header:"规格",dataIndex:"QuantityPerUnit",sortable:true}, 
{header:"供货商",dataIndex:"CompanyName",sortable:true} 
]); 
var pgtbProduct=new Ext.PagingToolbar({ 
id:"pgtbProduct", 
displayInfo:true, 
emptyMsg:"没有数据要显示!", 
displayMsg:"当前为第{0}--{1}条,共{2}条数据", 
store:stProduct, 
pageSize:10 
}); 
var grdProduct=new Ext.grid.GridPanel({ 
id:"grdProduct", 
title:"商品信息", 
cm:cmProduct, 
store:stProduct, 
autoWidth:true, 
selModel:new Ext.grid.RowSelectionModel({single:true}), 
height: screen.availHeight-190, 
frame: true, 
pageSize:20, 
bbar:pgtbProduct, 
//autoExpandColumn:6, 
loadMask:true, 
viewConfig:{ 
forceFit:true 
} 
}); 
var stSupplier = new Ext.data.Store({ 
id: "stSupplier", 
autoLoad:true, 
proxy: new Ext.data.HttpProxy({ url: "ProductInfo.aspx?type=getSupplierInfo" }), 
reader: new Ext.data.JsonReader({ totalProperty: "totalProperty", root: "root", fields: [{ name: "sID" }, { name: "cName"}] }) 
}); 
var pnProduct=new Ext.Panel({ 
id:'pnProduct', 
title:'商品信息', 
autoHeight:true, 
items:[ 
new Ext.Panel({ 
id:'pnProductRowOne', 
border:false, 
bodyStyle:'padding-top:10px;', 
layout:'column', 
items:[ 
new Ext.Panel({ 
columnWidth:.5, 
border:false, 
layout:'form', 
labelWidth:60, 
labelAlign:'right', 
items:[ 
{ 
xtype:'textfield', 
id:'ProductName', 
name:'ProductName', 
fieldLabel:'商品名称', 
anchor:'95%' 
} 
] 
}), 
new Ext.Panel({ 
columnWidth:.25, 
border:false, 
layout:'form', 
labelWidth:60, 
labelAlign:'right', 
items:[ 
{ 
xtype:'radio', 
id:'DiscontinuedOneID', 
//hiddenName:'Discontinued', 
name:'Discontinued', 
inputValue:'1', 
fieldLabel:'是否停售', 
boxLabel:'是', 
anchor:'95%' 
} 
] 
}), 
new Ext.Panel({ 
columnWidth:.25, 
border:false, 
layout:'form', 
labelWidth:60, 
labelAlign:'right', 
items:[ 
{ 
xtype:'radio', 
id:'DiscontinuedTwoID', 
//hiddenName:'Discontinued', 
name:'Discontinued', 
checked:true, 
inputValue:'0', 
boxLabel:'否', 
anchor:'95%' 
} 
] 
}) 
] 
}), 
new Ext.Panel({ 
id:'pnProductRowTwo', 
border:false, 
layout:'column', 
items:[ 
new Ext.Panel({ 
columnWidth:.5, 
border:false, 
layout:'form', 
labelWidth:60, 
labelAlign:'right', 
items:[ 
{ 
xtype:'textfield', 
id:'QuantityPerUnit', 
name:'QuantityPerUnit', 
fieldLabel:'规格', 
anchor:'95%' 
} 
] 
}), 
new Ext.Panel({ 
columnWidth:.5, 
border:false, 
layout:'form', 
labelWidth:60, 
labelAlign:'right', 
items:[ 
{ 
xtype:'textfield', 
id:'UnitPrice', 
name:'UnitPrice', 
fieldLabel:'单价', 
anchor:'95%' 
} 
] 
}) 
] 
}), 
new Ext.Panel({ 
id:'pnProductRowThree', 
border:false, 
layout:'column', 
items:[ 
new Ext.Panel({ 
columnWidth:.5, 
border:false, 
layout:'form', 
labelWidth:60, 
labelAlign:'right', 
items:[ 
{ 
xtype:'textfield', 
id:'UnitsInStock', 
name:'UnitsInStock', 
fieldLabel:'库存量', 
anchor:'95%' 
} 
] 
}) 
, 
new Ext.Panel({ 
columnWidth:.5, 
border:false, 
layout:'form', 
labelWidth:60, 
labelAlign:'right', 
items:[ 
{ 
xtype:'combo', 
id:'CommpanyName', 
//name:'CommpanyName', 
hiddenName:'SupplierID', 
fieldLabel:'供货商', 
displayField: 'cName', 
valueField: 'sID', 
mode: 'local', 
typeAhead: true, 
triggerAction: "all", 
editable: false, 
allowBlank: false, 
autoSelect: true, 
selectOnFoucus: true, 
store: stSupplier, 
anchor:'95%' 
} 
] 
}) 
] 
}) 
] 
}); 
var pnCategory=new Ext.Panel({ 
id:'pnCategory', 
title:'商品相关种类信息', 
autoHeight:true, 
items:[ 
new Ext.Panel({ 
id:'pnCategoryRowOne', 
border:false, 
bodyStyle:'padding-top:10px;', 
layout:'column', 
items:[ 
new Ext.Panel({ 
columnWidth:.5, 
border:false, 
layout:'form', 
labelWidth:60, 
labelAlign:'right', 
items:[ 
{ 
xtype:'textfield', 
id:'CategoryName', 
name:'CategoryName', 
fieldLabel:'商品种类', 
anchor:'95%' 
}, 
{ 
xtype:'textfield', 
id:'Description', 
name:'Description', 
fieldLabel:'商品描述', 
anchor:'95%' 
}, 
{ 
xtype:'hidden', 
id:'CategoryID', 
name:'CategoryID', 
fieldLabel:'种类编号'//这个是隐藏的 
} 
] 
}), 
new Ext.Panel({ 
columnWidth:.5, 
border:false, 
bodyStyle:'padding-left:25px;', 
layout:'form', 
labelWidth:60, 
labelAlign:'right', 
items:[ 
{ 
xtype:'box',// 
id:'CategoryImage', 
width:172, 
height:120, 
autoEl:{ 
tag:'image', 
src:'tempFile/1.png' 
} 
} 
] 
}) 
] 
}) 
] 
}); 
var tpProduct=new Ext.TabPanel({//很多时候我们可能是一个表单放在不同的tab中,为了方便提交和加载数据可以在tabpanel最外层放一个formpanel,但是显示就有问题,这个时候可以通过设置tabpanel高度和deferredRender、layoutOnTabChange两个属性来调整 
id:'tpProduct', 
deferredRender:false,//是否第一次显示就渲染所有tab(默认为true) 
layoutOnTabChange:true, 
//height:300, 
//autoTabs:true, 
activeTab:0, 
border:false, 
items:[ 
pnProduct, 
pnCategory 
] 
}); 
var fpProduct=new Ext.FormPanel({//作为TabPanel的容器 
id:'fpProduct', 
reader: new Ext.data.JsonReader({ 
successProperty: 'success',//后台返回的json中成功与否的字段名称 
root: 'info'//后台返回的json中,数据字段名称 
}, 
[ 
'ProductName', 
//'Discontinued', 
'QuantityPerUnit', 
'UnitPrice', 
'UnitsInStock', 
'CategoryID', 
'CategoryName', 
'Description', 
'SupplierID' 
] 
), 
items:[ 
tpProduct 
] 
}); 
var winProductInfo=new Ext.Window({ 
title:'商品信息', 
width:450, 
height:300, 
layout:'fit', 
closeAction:'hide', 
plain:true,//true则主体背景透明,false则和主体背景有些差别 
collapsible:true,//是否可收缩 
modal:true,//是否为模式窗体 
items:[ 
fpProduct 
], 
buttons:[//窗体按钮 
{ 
text:'提交', 
handler:function(){ 
if(fpProduct.getForm().isValid()){ 
var record=grdProduct.getSelectionModel().getSelected(); 
fpProduct.getForm().submit({ 
method:'post', 
url:'ProductInfo.aspx?type=updateProductInfo&productId='+record.get("ProductID"), 
waitMsg:'数据更新中...', 
success:function(){ 
stProduct.reload(); 
Ext.Msg.alert("系统提示","提交成功!"); 
}, 
failure:function(){ 
Ext.Msg.alert("系统提示","提交失败!"); 
} 
}); 
} 
} 
}, 
{ 
text:'关闭', 
handler:function(){//点击时触发的事件 
winProductInfo.hide(); 
} 
} 
] 
}); 
// Ext.getCmp('tp').on("tabchange",function(tabPanel,tab){ 
// Ext.Msg.alert("系统提示","Tab标题:"+tab.title); 
// }); 
grdProduct.on("rowdblclick",function(grid,rowIndex,e){ 
var row=grid.getStore().getAt(rowIndex).data; 
//Ext.Msg.alert("系统提示","行:"+rowIndex+" 产品ID:"+row.ProductID); 
fpProduct.form.load({//利用load自动填充,注意表单控件字段一定要和json中一致 
url:'ProductInfo.aspx?type=getProductInfo&productId='+row.ProductID, 
waitMsg:'数据加载中...', 
success:function(){ 
//alert("tempFile/"+row.CategoryName+".png"); 
if(row.Discontinued=="是"){ 
Ext.getCmp('DiscontinuedOneID').setValue(true); 
}else{ 
Ext.getCmp('DiscontinuedTwoID').setValue(true); 
} 
Ext.getCmp('CategoryImage').getEl().dom.src="tempFile/"+row.CategoryName+".png"; 
}, 
failure:function(){ 
Ext.Msg.alert("系统提示","数据加载失败!"); 
} 
}); 
winProductInfo.show(); 
}); 
var pnCenter=new Ext.Panel({ 
id:'pnCenter', 
region:'center', 
items:[ 
grdProduct 
] 
}); 
var vp=new Ext.Viewport({ 
id:'vp', 
layout:'border', 
renderTo:Ext.getBody(), 
items:[ 
pnNorth, 
pnCenter 
] 
}); 
});
Javascript 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
使弱类型的语言JavaScript变强势
Jun 22 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 #Javascript
Jquery选择子控件"大于号"和" "区别介绍及使用示例
Jun 25 #Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 #Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 #Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 #Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 #Javascript
js中复制行和删除行的操作实例
Jun 25 #Javascript
You might like
javascript开发中因空格引发的错误
2010/11/08 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
python人人网登录应用实例
2014/09/26 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
Python httplib模块使用实例
2015/04/11 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
Python函数装饰器实现方法详解
2018/12/22 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
普通党员整改措施
2014/10/24 职场文书
2014年团工作总结
2014/11/27 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
Golang连接并操作MySQL
2022/04/14 MySQL
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL