Ext.js - Domande e risposte

Ext JS sta per JavaScript esteso. Si tratta di un framework JavaScript per sviluppare applicazioni desktop basate su Web con interfaccia utente avanzata.

È un prodotto Sencha che è esteso da YUI (interfaccia utente di Yahoo).

Questi sono i file principali da includere nella pagina HTML per eseguire il codice Ext JS -

• Ext-all.js
• Ext-all.css

• Widget dell'interfaccia utente personalizzabili con raccolta di un'interfaccia utente ricca come griglie, griglie pivot, moduli, grafici, alberi.
• Compatibilità del codice delle nuove versioni con quella precedente.
• Un gestore di layout flessibile aiuta a organizzare la visualizzazione di dati e contenuti su più browser, dispositivi e dimensioni dello schermo.
• Il pacchetto dati avanzato separa i widget dell'interfaccia utente dal livello dati. Il pacchetto di dati consente la raccolta di dati sul lato client utilizzando modelli altamente funzionali che abilitano funzionalità come l'ordinamento e il filtro.
• È indipendente dal protocollo e può accedere ai dati da qualsiasi fonte di back-end.
• Temi personalizzabili I widget Ext JS sono disponibili in più temi pronti all'uso che sono coerenti tra le piattaforme.

• Semplifica lo sviluppo multipiattaforma su desktop, tablet e smartphone, sia per i browser moderni che per quelli legacy.

• Aumenta la produttività dei team di sviluppo integrandosi negli ambienti di sviluppo aziendale tramite plug-in IDE.

• Riduce il costo dello sviluppo di applicazioni web.

• Consente ai team di creare app con un'esperienza utente avvincente.

• Ha una serie di widget per rendere l'interfaccia utente potente e facile.

• Segue l'architettura MVC codice quindi altamente leggibile.

• La dimensione della libreria è di circa 500 KB, il che aumenta il tempo di caricamento iniziale e rallenta l'applicazione.

• L'HTML è pieno di tag <DIV> lo rende complesso e difficile da eseguire il debug.

• Secondo la politica di licenza pubblica generale, è gratuito per le applicazioni open source ma a pagamento per le applicazioni commerciali.

• Alcune volte per caricare cose anche semplici sono necessarie poche righe di codice che è più semplice in semplice html o Jquery.

• Hai bisogno di uno sviluppatore abbastanza esperto per lo sviluppo di applicazioni Ext JS.

Ext JS supporta la compatibilità cross browser, supporta tutti i principali browser come:

• IE 6 e versioni successive
• Firefox 3.6 e versioni successive
• Chrome10 e versioni successive
• Safari 4 e versioni successive
• Opera 11 e versioni successive

Ext JS 4+ supporta l'architettura MVC (Model view controller). Da Ext JS 5 ha iniziato a supportare anche MVVM (Model View Viewmodel).

Ext JS 6 è l'ultima versione di Ext JS che ha il grande vantaggio di poter essere utilizzata sia per desktop che per applicazioni mobili. Fondamentalmente è una fusione di Ext JS (applicazioni desktop) e Sencha touch (applicazione mobile).

Ext JS è un framework JavaScript, quindi per iniziare a usarlo dovresti avere una conoscenza preliminare di HTML e JS (non a livello di esperto ma dovresti avere una comprensione di base). Quindi ci vuole per capire le basi, quindi dagli tempo e impara gradualmente.

Entrambi i framework sono abbastanza diversi, possiamo confrontare Ext JS e jQuery UI poiché Ext JS è un framework ricco di interfaccia utente a tutti gli effetti. Ma Ext JS ha ancora molti più componenti dell'interfaccia utente di jQuery.

Ext JS 1.1

La prima versione di Ext JS è stata sviluppata da Jack Slocum nel 2006. Era un insieme di classi di utilità che è un'estensione di YUI. Ha chiamato la biblioteca come YUI-ext.

Ext JS 2.0

La versione 2.0 di Ext JS è stata rilasciata nel 2007. Questa versione aveva una nuova documentazione API per l'applicazione desktop con funzionalità limitate. Questa versione non aveva compatibilità con le versioni precedenti di Ext JS.

Ext JS 3.0

La versione 3.0 di Ext JS è stata rilasciata nel 2009. Questa versione ha aggiunto nuove funzionalità come visualizzazione grafico e elenco, ma a scapito della velocità. Era retrocompatibile con la versione 2.0.

Ext JS 4.0

Dopo il rilascio di Ext JS 3, gli sviluppatori di Ext JS hanno avuto la sfida principale di aumentare la velocità. La versione 4.0 di Ext JS è stata rilasciata nel 2011. Aveva la struttura completamente rivista, seguita dall'architettura MVC e da un'applicazione veloce.

Ext JS 5.0

La versione 5.0 di Ext JS è stata rilasciata nel 2014. La modifica principale in questa versione è stata la modifica dell'architettura MVC in architettura MVVM. Include la possibilità di creare app desktop su dispositivi abilitati al tocco, data binding bidirezionale, layout reattivi e molte altre funzionalità.

Ext JS 6.0

Ext JS 6 unisce il framework Ext JS (per applicazione desktop) e sencha touch (per applicazione mobile).

Ext JS ha vari componenti dell'interfaccia utente, alcuni dei componenti maggiormente utilizzati sono:

