WORKSHOP – MARI KITA MEMBUAT LAYOUT (VIEWPORT)

Workshop ini sedikit kembali ke dasar-dasar ExtJS, tapi bisa sangat berguna. Kami akan membuat VExt.Loader.setConfig ({jalan iewport yang akan memiliki pusat dengan peta GeoExt2 kami yang kami buat dalam Workshop 2. Kemudian menambahkan atas, bawah, kiri dan kanan panel dasar. Panel ini dapat apa saja dari ExtJS untuk GeoExt elemen. makhluk ini, toolbar, grid, legendpanels dan sebagainya.

Pertama – titik awal kami akan menjadi produk akhir lokakarya 2. Terbuka map.js dan menemukan bagian mana kita membuat viewport. Hal ini tampak seperti ini:

Ext.create('Ext.container.Viewport', {

layout: 'fit',

items: [mappanel]

});

Berikut tata letak penting. Nilai ‘cocok’ akan membuat peta sesuai dengan jendela browser secara keseluruhan. Nilai ini harus diubah ke perbatasan. Dengan cara ini kita akan dapat menggunakan daerah; timur, barat, utara, selatan dan pusat. Sebuah contoh dapat ditemukan dalam dokumentasi ExtJS:

Kode harus:

Ext.create('Ext.container.Viewport', {

layout: 'border',

items: [mappanel]

});

Jika Anda me-refresh halaman pada titik ini Anda akan mendapatkan hanya peta yang sama ditampilkan seperti dalam lokakarya 2 tutorial. Kami akan mengubah wilayah itu untuk mappanel kami. Hal ini dilakukan dengan menambahkan wilayah attribue dan mengaturnya sehingga pusat seperti yang ditunjukkan di bawah ini:

var mappanel = Ext.create('GeoExt.panel.Map', {

title: 'Simple Web Map',

map: map,

region: 'center'

});

Sekali lagi menyegarkan halaman akan menghasilkan tampilan yang sama seperti sebelumnya.Sekarang kita akan menambahkan panel atas. Pertama mulai mendefinisikan variabel, saya menyebutnya northpanel, dan melakukan membuat fungsi dari ExtJS dan beban panel.Mengatur pilihan; daerah ke utara, html dan menambahkan beberapa htmlcode, autoHeight untuk benar dan perbatasan ke false. Anda dapat mencoba mengedit opsi berbeda. Kode terlihat seperti ini:

var northpanel = Ext.create('Ext.panel.Panel', {

region: 'north',

html: '<h1 class="x-panel-header">Header</h1>',

autoHeight: true,

border: false

});

Maka beban panel di viewport kami di bawah item.

Ext.create('Ext.container.Viewport', {

layout: 'border',

items: [northpanel, mappanel]

});

Coba refresh halaman dan kita harus melihat panel sundulan utama kami seperti ini: Mari kita membuat panel untuk sisi barat viewport. Hal ini dilakukan dengan cara yang sama seperti toppanel tersebut. Di sini saya hanya akan menambahkan panel. Saya tidak akan menempatkan html apapun di dalamnya tetapi Anda dapat melakukannya jika Anda ingin. Aku telah menetapkan judul hanya untuk menunjukkan di mana saya ditampilkan di bar, yang Anda hanya dapat menghapus. Lebar panel diatur ke 100 dan saya telah membuat colapsible panel.Panel ini bisa diisi dengan tombol dan / atau grid.

var westpanel = Ext.create('Ext.panel.Panel', {

title: 'Westpanel',

region: 'west',

width: 100,

border: false,

collapsible: true

});

Tambahkan westpanel untuk item viewport dan mencoba menyegarkan halaman web. Menguji panel dilipat sehingga Anda melihat cara kerjanya. Jika Anda tidak ingin pengguna Anda untuk dapat collaps panel kemudian hanya hapus opsi ini dari westpanel tersebut.

Cobalah membuat dua panel depan untuk wilayah selatan dan timur. Ingat panel ini dapat digunakan untuk gridpanels, legenda dan layerpanel / switcher. Membuat eastpanel dan melakukan beberapa htmltext di dalamnya. Aku mengatur lebar 150 dan masih ada perbatasan.Mencoba bermain-main dengan pilihan ini seperti pengaturan perbatasan untuk benar.Mungkin juga mencoba beberapa margin. Ini diatur seperti: margin:. ‘0 0 5 0’

Juga menambahkan southpanel, saya mengaturnya dengan judul dan beberapa html dan membuatnya dilipat. Tinggi 100, bisa 200 atau 300 jika Anda ingin.

Kode saya loks seperti ini:

var eastpanel = Ext.create('Ext.panel.Panel', {

region: 'east',

html: 'Some text can go here... Maybe explaining your project.',

width: 150,

border: false

});

var southpanel = Ext.create('Ext.panel.Panel', {

title: 'south',

region: 'south',

html: 'South... featuregrid?',

height: 100,

border: false,

collapsible: true

});

Ingatlah untuk menambahkan panel ke itemlist viewport. Situs saya sekarang terlihat seperti ini:

Kode akhir:

/*

* Copyright (c) 2015 thatgeospatialblog.wordpress.com

*

* File: map.js

* Workshop title: Base Layers

*/

Ext.require([

'Ext.container.Viewport',

'Ext.window.MessageBox',

'GeoExt.panel.Map'

]);

Ext.application({

name: 'SimpleWebMap',

launch: function(){

var map = new OpenLayers.Map("map-id");

map.addControl(new OpenLayers.Control.LayerSwitcher());

var google_hybrid = new OpenLayers.Layer.Google(

"Google Hybrid",

{type: google.maps.MapTypeId.HYBRID}

);

var google_physical = new OpenLayers.Layer.Google(

"Google Physical",

{type: google.maps.MapTypeId.PHYSICAL}

);

var google_satellite = new OpenLayers.Layer.Google(

"Google Satellite",

{type: google.maps.MapTypeId.SATELLITE}

);

var google_streets = new OpenLayers.Layer.Google(

"Google Streets",

{type: google.maps.MapTypeId.STREETS}

);

var google_terrain = new OpenLayers.Layer.Google(

"Google Terrain",

{type: google.maps.MapTypeId.TERRAIN}

);

var apiKey = "YOUR_KEY_HERE";

var bing_road = new OpenLayers.Layer.Bing({

name: "Bing! Road",

key: apiKey,

type: "Road"

});

var bing_hybrid = new OpenLayers.Layer.Bing({

name: "Bing! Hybrid",

key: apiKey,

type: "AerialWithLabels"

});

var bing_aerial = new OpenLayers.Layer.Bing({

name: "Bing! Aerial",

key: apiKey,

type: "Aerial"

});

map.addLayers([google_hybrid, google_physical, google_satellite, google_streets, google_terrain, bing_road, bing_hybrid, bing_aerial]);

var northpanel = Ext.create('Ext.panel.Panel', {

region: 'north',

html: '<h1 class="x-panel-header">Header</h1>',

autoHeight: true,

border: false

});

var westpanel = Ext.create('Ext.panel.Panel', {

title: 'Westpanel',

region: 'west',

width: 100,

border: false,

collapsible: true

});

var eastpanel = Ext.create('Ext.panel.Panel', {

region: 'east',

html: 'Some text can go here... Maybe explaining your project.',

width: 150,

border: false

});

var southpanel = Ext.create('Ext.panel.Panel', {

title: 'south',

region: 'south',

html: 'South... featuregrid?',

height: 100,

border: false,

collapsible: true

});

var mappanel = Ext.create('GeoExt.panel.Map', {

title: 'Simple Web Map',

map: map,

region: 'center'

});

Ext.create('Ext.container.Viewport', {

layout: 'border',

items: [northpanel, westpanel, eastpanel, southpanel, mappanel]

});

}

});

sumber : https://thatgeospatialblog.wordpress.com/author/anvit2a/