Arcgis Server javascript— ExtJS显示查询数据

       一直觉得ExtJS的控件比较好用，这里利用Ext.grid.Panel控件来显示查询数据

 

这个显示控件功能：可以放大、伸缩、移动、单击其中的行可以定位到数据并显示

/**
 * Created by JetBrains WebStorm.
 * User: mj
 * Date: 13-2-26
 * Time: 下午8:21
 * To change this template use File | Settings | File Templates.
 * 命名要规范
 * 这里是用现有data展示gridpanel在window里面，在另个文件中将使用查询的results
 * 模糊查询主要代码
 */


var findNameTextbox = new Ext.form.TextField({
    id: 'findNameID', name: 'findName', fieldLabel: '输入查询关键字', width: 180, allowBlank: false });

//findTask查询条件设置面板
var findFormPanel = new Ext.FormPanel({ bodyStyle: 'padding:4px',items: [findNameTextbox],
    buttons: [{ text: '查询', handler: doFind}] });

//findTask查询条件窗口
var findWindow=new Ext.Window({
    id: 'findWindowID',
    closeAction: 'hide',//控制状态
	 collapsible:true,
	constrain: true,//控制拖动的范围
    width:300,
    height:200,
    x:300,
    y:150,
    title:"请设置查询条件",
    items: [findFormPanel]
});







function openFindTaskWindow() {

    if (findWindow.isVisible() == false) {


        findWindow.show();
        findResultWindow.close();//销毁部件，hide（）只是隐藏部件，里面的内容存在


    }
    else
        findWindow.hide();

}
function doFind(){

    //ExtJS得到输入文本框的值

    var result=Ext.getCmp("findNameID").getValue();
    findWindow.hide();

    findParams.searchText=result;

    findTask.execute(findParams,showFindTaskResults);


}

//
var findResultWindow=null;
function showFindTaskResults(results){
    map.graphics.clear();
    var ptSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
    var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);
    var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));
    var innerHtml = "";

    var symbol;

    var dataForGrid = [];
    for (var i = 0; i < results.length; i++) {
        var curFeature = results[i];

        var graphic = curFeature.feature;
        dataForGrid.push([curFeature.layerName, curFeature.foundFieldName, curFeature.value]);
        // 根据类型设置显示样式
        switch (graphic.geometry.type) {
            case "point":
                var symbol = ptSymbol;
                break;
            case "polyline":
                var symbol = lineSymbol;
                break;
            case "polygon":
                var symbol = polygonSymbol;
                break;
        }
        // 设置显示样式
        graphic.setSymbol(symbol);
        // 添加到graphics进行高亮显示
        map.graphics.add(graphic);






    }




// 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:{

            'itemdblclick':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的宽度

        }

    });



     findResultWindow= Ext.create('widget.window', {
        id: 'serviceWindowID2',
        collapsible:true,
         autoScroll:true,//处理gridpanel溢出问题
        title: '查询结果',
        height: 400,
        width: 410,
        x:900,
        y:150,
        items: [grid]
    });

    findResultWindow.show();

}

这里代码不包括布局文件和初始化文件