Showing posts with label EXT-JS. Show all posts
Showing posts with label EXT-JS. Show all posts

Wednesday, 2 May 2012

Setting background color and font display color dynamically for LabelField in Extjs

We can set colors for LabelField dynamically in Extjs by use of the function setText().
Example :


 var test = new Ext.form.LabelField({
id: 'name',
                fieldLabel:'Name',
                width: 200,              
                height: 100,
                xtype: 'label',
});


normally it displays like these



in runtime you dynamically apply colors for "back -ground"  and "fonts" use these field id

Ext.getCmp('name').setText('<span id="ot" style="back-ground:yellow;color: red; display: block"><center><b>Welcome to My Blogspot </b></center></span>',false);
In runtime it shows




The false argument will prevent the html tags from being mangled by the function.


you can apply all HTML tags inside of these function

Monday, 26 March 2012

callback function use in Ext.data.Store


        In ExtJs some application displaying value only at combobox sometime.Because of it take long time fetch label for that value from store .For that we can use setTimeout  function to solve this issue.But it is not proper way to solve this issue.Because time delay  differs based on different browser and browser version.
        Instand of setTimeout function we use "callback" function in "store.load" .This quickly fetch label for that value and displaying label value.

EXAMPLE:
         var testStore = new Ext.data.Store({
                 autoLoad: true,
                proxy: new Ext.data.HttpProxy({
                url: 'applicationURL'}),
                reader: new Ext.data.JsonReader({ root: 'rootElementOfJson'}, [{ name: 'value' }, { name: 'label'}])
     });

testStore.load({
callback: function(rec, options, success) {
Ext.getCmp('comboFieldId').setValue(document.getElementById('fileldId').value);
}

callback function is applicable for only proxy method of store loading

Wednesday, 14 December 2011

HOW CAN YOU GET LABEL FIELD OF ITEMSELECTOR BOX IN EXTJS?

Use of text() method you can get that exact label value in itemselector

    "  $('#id of that field').text() "



HOW CAN YOU GET LABEL FIELD OF COMBO BOX IN EXTJS?

Use of getRawValue() method you can get label field of  combo box in ExtJs.

Example :
    You have one combo field like
    var otStore = new Ext.data.ArrayStore({
             data : [[' 1','OT1'],[' 2','OT 2'],['3','MINOR OT'],['4','OPTHAL OT']],
fields: ['id','displayValue'],
sortInfo: {
field: 'displayValue',
direction: 'ASC'
}
    });

     otStore is one static Store loaded into combo field      

               items : [{
                       xtype : 'combo',
id:'ot',
store: otStore,
valueField:'value',
displayField:'label',
mode: 'local',
triggerAction : 'all',      
selectOnFocus:  true,
editable      : true,
forceSelection: true,
fieldLabel : 'Parent Menu',              
                 
}]
}]

Now you can get label field("OT,MINOR OT") by use of

      "  $('$ot').getRawValue(); "

now youu can get all values like OT,MINOR OT and etc.

Sunday, 4 December 2011

Query Of Multiple columns in Ext-js store


You can Query Multiple Columns instant of using one column

store.queryBy(function(record,id){
     return (record.get('oneField') == someValue && record.get('secondField') == otherValue);
});

and also you can add number of variables using '&&' or '||' conditions

Example:
eventStore.queryBy(function(record,id){
          return (record.get('StartDate') >= (new Date()).clearTime().add(Date.HOUR,3) && record.get('EndDate') <= (new Date()).clearTime().add(Date.HOUR,10));
});