extjs布局面板
来源:互联网 发布:车间数据统计 编辑:程序博客网 时间:2024/06/09 20:08
//获得 top id 中的div内容
document.getElementById('top').innerHTML
var viewport = new Ext.Viewport({
layout:'border',
items:[
{
region:'west',
id:'west',
title:'',
split:true,
width: 380,
minSize: 240,
maxSize: 400,
collapsible: true,
margins:'3 0 0 0',
cmargins:'3 0 1 1',
layout:'fit',
layoutConfig:{ activeontop:true},
defaults: { bodyStyle: 'margin:0;padding:0;'},// document.getElementById('top').innerHTML 获得 top id 中的div内容
html: document.getElementById('top').innerHTML+'<br><div id="west_list" style="display:block;"></div>'+document.getElementById('west_content').innerHTML
},
{
region:'center',
el:'center',//jsp中必须有一个center id的div
deferredRender:false,
margins:'3 0 0 0',
html:'<div id="maptools" style="postition:absolute;width:100%;left:0;top:0;"></div><div id="container" style="postition:absolute;width:100%;left:0;top:0;"></div>',
autoScroll:true
},
{
region:'south',
border:false,
html:'<div class="menu south"></div>'
}
]
});
/********************************************** 初始化列表*****************************************************************************/
proxy =new Ext.data.HttpProxy({url:"locate!findList", method:"post"});
reader= new Ext.data.JsonReader(
{
root:"results",
totalProperty:"totalCount",
idProperty:'id',
successProperty : '@success'
},
[
{name:'id',mapping :'id'},
{name: 'taxpayerName'},
{name: 'longitude'},
{name: 'latitude'}
]
);
store =new Ext.data.Store(
{
proxy:proxy,
reader:reader,
listeners:{
"beforeload" : function(){
Ext.apply(this.baseParams, {
datatype : datatype,
taxpayerName : taxpayerName,
maxX : maxX,//框选
maxY : maxY,
minX : minX,
minY : minY,
circularX : circularX,//圆选
circularY : circularY,
radius : radius,
PointS : JSON.stringify(PointS)
});
}
}
});
grid=new Ext.grid.GridPanel({
store:store,
columns:[
{header: "业户名称", width: 360, dataIndex: 'taxpayerName', sortable: true}
],
renderTo:'west_list',
width:'100%',
frame : true,
loadMask : true,// 载入遮罩动画
loadMask: {msg:'正在加载数据,请稍侯……'},
bbar:new Ext.PagingToolbar({
pageSize:16,
store:store,
displayInfo:true,
displayMsg:'显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg:'没有记录'
}),
tbar:[{
id:'btnAdd',
text:'业 户 查 询 ',
tooltip:'业 户 查 询 ',
handler: function(){
var form = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 55,
defaultType: 'textfield',
items: [{
fieldLabel: '业户名称',
name: 'taxpayerName',
anchor:'95%'
}]
});
var window = new Ext.Window({
title: '业户查询',
width: 300,
height:100,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
items: form,
buttons: [
{
text: '确定',
handler:function()
{
taxpayerName=form.getForm().findField("taxpayerName").getValue();
window.close(this);
loadGrid();//重新加载事件
}
},
{
text: '取消',
handler:function(){window.close(this);}
}
]
});
window.show();
}
},{},{},{
id:'btnSel',
text:'地 图 单 位 查 询',
tooltip:'地 图 单 位 查 询',
handler: function(){
var form = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 55,
defaultType: 'textfield',
items: [{
fieldLabel: '名 称',
name: 'mapUnit',
anchor:'95%'
}]
});
var window = new Ext.Window({
title: '地 图 单 位 查 询',
width: 300,
height:100,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
items: form,
buttons: [
{
text: '确定',
handler:function()
{
var dataType = datatype;//地图查询完后恢复原查询条件
datatype = "mapUnit";
taxpayerName=form.getForm().findField("mapUnit").getValue();
window.close(this);
loadGrid();
datatype = dataType;//地图查询后恢复
}
},
{
text: '取消',
handler:function(){window.close(this);}
}
]
});
window.show();
}
}]
});
store.load({params : {
start : 0,//开始数
limit : 16,//每次载入数量,服务器段就根据这两个参数来处理数据分页
datatype : datatype //请求类型
}
});
grid.setHeight(document.body.clientHeight-200);//设置列表高度
grid.render();
//单击事件
grid.on('cellclick', function (grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex);
show_info(record.data.longitude,record.data.latitude);
},
this);
function show_info(x,y)
{
map.clearOverlays();
var pointb = new BMap.Point(parseFloat(x), parseFloat(y)); // 创建点坐标
map.centerAndZoom(pointb, 17);
marker = new BMap.Marker(pointb);//添加定位
getThemeData();//获得业户周围业户信息
}
- ExtJS面板与布局
- extjs布局面板
- ExtJS的面板的布局
- Extjs中面板布局的应用
- 学习 ExtJS 4 面板与布局
- Extjs中面板布局的应用
- extjs-gridPanel面板-实例
- ExtJs 4.x 学习小记:使用FieldSet进行查询面板的布局
- extjs面板布局报错:No center region defined in BorderLayout
- ExtJs关闭面板时清空面板中的内容
- ExtJs关闭面板时清空面板中的内容
- EXTJS 布局
- ExtJs 布局
- ExtJs布局
- extjs布局
- Extjs-布局
- extjs布局
- extjs 布局
- 超融合:到底是 data-locality 还是 data-ubiquity
- CSS3 投影
- echo命令的15个用法
- TensorFlow之四 ----- 面向专家的深度MNIST
- Mysq 连接错误 com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: Could not create con
- extjs布局面板
- I Hate It【线段树 最值】
- MTK LCM驱动移植
- 人脸识别的发展方向:蒙面识别
- HTTP权威指南 第3章 HTTP报文
- 问题:java主线程等待子线程执行完毕后再执行
- RHCS启停
- 动态Formbean
- 数组对象、Math对象