extjs4 - extjs-autoload सच के साथ स्टोर आवेदन लांच पर लोड नहीं करना चाहिए

extjs4.2 extjs-stores (4)

मेरे पास autoLoad: true साथ एक स्टोर से जुड़ा एक ग्रिड है autoLoad: true । समस्या यह है कि स्टोर लॉन्च पर लोड हो जाता है, भले ही दृश्य केवल बाद में बनाया जाता है जब मेनू के माध्यम से एक्सेस किया जाता है।

मैंने स्टोर को Application.js में और दृश्य में संदर्भित किया है, लेकिन मैं स्पष्ट रूप से न तो स्टोर या न ही दृश्य instatiating नहीं कर रहा हूँ।

मुझे नहीं पता कि यह कैसे प्राप्त करना है कि स्टोर को केवल तब ही लोड किया जाता है जब दृश्य द्वारा आवश्यक हो।

अगर मैं autoLoad: true लोड करता हूं autoLoad: true , स्टोर लॉन्च पर लोड हो जाता है।
अगर मैं autoLoad: false लोड करता हूं autoLoad: false , स्टोर बिल्कुल भी लोड नहीं होता है।

मुझे पता है यह बहुत बुनियादी है, लेकिन मैं अभी तक फँस गया हूँ।

संदर्भ के लिए सभी प्रासंगिक कोड यहां दिए गए हैं:
एप्लिकेशन / दुकान / Owners.js

