Помогите, я начал работать недавно c EXT v2.2 . Встал вопрос о загрузке сайта в PANEL .Сайт должен быть рабочим, с выполнением скриптов, естественно с отображением HTML элементов! ЕЩЕ в панели должна работать функция DragSelector для выделения HTML элементов и выводить в грид выделенные элементы(теги, координаты). Я посмотрел пример dataview в API , немного его переделал! выводит но не так как хочется, там ведь загрузка данных, а не рабочего сайта.А как загрузить сайт с рабочими ссылками в панель?
или этого сделать нельзя? Подскажите как вообще это можно реализовать??
вот мои наработки без выведения результатов в грид :
Ext.onReady(function(){
Ext.DataView.DragSelector = function(cfg){ //Функци для выделения элементов
cfg = cfg || {};
var view, regions, proxy, tracker;
var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);
var dragSafe = cfg.dragSafe === true;
this.init = function(dataView){
view = dataView;
view.on('render', onRender);
};
function fillRegions(){
rs = [];
view.all.each(function(el){
rs[rs.length] = el.getRegion();
});
bodyRegion = view.el.getRegion();
}
function cancelClick(){
return false;
}
function onBeforeStart(e){
return !dragSafe || e.target == view.el.dom;
}
function onStart(e){
view.on('containerclick', cancelClick, view, {single:true});
if(!proxy){
proxy = view.el.createChild({cls:'x-view-selector'});
}else{
proxy.setDisplayed('block');
}
fillRegions();
view.clearSelections();
}
function onDrag(e){
var startXY = tracker.startXY;
var xy = tracker.getXY();
var x = Math.min(startXY[0], xy[0]);
var y = Math.min(startXY[1], xy[1]);
var w = Math.abs(startXY[0] - xy[0]);
var h = Math.abs(startXY[1] - xy[1]);
dragRegion.left = x;
dragRegion.top = y;
dragRegion.right = x+w;
dragRegion.bottom = y+h;
dragRegion.constrainTo(bodyRegion);
proxy.setRegion(dragRegion);
for(var i = 0, len = rs.length; i < len; i++){
var r = rs[i], sel = dragRegion.intersect(r);
if(sel && !r.selected){
r.selected = true;
view.select(i, true);
}else if(!sel && r.selected){
r.selected = false;
view.deselect(i);
}
}
}
function onEnd(e){
if(proxy){
var isd = Ext.get('ds').select('*').getCount(); // хрень для нахождения элементов
//var X=Ext.get('ds').select('*').item(t).getX();
//var Y = Ext.get('ds').select('*').item(t).getY();
var kx=0;
var m = {color:'#f01717'}
var kxy = 0;
var earth = new Array(isd);
for(var t=1;t<isd;t++){earth[t]=false};
for(var t=1;t<isd;t++){
var Xs=Ext.get('ds').select('*').item(t).getX();
var Ys = Ext.get('ds').select('*').item(t).getY();
if(Xs>=dragRegion.left&&Xs<=dragRegion.right){
if(Ys>=dragRegion.top&&Ys<=dragRegion.bottom){kxy++;earth[t]=true}
}}
alert('you selected ===> '+kxy+"elements");
proxy.setDisplayed(false);
}
}
function onRender(view){
tracker = new Ext.dd.DragTracker({
onBeforeStart: onBeforeStart,
onStart: onStart,
onDrag: onDrag,
onEnd :onEnd
});
//tre= new Ext.dd.DragTracker({onEnd:onEnd});
//tre.initEl(view.el);
tracker.initEl(view.el);
}
};
var store = new Ext.data.JsonStore({
url: 'get-images.php', // тут идет откр. файла с помощю php и передает сайт как строку
root: 'images',
fields: ['HTML']
});
store.load();
var tpl = new Ext.XTemplate( загрузка строки
'<tpl for=".">',
'<div id="ds" class="thumb-wrap">',
'{HTML}', //загрузка строки
'</div>',
'</tpl>'
);
var view = new Ext.DataView({ // тут собирается плагин и сам сайт,его HTML версия,
store: store,
tpl: tpl,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display',
plugins:
new Ext.DataView.DragSelector(),
listeners: {
selectionchange: {
fn: function(dv,nodes){
var l = nodes.length;
var s = l != 1 ? 's' : '';
panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');
}
}
}
})
Ext.QuickTips.init();
var form1 = new Ext.ux.GoodForm({ // тут я попробывал создать новую чуть расширенную панель с кнопками
id:'images-view',
renderTo:'form1',
frame:true,
width:535,
title:'Simple DataView (0 items selected)',
items:view
});
});
