ext panel 自訂圖片重新整理,

來源:互聯網
上載者:User

ext panel 自訂圖片重新整理,

最近從管理迴歸開發,著實是花了些功夫適應,不過換個角度處理問題,貌似效果不錯,廢話不多說,最近項目用到了EXT js,百度大神裡面沒找到一個合適的圖片組件,自己寫了個可以重新整理的圖片組件,先說明:由於項目原因,只能貼出部分代碼,此代碼僅供參考

思路:先刪除,再添加,使用doLayout()重布局


防止讀取緩衝中圖片: 在圖片連結後面加上" '?' + Math.random()",會從後台重新讀取


代碼如下:

         imagePanel = new Ext.Panel(

                                {
                                    region : 'center',
                                    title : '',
                                    id : 'imagePanel',
                                    name : 'imagePanel',
                                    width : 105,
                                    height : 105,
                                    border : false,
                                    bodyStyle : {
                                        padding : '10px'
                                    },
                                    refresh : function(picName) {
                                        picName = picName + '?' + Math.random();
                                        imagePanel.removeAll();
                                        var imageInPanel = new Ext.Panel(
                                                {
                                                    region : 'center',
                                                    title : '',
                                                    id : 'imageInPanel',
                                                    name : 'imageInPanel',
                                                    border : false,
                                                    width : 95,
                                                    height : 95,
                                                    html : "<img src='"
                                                            + picName
                                                            + "' width='80px' height='80px' style='padding:5px;'></img>"
                                                });
                                        imagePanel.add(imageInPanel);
                                        imagePanel.doLayout();

                                    }

                                });


重新整理圖片:imageBrowsePanel.refresh(picName);

picName中包括圖片相對路徑,建議路徑寫在後台配置中,方便修改





聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.