Ext.define('Mb.store.Owners', {
    extend: 'Ext.data.Store',
    model: 'Mb.model.Owner',
    autoLoad: true,
    proxy: {
        ...
});

Application.js

Ext.define('Mb.Application', {
    name: 'Mb',
    extend: 'Ext.app.Application',
    models: [
        'Owner'
    ],
    stores: [
        'Owners'
    ],
    ...

एप्लिकेशन / देखें / Owners.js

Ext.define('Mb.view.winbiz.Owners', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.test-gridPanel',
    store: 'winbiz.Owners',
    columns: [{
    ...

दृश्य नियंत्रक में तत्काल है:

Ext.define('Mb.controller.Winbiz', {
    extend: 'Ext.app.Controller',
    views: [
        'Owners'
    ],
    init: function(){
        this.control({
            'menu #test': {click: this.onMenuTest},
        })
    },
    onMenuTest: function(){
        this.getController('Main').addToMainTab('test-gridPanel');
    },

Answers

मैं दृश्य के नियंत्रक को स्टोर लोड को संभालता हूं।

स्टोर पर ऑटोलोड अक्षम करके प्रारंभ करें

Ext.define('Mb.controller.Winbiz', {
    extend: 'Ext.app.Controller',
    views: [
        'Owners'
    ],
    ownerStore: null,
    init: function(){
        this.control({
            'menu #test': {click: this.onMenuTest},
        });

        this.ownerStore = Ext.getStore('winbiz.Owners');
    },
    onMenuTest: function() {
        if (this.ownerStore.loaded === false) {
            this.ownerStore.load(
                scope: this,
                callback: this.onOwnerStoreLoaded
            );
        }
        else {
            this.addToTab();
        }            
    },
    onOwnerStoreLoaded: function (store, records, successful, eOpts) {
        if (successful) {
            store.loaded = true;
            this.addToTab();
        }
    },
    addToTab: function () {
        this.getController('Main').addToMainTab('test-gridPanel');
    }

जिस व्हील को स्टोर के लोड होने से पहले या बाद में बदलना है, वह दूसरा सवाल है।

यह मेरा अंतिम नियंत्रक कोड है:

Ext.define('Mb.controller.Winbiz', {
    extend: 'Ext.app.Controller',
    views: [
        'Owners'
    ],
    refs: [{ref: 'testGrid', selector: 'test-gridPanel'}],
    init: function(){
        this.listen({
            store: {
                '#Owners':{ load: this.onOwnersLoad}
            }
        })
        this.control({
            'menu #test': {click: this.onMenuTest},
            'test-gridPanel': {render: this.onOwnersRender}
        })
    },
    onMenuTest: function(){
        this.getController('Main').addToMainTab('test-gridPanel');
    },
    onOwnersLoad: function(store){
        store.loaded = true
    },
    onOwnersRender: function(){
        var store = this.getTestGrid().getStore();
        if(!store.loaded)store.load();
    },

यह @ccguru द्वारा सुझाए अनुसार सभी कोड को नियंत्रक में डालता है और @Lolo द्वारा सुझाए अनुसार कोड को छोटा करने के लिए रेंडर ईवेंट का उपयोग करता है धन्यवाद

आप render हैंडलर को जोड़ सकते हैं जो कि स्टोर load विधि को कॉल करेगा और autoLoad अक्षम करेगा।

उदाहरण श्रोता:

Ext.define('Mb.view.winbiz.Owners', {
    extend: 'Ext.grid.Panel',
    [...],

    initComponent: function(){
        this.callParent();
        this.on('render', this.loadStore, this);
    },

    loadStore: function() {
        this.getStore().load();
    }
});

आइए डीओएम तत्वों के ईवेंट हैंडलिंग का वर्णन करके शुरू करें।

डोम नोड घटना हैंडलिंग

सबसे पहले आप सीधे डोम नोड के साथ काम नहीं करना चाहेंगे। इसके बजाय आप शायद Ext.Element इंटरफ़ेस का उपयोग करना चाहेंगे। इवेंट हैंडलर को असाइन करने के उद्देश्य से, Element.addListener और Element.on (ये समकक्ष हैं) बनाए गए थे। तो, उदाहरण के लिए, अगर हमारे पास एचटीएमएल है:

<div id="test_node"></div>

और हम click इवेंट हैंडलर जोड़ना चाहते हैं।
आइए Element पुनः प्राप्त करें:

var el = Ext.get('test_node');

अब चलो click घटना के लिए दस्तावेज़ों की जांच click । यह हैंडलर में तीन पैरामीटर हो सकते हैं:

क्लिक करें (Ext.EventObject ई, HTMLElement टी, ऑब्जेक्ट eOpts)

इन सभी चीजों को जानना हम हैंडलर असाइन कर सकते हैं:

//       event name      event handler
el.on(    'click'        , function(e, t, eOpts){
  // handling event here
});

विजेट घटना प्रबंधन

विजेट इवेंट हैंडलिंग डीओएम नोड्स इवेंट हैंडलिंग के समान ही है।

सबसे पहले, विगेट्स इवेंट हैंडलिंग को Ext.util.Observable mixin का उपयोग करके महसूस किया जाता है। घटनाओं को सही तरीके से संभालने के लिए आपके विजेट को एक Ext.util.Observable रूप में Ext.util.Observable को containg करना चाहिए। सभी अंतर्निर्मित विजेट (जैसे पैनल, फॉर्म, ट्री, ग्रिड, ...) में Ext.util.Observable डिफ़ॉल्ट रूप से एक Ext.util.Observable रूप में है।

विगेट्स के लिए हैंडलर असाइन करने के दो तरीके हैं। पहला - विधि (या addListener ) on उपयोग on । उदाहरण के लिए Button विजेट बनाएं और इसे click ईवेंट को असाइन click । सबसे पहले आपको हैंडलर के तर्कों के लिए ईवेंट के दस्तावेज़ों की जांच करनी चाहिए:

क्लिक करें (Ext.button.Button यह, घटना ई, ऑब्जेक्ट eOpts)

अब चलिए इसका उपयोग on :

var myButton = Ext.create('Ext.button.Button', {
  text: 'Test button'
});
myButton.on('click', function(btn, e, eOpts) {
  // event handling here
  console.log(btn, e, eOpts);
});

दूसरा तरीका विजेट के listeners कॉन्फ़िगरेशन का उपयोग करना है:

var myButton = Ext.create('Ext.button.Button', {
  text: 'Test button',
  listeners : {
    click: function(btn, e, eOpts) {
      // event handling here
      console.log(btn, e, eOpts);
    }
  }
});

ध्यान दें कि Button विजेट एक विशेष प्रकार का विजेट है। handler कॉन्फ़िगरेशन का उपयोग कर इस विजेट को ईवेंट को असाइन किया जा सकता है:

var myButton = Ext.create('Ext.button.Button', {
  text: 'Test button',
  handler : function(btn, e, eOpts) {
    // event handling here
    console.log(btn, e, eOpts);
  }
});

कस्टम घटनाओं फायरिंग

सबसे पहले आपको addEvents विधि का उपयोग करके एक ईवेंट पंजीकृत करने की आवश्यकता है:

myButton.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);

addEvents विधि का उपयोग वैकल्पिक है। चूंकि इस विधि की टिप्पणियों का कहना है कि इस विधि का उपयोग करने की कोई आवश्यकता नहीं है लेकिन यह घटनाओं के दस्तावेज के लिए जगह प्रदान करता है।

अपने ईवेंट का उपयोग करने के लिए fireEvent विधि का उपयोग करें:

myButton.fireEvent('myspecialevent1', arg1, arg2, arg3, /* ... */);

arg1, arg2, arg3, /* ... */ हैंडलर में पारित किया जाएगा। अब हम आपके आयोजन को संभाल सकते हैं:

myButton.on('myspecialevent1', function(arg1, arg2, arg3, /* ... */) {
  // event handling here
  console.log(arg1, arg2, arg3, /* ... */);
});

यह उल्लेखनीय है कि addEvents विधि कॉल डालने के लिए सबसे अच्छी जगह विजेट की initComponent विधि है जब आप नए विजेट को परिभाषित कर रहे हैं:

Ext.define('MyCustomButton', {
  extend: 'Ext.button.Button',
  // ... other configs,
  initComponent: function(){
    this.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);
    // ...
    this.callParent(arguments);
  }
});
var myButton = Ext.create('MyCustomButton', { /* configs */ });

घटना बुलबुले को रोकना

Ext.EventObject.preventDefault() को रोकने के लिए आप return false कर सकते return false या Ext.EventObject.preventDefault() उपयोग कर सकते return false । ब्राउज़र के डिफ़ॉल्ट क्रिया उपयोग को रोकने के लिए Ext.EventObject.stopPropagation() ।

उदाहरण के लिए चलिए अपने बटन पर क्लिक इवेंट हैंडलर असाइन करें। और यदि बाएं बटन को क्लिक नहीं किया गया था तो डिफ़ॉल्ट ब्राउज़र कार्रवाई को रोकें:

myButton.on('click', function(btn, e){
  if (e.button !== 0)
    e.preventDefault();
});