jhonjairoroa87's blog: ExtJS

Showing posts with label ExtJS. Show all posts

Tuesday, January 3, 2012

ExtJS 4: get array data from store

var arrayData = Ext.pluck(store.data.items, 'data');

//arrayData = [ ["1", "value1"] , ["2","value2"] ]

Reference:

http://stackoverflow.com/questions/2526764/how-to-retrieve-json-data-array-from-extjs-store

Wednesday, November 2, 2011

ExtJS: doing a preloader screen

Link: http://www.ajaxblender.com/howto-create-preloader-like-at-extjs-com.html

Thursday, October 27, 2011

ExtJS 4 : add/read Custom Attributes in TreeNode

Add a 'fields' array to the TreePanel:

,fields:[ 'text' , 'customfield']

and add the custom attribute to the node

,root: {
text: 'Root',
expanded: true,
children: [
{
text: 'Administracion General'
,customfield:'administracionGeneral'
,expanded: true
}
]
}

modify the listeners and get the custom attribute from record 'rec':

,listeners:{
itemclick: function(view,rec,item,index,eventObj)
{
nodeClickAction = rec.get('customfield');
alert(nodeClickAction);
}
}

i.e

var tree = new Ext.tree.TreePanel({
renderTo: Ext.getBody(),
height: 300,
width: 250,
fields:[ 'text' , 'customfield'],
title: 'Files',
  listeners:{
itemclick: function(view,rec,item,index,eventObj)
{
  nodeClickAction = rec.get('customfield');
alert(nodeClickAction);
}
   }
,root: {
text: 'Root',
expanded: true,
children: [
{
  text: 'Administracion General'
  ,customfield:'administracionGeneral'
,expanded: true
}
]
}
});

Here is a detailed example:

#### index.html ####

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Custom Tree Test</title>

<link rel="stylesheet" type="text/css" href="./ext-4.0.7-gpl/resources/css/ext-all.css"/>


<script type="text/javascript" src="./ext-4.0.7-gpl/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
   Ext.onReady(function(){
    var tree3 = new Ext.tree.TreePanel({
    // title: 'Simple Tree',
    rootVisible : false // hides root
    ,border:false // hides border
    ,fields:[ 'text' , 'onClickAction']
    //,width: 150,
    //height: 150,
    ,listeners:{
     itemclick: function(view,rec,item,index,eventObj)
      {     nodeClickAction = rec.get('onClickAction');
          alert(nodeClickAction);
      }
     }
    ,root: {
     text: 'Root',
     expanded: true,
     children: [
      {
       text: 'Administracion General'
       ,onClickAction:'administracionGeneral'
       ,expanded: true,
       children: [
       {
        text: 'Bodegas'
        ,onClickAction : 'bodegaPanelId'
        ,children:[
         {
           text: 'Crear Bodega'
           ,onClickAction : 'crearBodegaPanelId'
           ,leaf: true
         },{
           text: 'Buscar Bodega'
           ,onClickAction : 'buscarBodegaPanelId'
         ,leaf: true                                            }
]
         },{
            text: 'Tipos Producto'
            ,onClickAction : 'tipoProductoPanelId'
            ,children:[
             {
              text: 'Crear Tipo Producto'
              ,onClickAction : 'crearTipoProductoPanelId'
              ,leaf: true
            },{
             text: 'Buscar Tipo Producto'
             ,onClickAction : 'buscarTipoProductoPanelId'
             ,leaf: true                                                           }
         ]
            },{
              text: 'Tipos Documento'
             ,onClickAction : 'tipoDocumentoPanelId'
             ,children:[
              {
                text: 'Crear Tipo Documento'
                ,onClickAction : 'crearTipoDocumentoPanelId'
                ,leaf: true
              },{
                  text: 'Buscar Tipo Documento'
                  ,onClickAction : 'buscarTipoDocumentoPanelId'
              ,leaf: true
                                                                }
        ]
       }
      ]
     }
]
   }
});

                    var west = new Ext.Panel({
                         id : 'westContentPanelId'
                        ,title: 'Menú Principal'
                        ,layout: 'fit'
                        ,collapsible: false
                        ,region:'west'
                        ,width: 215
                        ,margins: '5 0 5 5'
                        ,items:[tree3]
                    });

var viewportz = new Ext.Viewport({
    layout:'fit', // The Viewport renders itself to the document body, and automatically sizes itself to the size of the
    //browser viewport and manages window resizing
    renderTo: 'container',
    layoutConfig:{animate:true}
    ,items:[west]
     });
   });
    </script>

    <div id="container">
        </div>

    </body>
