Показать сообщение отдельно
  #1 (permalink)  
Старый 07.06.2010, 12:04
Новичок на форуме
Отправить личное сообщение для Golizart Посмотреть профиль Найти все сообщения от Golizart
 
Регистрация: 07.06.2010
Сообщений: 8

Загрузка сайта в PANEL
Помогите, я начал работать недавно 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
                                            });
            
            

            
    


 

});
Ответить с цитированием