ExtJS iframe 載入 store 資料

extjs pdf blob

king742171 2017-02-09 11:49:40 ‧ 6199 瀏覽

分享至

一般來說store後端載入資料庫資訊後
都會用grid去顯示這些資訊

但是我資料庫要撈的資料是一筆關於檔案的相關資訊
例如一筆PDF檔（包含其檔名、路徑...等等）

我想在點擊預覽時
可以用iframe秀出PDF檔案

程式如下..
html檔..

<html>
    <head>
    <title>參考文件預覽</title>
    <script type="text/javascript" src="view_PDF.js"></script>
	
	<script>
        var strUrl = location.search;
        var getPara, ParaVal;

        var aryPara = [];

        if (strUrl.indexOf("?") != -1) {

            var getSearch = strUrl.split("?");

            getPara = getSearch[1].split("&");

            for (i = 0; i < getPara.length; i++) {

                ParaVal = getPara[i].split("=");

                aryPara.push(ParaVal[0]);

                aryPara[ParaVal[0]] = ParaVal[1];

            }
        }
        var ID = aryPara['ID'];

	</script>
</head>
<body>
    <div id="binding-example"></div>
</body>
</html>

js檔..

    var store = Ext.create('Ext.data.Store', {
        fields: ['ID','FL_PDF'],
        remoteSort: true,
        proxy: {
            type: 'ajax',
            url : 'view_PDF.php?ID='+ID,
            reader: {
                totalProperty:'totalcount'
            }
        },
        autoLoad:true
    });

    var displaypanel = Ext.widget('panel', {
        items: {
            xtype: 'component',
            autoEl: {
                tag: 'iframe',
                style: 'height: 100%; width: 100%; border: none',
                src: 'data:application/pdf;base64,'+FL_PDF //'../PDF.pdf' 
            }
        },
        renderTo: 'binding-example'
    });
    
   
    var viewpanel = Ext.create('Ext.Panel', {
        renderTo: 'binding-example',
        autoScroll:true,
        layout: 'fit',    
        items: [displaypanel]
    });

	new Ext.Viewport({
		layout: 'fit',
		//autoScroll:true,
		items: [ viewpanel ]          
  	});

php檔..

    try
    {
    	$conn->BeginTrans();
        
    	$dbDateTime = getIcsDbDateTime($conn, $sIcsDbDateTimeSQL);

    	$ID = $_GET['ID'];
		
    	$sSQL = "SELECT ID, FL_PDF FROM TABLE WHERE ID = '".$ID."'";
	
		$data = $conn->Execute($sSQL) or die($conn->ErrorMsg());
		$records = array();
		while ($field = $data->FetchRow())
		{
			$anti = array('ID_DISEASE' => $field['ID'],
					'FL_PDF' => base64_encode($field['FL_PDF'])
					);
			array_push($records, $anti);
		}

		$conn->Close();
		echo json_encode($records);

	}
    catch(exception $e)
    {
    	$conn->RollbackTrans();
    	echo json_encode(iconv('BIG5', 'utf-8', $e));
    }
    $conn->Close();

補充..
我的檔案因特殊需求
才建立了一個BLOB欄位存放檔案(FL_PDF)
因次..才會有base64的解碼行為

目前後端撈資料的php檔可以正常撈到我要的資料
並於js的store中讀取php傳回來的json資訊

請問該怎麼將store的資訊用iframe顯示出來呢？

fillano iT邦超人 1 級 ‧ 2017-02-10 10:46:23 檢舉

沒人回XD

建議您提供一些基本資訊，例如EXTJS的版本。另外你的程式碼似乎不完整？我沒看到你載入EXTJS...

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

fillano

iT邦超人 1 級 ‧ 2017-02-10 14:36:50

最佳解答

你建立displaypanel時，恐怕store還沒把東西讀出來
既然你可以從store把讀到的資料取出，那要丟給autoEl的src屬性應該沒問題才對

回應 3
分享
檢舉

king742171 iT邦新手 2 級 ‧ 2017-02-10 15:18:40 檢舉

謝謝大師熱心回復
我找到方法解決了
我太執著使用store撈資料了
忘了可以用Ext.Ajax.request來對後端PHP溝通

Ext.Ajax.request({
        method: 'GET',
        url: '../../../ws/Disease_maintain/view_CDC_PDF.php?ID_DISEASE='+ID_DISEASE,
        success: function(resp,params) {
            var result = Ext.decode(resp.responseText); 
            var FL_PDF = result[0].FL_PDF;
            var displaypanel = Ext.widget('panel', {
		        items: {
		            xtype: 'component',
		            autoEl: {
		                tag: 'iframe',
		                style: 'height: 500px; width: 100%; border: none;',
		                src: 'data:application/pdf;base64,'+FL_PDF 
		            }
		        },
		        renderTo: 'binding-example'
		    });
        }
    });