</html>

Reference:
http://www.sencha.com/forum/showthread.php?145512-Tree-node-custom-attributes

Sunday, October 23, 2011

ExtJS 4: Tree node click event

Add a listener to the TreePanel:

listeners:{
itemclick: function(view,rec,item,index,eventObj)
{
alert(index);
}
}

i.e

var tree = new Ext.tree.TreePanel({
store: store,
renderTo: Ext.getBody(),
height: 300,
width: 250,
title: 'Files',
listeners:{
itemclick: function(view,rec,item,index,eventObj)
{
alert(index);
}
}});

Reference:
http://stackoverflow.com/questions/6094411/handling-itemclick-event-on-tree-panel-extjs-4

Sunday, September 18, 2011

ExtJS (2.2.1): Making ComboBox Filter work from first click.

HAdd the following properties to the combobox that you need to filter:

triggerAction: 'all',
lastQuery: '',

Source:
http://www.sencha.com/forum/showthread.php?26909-linked-combobox-onload-filter&langid=4

Friday, September 9, 2011

ExtJS (2.2.1): xtype button listeners

{
xtype:'button'
,text:'add'
,listeners:{
'click' : function(){alert("hi!!");
}
}
Reference:
http://stackoverflow.com/questions/2372353/extjs-how-can-i-add-event-handlers-to-a-component-in-its-raw-object-form-xtype

ExtJS (2.2.1): Ext.Button absolute position

A Button is not an Ext.BoxComponent, so it cannot be positioned using x and y properties. So the problem can be solved by adding the button to a transparent panel with the same size as the button.

var MyPanel = new Ext.Panel({
layout:'absolute',
width:400,
height:200,
items:[{
xtype:'textfield',
width:150,
x:0,
y:0
},{
xtype:'combo',
width:150,
x:160,
y:0
},{
xtype:'panel',
y:25,
x:0,
items:[
{
xtype:'button',
text:'Search'
}]
}]
});

Source:
http://www.sencha.com/forum/showthread.php?37012-Ext.Button-absolute-position-help

Thursday, August 11, 2011

ExtJS (2.2.1): select item on a ComboBox Programmatically

//The store's data definition must have at least a data.id field defined
set_combobox_value_from_store = function (combobox, valueField, value) {
//Get a reference to the combobox's underlying store
var store = combobox.getStore();
store.load({
callback: function () {
//Find item index in store
var index = store.find(valueField, value, false);
if (index < 0) return;
//Get model data id
var dataId = store.getAt(index).data.Id;
//Set combobox value and fire OnSelect event
combobox.setValue(dataId);
}
});

watch out the change I made on the last line from que reference link:
// before
combobox.setValueAndFireSelect(dataId); // throws setValueAndFireSelect methos doesn''t exist
// value
combobox.setValue(dataId);

reference:
http://www.humbug.in/stackoverflow/es/extjs-combobox-despues-de-reload-tienda-dont-valor-de-conjunto-3781767.html

Tuesday, April 19, 2011

ExtJS (2.2.1): making keypress event work

This doesn't work for me:

listeners:{ 

     keypress: function(field, e){

     alert("kp");

}

this one works just fine:

listeners:{

        'render': function(c) {

          c.getEl().on('

keypress

', function() {

               alert(

"kp"

);

      }, c);

        }

}

Source:
http://www.extjses.com/mensaje7282.html