html - एक डिवेल में Ext.application प्रदान करें




css extjs extjs4 (2)

मैं अपने मौजूदा वेबसाइट टेम्पलेट के अंदर एक ExtJS4 Ext.application को चलाने की कोशिश कर रहा हूं। हमारे पास एक div #content , जिसमें मैं विकास के लिए आवेदन करना चाहता हूं। मौजूदा HTML पृष्ठ को बदलने के बजाय, मैं इस क्षेत्र में आवेदन कैसे प्रस्तुत करूं?

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
       //   renderTo: Ext.Element.get('#content')  doesn't work
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});

Answers

आपको किसी अतिरिक्त कंटेनर को Ext.container.Viewport से उपयोग करने की आवश्यकता है। Definition Ext.container.Viewport द्वारा। Viewport हमेशा पूरे ब्राउज़र विंडो ले जाएगा।

दस्तावेज़ से:

व्यूपोर्ट स्वयं दस्तावेज़ बॉडी में रेंडर करता है, और स्वतः ब्राउज़र व्यूपोर्ट के आकार में स्वतः आकार देता है और विंडो रीसाइजिंग को प्रबंधित करता है। केवल एक व्यूपोर्ट एक पृष्ठ में बनाया जा सकता है।

बस इसके बजाय Ext.panel.Panel उपयोग करें

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.panel.Panel', {
            layout: 'fit',
            renderTo: Ext.get('content')
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});

मैं यह जवाब जोड़ रहा हूं क्योंकि मैंने इसे यहां पूरी तरह से नहीं देखा था। मैं तत्व FromPoint का उपयोग कर ऐसा करने में सक्षम था। तो मूल रूप से:

  • उस div पर क्लिक करें जिसे आप क्लिक करना चाहते हैं
  • इसे छिपाने
  • निर्धारित करें कि पॉइंटर किस तत्व पर है
  • वहाँ तत्व पर क्लिक आग।
var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

        $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
    });

मेरे मामले में ओवरलेइंग div पूरी तरह से स्थित है-मुझे यकीन नहीं है कि इससे कोई फर्क पड़ता है। यह कम से कम आईई 8/9, सफारी क्रोम और फ़ायरफ़ॉक्स पर काम करता है।







html css extjs extjs4