ext自定义控件
1.自定义ComboBox控件：
Js代码
/**
* 自定义ComboBox控件
*/
ComboBox=function(view,config){
Ext.apply(this,view);
this.store=new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:config.dataUrl}),
reader:new Ext.data.JsonReader({totalProperty: "total",root: "rows"},config.record),
baseParams:{limit:10,start:0},
autoLoad:true
});
ComboBox.superclass.constructor.call(this,{
width:215,
editable: false,
msgTarget:'qtip',
emptyText:'请选择',
pageSize:10,
triggerAction: 'all'
});
};
Ext.extend(ComboBox,Ext.form.ComboBox,{});
Jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="extControl.js"></script>
<title>controlDemo</title>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var config={dataUrl:'studentMsg.lxit?method=doGetAllPeriod',record:[{name:'name'}]};
new ComboBox({
renderTo:'ComboBox',
fieldLabel:'届',
name:'sex',
id:'sex',
valueField: 'name',
displayField: 'name'
},config);
});
</script>
</head>
<body>
<center>
<div id="ComboBox"></div>
</center>
</body>
</html>
Js代码
/**
* 自定义表格控件
*/
GridPanel = function(view,config){
//把配置属性copy到当前类的实例中
Ext.apply(this,view);
this.init(config);
this.bbar=new Ext.PagingToolbar({
store:this.store,
pageSize:config.pageSize,
emptyMsg:'当前没有任作何数据!',
displayInfo:true,
displayMsg :"显示 {0} 到 {1}条数据 总共{2}条数据"
}),
GridPanel.superclass.constructor.call(this,{});
this.on("click",function(){});
};
Ext.extend(GridPanel,Ext.grid.GridPanel,{
init:function(config){
var sm = new Ext.grid.CheckboxSelectionModel();
var c=[sm,new Ext.grid.RowNumberer()],r=[]; //c 指创建表格的columns r指 创建store 中的record配置属性
for(var i=0,j=config.column.length;i<j;i++){
c.push(config.column[i]); //将所有的column属性复制到c 数组中
r.push({name:config.column[i].dataIndex});//column中对象的dataIndex属性复制到r 中来
}
this.columns=c;
this.store = new Ext.data.Store({
url:config.dataUrl,
reader:new Ext.data.JsonReader({
totalProperty:'total',
root:'root'
},Ext.data.Record.create(r)),
autoLoad:true
});
},
getSelected:function(){
return this.getSelectionModel().getSelected();
}
});
Jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="extControl.js"></script>
<title>controlDemo</title>
<script type="text/javascript">
Ext.onReady(function(){
var config={column:[{header:'用户名',dataIndex:'username',sortable:true},
{header:'性别',dataIndex:'sex',sortable:true},
{header:'年龄',dataIndex:'age',sortable:true},
{header:'出生日期',dataIndex:'birthday',sortable:true}],
dataUrl:'/lms/servlet/GridServlet'};
var grid = new GridPanel({title:'自定义表格',tbar:[{text:'得到选中的行',handler:function(){
var r =grid.getSelected();
alert(r.get("sex"));
}}]},config);
new Ext.Viewport({
renderTo:Ext.getBody(),
frame:true,
layout:'fit',
items:[grid]
});
});
</script>
</head>
<body>
<center>
<div id="ComboBox"></div>
</center>
</body>
</html>
Js代码
/**
* 自定义ComboBox控件
*/
ComboBox=function(view,config){
Ext.apply(this,view);
this.store=new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:config.dataUrl}),
reader:new Ext.data.JsonReader({totalProperty: "total",root: "rows"},config.record),
baseParams:{limit:10,start:0},
autoLoad:true
});
ComboBox.superclass.constructor.call(this,{
width:215,
editable: false,
msgTarget:'qtip',
emptyText:'请选择',
pageSize:10,
triggerAction: 'all'
});
};
Ext.extend(ComboBox,Ext.form.ComboBox,{});
Jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="extControl.js"></script>
<title>controlDemo</title>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var config={dataUrl:'studentMsg.lxit?method=doGetAllPeriod',record:[{name:'name'}]};
new ComboBox({
renderTo:'ComboBox',
fieldLabel:'届',
name:'sex',
id:'sex',
valueField: 'name',
displayField: 'name'
},config);
});
</script>
</head>
<body>
<center>
<div id="ComboBox"></div>
</center>
</body>
</html>
Js代码
/**
* 自定义表格控件
*/
GridPanel = function(view,config){
//把配置属性copy到当前类的实例中
Ext.apply(this,view);
this.init(config);
this.bbar=new Ext.PagingToolbar({
store:this.store,
pageSize:config.pageSize,
emptyMsg:'当前没有任作何数据!',
displayInfo:true,
displayMsg :"显示 {0} 到 {1}条数据 总共{2}条数据"
}),
GridPanel.superclass.constructor.call(this,{});
this.on("click",function(){});
};
Ext.extend(GridPanel,Ext.grid.GridPanel,{
init:function(config){
var sm = new Ext.grid.CheckboxSelectionModel();
var c=[sm,new Ext.grid.RowNumberer()],r=[]; //c 指创建表格的columns r指 创建store 中的record配置属性
for(var i=0,j=config.column.length;i<j;i++){
c.push(config.column[i]); //将所有的column属性复制到c 数组中
r.push({name:config.column[i].dataIndex});//column中对象的dataIndex属性复制到r 中来
}
this.columns=c;
this.store = new Ext.data.Store({
url:config.dataUrl,
reader:new Ext.data.JsonReader({
totalProperty:'total',
root:'root'
},Ext.data.Record.create(r)),
autoLoad:true
});
},
getSelected:function(){
return this.getSelectionModel().getSelected();
}
});
Jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="extControl.js"></script>
<title>controlDemo</title>
<script type="text/javascript">
Ext.onReady(function(){
var config={column:[{header:'用户名',dataIndex:'username',sortable:true},
{header:'性别',dataIndex:'sex',sortable:true},
{header:'年龄',dataIndex:'age',sortable:true},
{header:'出生日期',dataIndex:'birthday',sortable:true}],
dataUrl:'/lms/servlet/GridServlet'};
var grid = new GridPanel({title:'自定义表格',tbar:[{text:'得到选中的行',handler:function(){
var r =grid.getSelected();
alert(r.get("sex"));
}}]},config);
new Ext.Viewport({
renderTo:Ext.getBody(),
frame:true,
layout:'fit',
items:[grid]
});
});
</script>
</head>
<body>
<center>
<div id="ComboBox"></div>
</center>
</body>
</html>