Extjs与Arcgis javascript结合完成FindTask

来源：互联网发布：h5登录界面模板带源码编辑：程序博客网时间：2024/06/05 06:17

// create the data store    var store = Ext.create('Ext.data.ArrayStore', {        fields: [            {name: 'layername'},            {name: 'filedname'},            {name: 'value'}        ],        data: dataForGrid    });// create the Grid    var grid = Ext.create('Ext.grid.Panel', {        layout:"fit",        store: store,        // stateful: true,        // stateId: 'stateGrid',        frame:true,        columns: [            {                text     : '图层',                width    : 75,                sortable : false,                dataIndex: 'layername'            },            {                text     : '字段',                width    : 75,                sortable : false,                dataIndex: 'filedname'            },            {                header     : '值',                width    : 75,                sortable : false,                dataIndex: 'value'            }        ],        height: 400,        width: 400,        listeners:{            '':function(view,record,item,index,e){                //var rd=[];                //var num = index;                //var layername= record.data.layername;         //获取行的相应数据                //var filedname= record.data.filedname;                //var value= record.data.value;                //rd.push(layername,filedname,value,num);                //alert(rd[0]);                //alert(rd);                var pointGraphic;//所选择行对应的图形对象                for(var i=0,i1=map.graphics.graphics.length;i<i1;i++){                    var currentGraphic=map.graphics.graphics[i];                   if(currentGraphic.attributes.CITY_NAME==record.data.value)                      {                          pointGraphic=currentGraphic;                          break;                      }                }                var pointGeometry=pointGraphic.geometry;                var cpoint=new esri.geometry.Point();                cpoint.x=pointGeometry.x;                cpoint.y=pointGeometry.y;                map.centerAt(cpoint);                var p=map.toScreen(pointGraphic.geometry);                var iw=map.infoWindow;                iw.setTitle("属性内容");                iw.setContent("城市名字 : " + pointGraphic.attributes.CITY_NAME);                iw.show(p,map.getInfoWindowAnchor(p));            }        },        columnLines:true,//列分割线        // title: 'Array Grid',        viewConfig: {            stripeRows: true,//分割线            forceFit: true// 注意不要用autoFill:true,那样设置的话当GridPanel的大小变化（比如你resize了它）时不会自动调整column的宽度        }    });}

这里主要是用到Extjs的grid组件知识

实现主要功能：查询界面设置；查询结果界面拖动，收缩；查询结果的排序；双击grid行定位