<html>
<head>
<title></title>
<script type="text/javascript" src="http://www.cnblogs.com/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/resources/css/ext-all-slate.css" />
<script type="text/javascript" src="blackTypeNew.js"></script>
</head>
<body width="100%" height="100%">
<div id="grid" width="100%" height="100%">
</div>
</body>
</html>
blackType.js
Ext.define('MyApp.view.ui.MyViewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'container',
width: 81,
height:333,
layout: {
type: 'anchor'
},
region: 'west',
items: [
{
xtype: 'button',
height: 60,
margin: '',
width: 81,
handler:showContactForm,
text: '添加'
},
{
xtype: 'button',
id:'willlook',
height: 60,
width: 81,
text: '预审',
handler:function() {
Ext.getCmp("viewCon").layout.setActiveItem(Ext.getCmp("con1"));
Ext. get( 'con4').puff();
Ext. get( 'con1').fadeIn();
}
},
{
xtype: 'button',
height: 60,
width: 81,
text: '审核',
handler:function() {
Ext.getCmp("viewCon").layout.setActiveItem(Ext.getCmp("con2"));
Ext. get( 'con1').puff();
Ext. get( 'con2').fadeIn();
}
},
{
xtype: 'button',
height: 60,
width: 81,
text: '表1',
handler:function() {
Ext.getCmp("viewCon").layout.setActiveItem(Ext.getCmp("con4"));
Ext. get( 'con2').puff();
Ext. get( 'con4').fadeIn();
}
},
{
xtype: 'button',
height: 60,
width: 81,
text: '表2',
handler:function() {
Ext.getCmp("viewCon").layout.setActiveItem(Ext.getCmp("con3"));
Ext. get( 'con2').puff();
Ext. get( 'con3').fadeIn();
}
}
]
},
{
xtype: 'container',
id:'viewCon',
height:333,
layout: {
type: 'card'
},
activeItem: 0,
region: 'center',
items: [
{
xtype: 'container',
id:'con1',
height:333,
layout: {
type: 'column'
},
region: 'center',
items: [
{
xtype: 'toolbar',
width: 1359,
items: [
{
xtype: 'button',
text: '批量提交',
handler:function(){
var record = Ext.getCmp('gridpanel1').getSelectionModel().getSelection();
if(record.length == 0){
Ext.MessageBox.show({
title:"提示",
msg:"请先选择您要操作的行!"
})
return;
}else{
var ids = "";
var tds = "";
var mds = "";
for(var i = 0; i < record.length; i++){
ids += record[i].get("imsi");
tds += record[i].get("telNumber");
mds += record[i].get("mobtype");
}
store2.insert(0,{
telNumber: tds,
imsi:ids,
mobtype:mds
});
store.remove(record)
// var a = new Ext.Element("gridpanel1");
Ext.MessageBox.show({
title:"提示",
msg:'已提交到审核',
// animEl : a
})
}
}
}
]
},
{
xtype: 'gridpanel',
id:'gridpanel1',
height: 733,
width: 1359,
plugins: [cellEditing],
store: Ext.data.StoreManager.lookup('simpsonsStore'),
title: '',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'telNumber',
editor: {
allowBlank: false
},
width:400,
text: '手机号'
},
{
xtype: 'gridcolumn',
dataIndex: 'imsi',
editor: {
allowBlank: false
},
width:400,
text: 'IMSI'
},
{
xtype: 'gridcolumn',
dataIndex: 'mobtype',
editor:
new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
['QQ','QQ'],
['新浪微博','新浪微博'],
['UC浏览器','UC浏览器'],
],
lazyRender: true,
listClass: 'x-combo-list-small'
}),
width:400,
text: '移动网络类型'
}
],
viewConfig: {
},
selModel: Ext.create('Ext.selection.CheckboxModel', {
})
},
{
xtype: 'pagingtoolbar',
id:'panbar',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
width: 1359,
pressed:true,
beforePageText:'当前是第',
enableToggle: true,
afterPageText:'页,共{0}页',
firstText:'首页',
prevText:'上一页',
nextText:'下一页',
lastText:'尾页',
refreshText:'刷新',
pageSize: 25,
displayInfo: true,
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg: '没有数据',
toggleHandler: function(btn, pressed) {
}
}
]
},{
//审核
xtype: 'container',
id:'con2',
height:333,
layout: {
type: 'column'
},
region: 'center',
items: [
{
xtype: 'toolbar',
width: 1359,
items: [
{
xtype: 'button',
text: '批量提交',
handler:function(){
var record = Ext.getCmp('gridpanel2').getSelectionModel().getSelection();
if(record.length == 0){
Ext.MessageBox.show({
title:"提示",
msg:"请先选择您要操作的行!"
})
return;
}else{
var ids = "";
var tds = "";
var mds = "";
for(var i = 0; i < record.length; i++){
ids += record[i].get("imsi");
tds += record[i].get("telNumber");
mds += record[i].get("mobtype");
}
store4.insert(0,{
telNumber: tds,
imsi:ids,
mobtype:mds
});
store2.remove(record)
Ext.MessageBox.show({
title:"提示",
msg:'已提交表1'
})
}
}
}
]
},
{
xtype: 'gridpanel',
id:'gridpanel2',
height: 733,
width: 1359,
store: Ext.data.StoreManager.lookup('simpsonsStore2'),
title: '',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'telNumber',
width:400,
text: '手机号'
},
{
xtype: 'gridcolumn',
dataIndex: 'imsi',
width:400,
text: 'IMSI'
},
{
xtype: 'gridcolumn',
dataIndex: 'mobtype',
width:400,
text: '移动网络类型'
}
],
viewConfig: {
},
selModel: Ext.create('Ext.selection.CheckboxModel', {
})
},
{
xtype: 'pagingtoolbar',
store: Ext.data.StoreManager.lookup('simpsonsStore2'),
width: 1359,
beforePageText:'当前是第',
afterPageText:'页,共{0}页',
firstText:'首页',
prevText:'上一页',
nextText:'下一页',
lastText:'尾页',
refreshText:'刷新',
pageSize: 25,
displayInfo: true,
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg: '没有数据'
}
]
},{
//表2
xtype: 'container',
id:'con3',
height:333,
layout: {
type: 'column'
},
region: 'center',
items: [
{
xtype: 'toolbar',
width: 1359,
items: [
{
xtype: 'button',
text: '解封',
handler:function(){
var record = Ext.getCmp('gridpanel3').getSelectionModel().getSelection();
if(record.length == 0){
Ext.MessageBox.show({
title:"提示",
msg:"请先选择您要操作的行!"
})
return;
}else{
var ids = "";
var tds = "";
var mds = "";
for(var i = 0; i < record.length; i++){
ids += record[i].get("imsi");
tds += record[i].get("telNumber");
mds += record[i].get("mobtype");
}
store.insert(0,{
telNumber: tds,
imsi:ids,
mobtype:mds
});
store3.remove(record)
Ext.MessageBox.show({
title:"提示",
msg:'已解除到预审'
})
}
}
}
]
},
{
xtype: 'gridpanel',
id:'gridpanel3',
height: 733,
width: 1359,
store: Ext.data.StoreManager.lookup('simpsonsStore3'),
title: '',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'telNumber',
width:400,
text: '手机号'
},
{
xtype: 'gridcolumn',
dataIndex: 'imsi',
width:400,
text: 'IMSI'
},
{
xtype: 'gridcolumn',
dataIndex: 'mobtype',
width:400,
text: '移动网络类型'
}
],
viewConfig: {
},
selModel: Ext.create('Ext.selection.CheckboxModel', {
})
},
{
xtype: 'pagingtoolbar',
store: Ext.data.StoreManager.lookup('simpsonsStore3'),
width: 1359,
beforePageText:'当前是第',
afterPageText:'页,共{0}页',
firstText:'首页',
prevText:'上一页',
nextText:'下一页',
lastText:'尾页',
refreshText:'刷新',
pageSize: 25,
displayInfo: true,
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg: '没有数据'
}
]
},
{
//表1
xtype: 'container',
id:'con4',
height:333,
layout: {
type: 'column'
},
region: 'center',
items: [
{
xtype: 'toolbar',
width: 1359,
items: [
{
xtype: 'button',
text: '批量提交',
handler:function(){
var record = Ext.getCmp('gridpanel4').getSelectionModel().getSelection();
if(record.length == 0){
Ext.MessageBox.show({
title:"提示",
msg:"请先选择您要操作的行!"
})
return;
}else{
var ids = "";
var tds = "";
var mds = "";
for(var i = 0; i < record.length; i++){
ids += record[i].get("imsi");
tds += record[i].get("telNumber");
mds += record[i].get("mobtype");
}
store3.insert(0,{
telNumber: tds,
imsi:ids,
mobtype:mds
});
store4.remove(record)
Ext.MessageBox.show({
title:"提示",
msg:'已提交到表2'
})
}
}
}
]
},
{
xtype: 'gridpanel',
id:'gridpanel4',
height: 733,
width: 1359,
store: Ext.data.StoreManager.lookup('simpsonsStore4'),
title: '',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'telNumber',
width:400,
text: '手机号'
},
{
xtype: 'gridcolumn',
dataIndex: 'imsi',
width:400,
text: 'IMSI'
},
{
xtype: 'gridcolumn',
dataIndex: 'mobtype',
width:400,
text: '移动网络类型'
}
],
viewConfig: {
},
selModel: Ext.create('Ext.selection.CheckboxModel', {
})
},
{
xtype: 'pagingtoolbar',
store: Ext.data.StoreManager.lookup('simpsonsStore4'),
width: 1359,
beforePageText:'当前是第',
afterPageText:'页,共{0}页',
firstText:'首页',
prevText:'上一页',
nextText:'下一页',
lastText:'尾页',
refreshText:'刷新',
pageSize: 25,
displayInfo: true,
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg: '没有数据'
}
]
}
]
}
]
});
me.callParent(arguments);
}
});
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('MyApp.view.ui.MyViewport', {
renderTo : Ext.getBody()
});
}
});
//预审store
Ext.define('MyUser', {
extend: 'Ext.data.Model',
fields:[{name:'telNumber',type:'number'},
{name:'imsi',type:'string'},
{name:'mobtype',type:'string'},
{name:'check',type:'boolean'}]
});
var store=Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
model : 'MyUser',
autoLoad:true,
data:{'items':[
// { 'telNumber': '15698265461', 'imsi':'68','mobtype':'北京市海淀区4084' },
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
//审核store
Ext.define('MyUser2', {
extend: 'Ext.data.Model',
fields:[{name:'telNumber',type:'number'},
{name:'imsi',type:'string'},
{name:'mobtype',type:'string'}]
});
var store2=Ext.create('Ext.data.Store', {
storeId:'simpsonsStore2',
model : 'MyUser2',
autoLoad:true,
data:{'items':[
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
//表1store
Ext.define('MyUser3', {
extend: 'Ext.data.Model',
fields:[{name:'telNumber',type:'number'},
{name:'imsi',type:'string'},
{name:'mobtype',type:'string'}]
});
var store3=Ext.create('Ext.data.Store', {
storeId:'simpsonsStore3',
model : 'MyUser3',
autoLoad:true,
data:{'items':[
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
//表2
Ext.define('MyUser4', {
extend: 'Ext.data.Model',
fields:[{name:'telNumber',type:'number'},
{name:'imsi',type:'string'},
{name:'mobtype',type:'string'}]
});
var store4=Ext.create('Ext.data.Store', {
storeId:'simpsonsStore4',
model : 'MyUser4',
autoLoad:true,
data:{'items':[
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
//添加弹窗
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
resizable: true,
modal: true,
height: 200,
width: 311,
title: '添加',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'form',
height: 180,
width: 299,
bodyPadding: 10,
title: '',
items: [
{
xtype: 'fieldset',
height: 115,
title: '信息',
items: [
{
xtype: 'textfield',
id:'mobNumber',
fieldLabel: '手机号',
allowBlank:false,
blankText:'请输入手机号码',
regex:/^1[3|4|5|8][0-9]\d{4,8}$/,
regexText:'请输入11位正确格式的手机号',
anchor: '100%'
},
{
xtype: 'textfield',
id:'imsiNumber',
allowBlank:false,
blankText:'请输入IMSI号码',
fieldLabel: 'IMSI',
anchor: '100%'
},
{
xtype: 'combobox',
id:'mobelType',
fieldLabel: '移动网络类型',
allowBlank:false,
blankText:'请选择移动网络类型',
store: combostore,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
anchor: '100%'
}
]
},
{
xtype: 'button',
width: 55,
text: '确认',
handler:function() {
store.insert(0,{
telNumber: Ext.getCmp("mobNumber").getValue(),
imsi:Ext.getCmp("imsiNumber").getValue(),
mobtype:Ext.getCmp("mobelType").getValue()
});
}
},
{
xtype: 'button',
margin: '0 0 0 10',
width: 55,
text: '重置',
handler : function() {
Ext.getCmp('mobNumber').reset();
Ext.getCmp('imsiNumber').reset();
Ext.getCmp('mobelType').reset();
}
}
]
}
]
});
me.callParent(arguments);
}
});
//移动网络类型combostore
var combostore = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"QQ", "name":"QQ"},
{"abbr":"新浪微博", "name":"新浪微博"},
{"abbr":"UC浏览器", "name":"UC浏览器"}
//...
]
});
var win;
function showContactForm() {
win = Ext.create('MyApp.view.MyWindow', {
});
win.show();
}
//预审修改
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
});
发布见图片
