2011-05-26 19 views
7

के भीतर व्यूपोर्ट का आकार बदलना मैं सेन्चा में एक Carrousel बनाने की कोशिश कर रहा हूं जो iframes प्रदर्शित करता है।
मूल विचार यह है कि मेरे पास पहले से ही आईपैड पर देखने के लिए एचटीएमएल फाइलों का एक समूह है।
इसलिए फाइलों में व्यूपोर्ट और सबकुछ कॉन्फ़िगर किया गया है। और, कार्यों की प्रणाली तरह
एक आईफ्रेम

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Untitled Page</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <meta name="viewport" content="width=device-width; initial-scale=0.5; minimum-scale=0.5; maximum-scale=1.0;user-scalable=no"> 
    </head> 
    <body> 
     <div id="container"> 
      <div style="margin:0;padding:0;position:absolute;left:0px;top:0px;width: 1536px; height: 2048px;text-align:left;z-index:0;"> 
       <img src="image.jpg" style="width: 1536px; height: 2048px;"></div> 
     </div> 
    </body> 
</html> 

सिवाय इसके कि व्यूपोर्ट का सम्मान नहीं कर रहा है के अंदर:

var rootPanel; 
Ext.setup({ 
    onReady: function() { 
     rootPanel = new Ext.Carousel({ 
      fullscreen: true, 
      layout: 'card', 
      items: [ 
       { html: '<iframe src="http://localhost/file1.html">' }, 
       { html: '<iframe src="http://localhost/file2.html">' }, 
       { html: '<iframe src="http://localhost/file3.html">' }, 
      ] 
     }); 
    } 
}); 

HTML फ़ाइलों खुद को इस तरह दिखेगा:

मैं इस तरह एक साधारण Carrousel बनाया iframe ज़ूम आउट नहीं किया गया है जैसा कि यह माना जाता है। कोई उपाय ?

उत्तर

0

मैं सेन्चा से परिचित नहीं हूं, लेकिन iframes में ऊंचाई (100%) तक ऊंचाई सेट करने की क्षमता नहीं है। तो यदि सेन्चा चौड़ाई और ऊंचाई 100% पर सेट कर रहा है, तो यह लंबवत विस्तारित नहीं होगा, लेकिन क्षैतिज माता-पिता को भरना चाहिए।

क्या यह आप देखते हैं?

आईफ़्रेम की ऊंचाई को मैन्युअल रूप से पीएक्स में बड़े आकार में सेट करने का प्रयास करें। अगर आपके पास आईफ्रेम की सामग्री पर नियंत्रण है, तो आप माता-पिता के साथ संवाद करने के लिए थोड़ा सा जावास्क्रिप्ट जोड़ सकते हैं और इसे उचित रूप से आकार देने के लिए कह सकते हैं। आइफ्रेम और भीतरी एचटीएमएल पर

0

सेट 100%

var rootPanel; 
Ext.setup({ 
    onReady: function() { 
     rootPanel = new Ext.Carousel({ 
      fullscreen: true, 
      layout: 'card', 
      cls: 'some-cards', 
      items: [ 
       { html: '<iframe width="100%" height="100%" src="http://localhost/file1.html">' }, 
       { html: '<iframe width="100%" height="100%" src="http://localhost/file2.html">' }, 
       { html: '<iframe width="100%" height="100%" src="http://localhost/file3.html">' }, 
      ] 
     }); 
    } 
}); 

और तुम इस तरह लिंक कुछ हो सीएसएस।

.some-cards .x-innerhtml { 
    height: 100%; 
} 
संबंधित मुद्दे