• Grid
• Form
• Casella dei messaggi
• Barra di avanzamento
• Punta dello strumento
• Window
• Editor HTML
• Charts

xType definisce il tipo di componente Ext JS UI, che viene determinato durante il rendering del componente. Ad esempio textField, Numerico, pulsante ecc.

Questo è il tipo di convalida che può essere personalizzato facilmente. Pochi vType forniti da Ext JS sono:

alphanumText - Restituisce false se il testo immesso ha un simbolo diverso da un valore alfabetico o numerico.

emailText - Restituisce false, se il testo non è un indirizzo email valido.

Sì Ext JS può essere integrato con Ajax. Implementazione come: supponiamo che su qualche casella di testo dopo la sfocatura debba convalidare i dati dal server per questo possiamo avere una chiamata Ajax onblur / onchange all'id della casella di testo per verificare se i dati inseriti nella casella di testo sono presenti nel server / database .

Sì Ext JS può essere integrato con altri framework lato server come Java, .net, Ruby on rails, PHP, ColdFusion ecc.

Ext JS può essere implementato su qualsiasi popolare ambiente di sviluppo integrato (IDE) come Eclipse, Aptana, Sublime, Webstrom ecc.

Questi sono alcuni modi per accedere agli elementi DOM in Ext JS -

• Ext.get()
• Ext.getElementById()
• Ext.fly()
• Ext.select()

L'architettura MVVM è Model View Viewmodel. Nell'architettura MVVM il controller di MVC è sostituito da ViewModel.

ViewModel- Fondamentalmente medita i cambiamenti tra vista e modello. Associa i dati dal modello alla visualizzazione. Allo stesso tempo non ha alcuna interazione diretta con la vista, ha solo conoscenza del modello.

Ext.getCmp('buttonId').on('click', function(){
// statement to perform logic
});

Ext.onReady () è il primo metodo che viene chiamato quando il DOM è completamente caricato in modo che qualunque elemento tu voglia fare riferimento sarà disponibile quando lo script viene eseguito.

Ext.select('div').on('click', function(){
// statement to perform logic
});

Diversi tipi di caselle di avviso in Ext JS sono:

• Ext.MessageBox.alert();
• Ext.MessageBox.confirm();
• Ext.MessageBox.wait();
• Ext.MessageBox.promt();
• Ext.MessageBox.show();

Le classi di base per Store sono Ext.data.Store

Per il modello è Ext.data.Model

Per Controller è Ext.app.controller

Questi sono i diversi modi per la gestione degli eventi:

• Usare gli ascoltatori
• Allegare eventi in un secondo momento
• Utilizzo di eventi personalizzati

Store.getCount() - Per i record memorizzati nella cache

Store.getTotalCount() - Per il numero totale di record nel DB.

Il metodo Store.getModifiedRecords () viene utilizzato per ottenere i record modificati.

Store.commitChanges () per aggiornare le modifiche del negozio.

Se abbiamo l'ID della griglia: Ext.getCmp ('gridId'). GetStore (). GetAt (index);

Se abbiamo l'ID del negozio: Ext.getStore ('storeId'). GetAt (index);

Store.load ();

• Classe base per Grid - Ext.grid.GridPanel
• Per modulo - Ext.form.Panel
• Per pannello - Ext. Panel.Panel
• Per il grafico - Ext.chart.Chart
• Per albero - Ext.tree.Panel

Diversi tipi di layout sono:

• Absolute
• Accordion
• Anchor
• Border
• Auto
• hBox
• vBox
• Card(TabPanel)
• Card(Wizard)
• Column
• Fit
• Table

Questo può essere fatto usando pagingToolbar () come -

new Ext.PagingToolbar ({
   pageSize: 25,
   store: store,
   displayInfo: true,
   displayMsg: 'Displaying topics {0} - {1} of {2}',
   emptyMsg: 'No topics to display',
});
// trigger the data store load
store.load({params:{start:0, limit:25}});

dockedItems: [{
   xtype: 'toolbar',
   items: [{ 
      id:'buttonId', 
      handler: function() { 
         Ext.Msg.alert('title','alertMsg');
      });
   }]
}]

Loadmask viene utilizzato per impedire qualsiasi altra operazione mostrando il caricamento (o un messaggio personalizzato) all'utente finché i dati non vengono visualizzati nella griglia. Loadmask: vero; è la proprietà per mostrare la maschera di carico durante il rendering dei dati sulla griglia.

Renderer viene utilizzato quando vogliamo manipolare i dati che otteniamo dal negozio per mostrare i dati manipolati in base ad alcuni criteri. È una proprietà della colonna che può essere utilizzata come -

renderer: function(value, metadata, record, rowIndex, colIndex, store){
// logic to perform
}

Ext.getCmp ('id'). GetValue ();

Nascosto: vero;

Ordinabile: vero; che è true per impostazione predefinita.

grid.getStore().on ({
   beforeload : function(store) {
      // perform some operation
   },
   load : {
      fn : function(store) {
         //perform some operation
      },
      scope : this
   }
   store.load();
});

Ext JS 6 ha un pacchetto toolkit con il quale può includere elementi visivi di entrambi i framework (Ext JS e Sencha Touch).

Può essere aggiunto come -

'toolkit': 'classico', // o 'moderno'

Se il toolkit è classico, include il framework dell'applicazione desktop Ext JS.

E se il toolkit è moderno, include il framework per applicazioni mobili Sencha Touch.