Archivio

Posts Tagged ‘Ext JS’

Ext JS 3.1.1

10 febbraio 2010 zaragon 2 commenti

Released on February 8th, 2010.

Change Log:

Prosegui la lettura…

Categorie:Ajax, Javascript Tag:

ExtJs 3: disable refresh button in PagingToolbar

21 gennaio 2010 zaragon Nessun commento 

this.pbar = new Ext.PagingToolbar({.......});

myGrid.on("afterrender", function() {
this.pbar.refresh.hideParent = true;
this.pbar.refresh.hide();
});
Categorie:Ajax Tag: ,

[ExtJs - TreePanel] How to change icon onClick

1 ottobre 2009 zaragon Nessun commento

If we want to change icon when click on node, we can apply the following CSS class


.x-tree-selected .x-tree-node-icon {background-image:url(../images/myTheme/node-leaf-selected.png) !important;}

Categorie:My Life Tag: ,

ExtJs: effettuare chiamare Ajax a pagine .aspx

11 marzo 2009 zaragon Nessun commento

Esempio banale sul come richiamare pagine .aspx da ExtJS:

Ext.Ajax.request({
url: 'test.aspx',
params: {
//lista dei parametri da passare alla pagina .aspx
},
success: function(result, request) {
//decodifico il JSON che mi viene restituito dalla chiamata alla pagina aspx
var objResult = Ext.util.JSON.decode(result.responseText)
alert('OK');
},
failure: function(result, request) { alert('Errore'); },
scope: this
});

Come noterete, decodifico il response della pagina .aspx perchè che mi faccio restituire un oggetto JSON. Della serializzazione JSON in ASP.NET 3.5, ne avevamo già parlato JSON serialization in ASP.NET 3.5

Categorie:ASP.NET, Ajax Tag: , ,

EXT JS: Modificare le dimensioni dei font con Ext.Slider

15 febbraio 2009 zaragon Nessun commento

Da parecchio tempo sono impegnato nella realizzazione di un importante progetto con l’ ausilio del framework javascript Extjs. Tra le tante funzionalità richieste dal cliente, c’è quella di modificare le dimensioni del font dei testi e lo Slider mi è venuto in aiuto. Vi posto un pò di codice che ho scritto per l’ occasione sperando che possa esservi utile come spunto. Se avete qualche suggerimento sono tutto orecchi…

Dichiaro lo slider e l’ evento

var slider = new Ext.Slider({ width: 100
                            , value: 12
                            , increment: 1
                            , minValue: 9
                            , maxValue: 15
                            , animate: false
                            , plugins: new Ext.ux.SliderTip()
});
slider.on('changecomplete', this.onChangecomplete, this);
this.sliderValue = 12;

changeFontSize: function(startValue, endValue) {
    this.removeClass(String.format('doc-font-{0}', this.sliderValue));
    this.addClass(String.format('doc-font-{0}', endValue));

},

onChangecomplete: function(slider, newValue) {
    this.changeFontSize(this.sliderValue, newValue);
    this.sliderValue = newValue;
}

Nella dichiarazione ho utilizzato il seguente plugin:

/**
* @class Ext.ux.SliderTip
* @extends Ext.Tip
* Simple plugin for using an Ext.Tip with a slider to show the slider value
*/
Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
    minWidth: 10,
    offsets: [0, -10],
    init: function(slider) {
        slider.on('dragstart', this.onSlide, this);
        slider.on('drag', this.onSlide, this);
        slider.on('dragend', this.hide, this);
        slider.on('destroy', this.destroy, this);
    },

    onSlide: function(slider) {
        this.show();
        this.body.update(this.getText(slider));
        this.doAutoWidth();
        this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
    },

    getText: function(slider) {
        return slider.getValue();
    }
});

Categorie:Ajax Tag:

EXT JS: Impostare il body di una Ext.Window

11 dicembre 2008 zaragon Nessun commento

Creando delle Ext.Window, vi sarete resi conto della mancaza dello sfondo del body. Ecco come impostarlo:

Creo una nuova Window chiamata “myWin”:

var myWin = new Ext.Window({ id:"myWin"
                           , title:"search result"
                           , .... .... });

Nel CSS creiamo una classe come segue ed il gioco è fatto:

#myWin .x-window-body { background:#fff !important; }

Categorie:Ajax Tag: ,