EzDevInfo.com

How To Re-Empty ComboBox when forceSelection is Set To TRUE (ExtJS 4)

I have a combo box with forceSelection config is set to true.

The combo box is optional. It can be empty.

If user choose one of the options and then re-empty the combo box, it doesn't want to be empty.

The combo box always restores the previously selected value.

It's ridiculous. It should be empty when user delete the value.

How to solve this problem? Is there a config that I missed?

Explain ExtJS 4 event handling

I've recently started learning ExtJS, and have trouble understanding how to handle Events. I have no experience of any previous versions of ExtJS.

From reading various manuals, guides and documentation pages, I've figured out how to use it, but I'm not clear on how it works. I've found several tutorials for older versions of ExtJS, but I'm not sure how applicable they are in ExtJS 4.

I'm specifically looking on the "final word" on things like

• what arguments does an event handling function get passed? Is there a standard set of args that always get passed?
• how to define custom events for custom components we write? how can we fire these custom event?
• does the return value (true/false) affect how the event bubbles? If not, how can we control event bubbling from within, or outside of the event handler?
• is there a standard way to register event listeners? (I've come across two different ways til now, and I'm not sure why each method was used).

For example, this question leads me to believe that an event handler can receive quite a few arguments. I've seen other tutorials where there are just two arguments to the handler. What changes?

Extjs scrollable panel

I have a panel that I insert some html from server:

myPanel.update(response.responseText);

But if this text is too big, none scrollbar appears to navigate the text.

How can I configure a vertical scrollbar in this panel ?

Thanks.

Update:

this is my panel definition:

{
  xtype:'panel',
  width: '100%',
  height: 300,
  id:'mypanel'
},

ExtJs 4... How to extend Extjs 4 components?

can somebody help me with how to extend extjs components using extjs version 4. I am looking for a proper syntax for the same. please help..!!

ExtJS 4: Apply Defaults to all columns in a grid

Now that ExtJS 4 got rid of the ColumnModel object, how do you apply default config options to all columns in a grid?

ExtJS Infinite Scroll Grid with remote Filters and Sort

In ExtJS 4.1 beta 2 I managed to implement an infinite scroll grid with a remote store. I basically took an existing (fully operational) paging grid (with remote store, filtering and sorting) and then put in the appropriate configs for infinite scrolling:

// Use a PagingGridScroller (this is interchangeable with a PagingToolbar)
verticalScrollerType: 'paginggridscroller',
// do not reset the scrollbar when the view refreshs
invalidateScrollerOnRefresh: false,
// infinite scrolling does not support selection
disableSelection: true,   

It doesn't say this anywhere in the docs(see Infinite Scrolling section), but you need to set your store to have buffered: true config. And you can't load with store.load() it needs to be done like this:

store.prefetch({
    start: 0,
    limit: 200,
    callback: function() {
        store.guaranteeRange(0, 99);
    }
});   

With all that, everything works great if I scroll slowly and thus allow the data to prefetch, don't use any filters and don't use any sorting.

However, if I scroll fast or try to make the infinite scroll grid reload with a filter active or while sorting it all breaks apart. Error is options is undefined.

I've spent a couple of hours doing some tracing in the code and googling and aside from concluding that no one has implemented an infinite scroll grid with remote filters and remote scrolling, I have found the following:

The filtering is breaking down because of this method in Ext.data.Store which is called by the infinite scroller when it needs more data from the server:

mask: function() {
    this.masked = true;   
    this.fireEvent('beforeload');
},

For some reason, this method fires the beforeload event without the Ext.data.Operation parameter which is supposed to be part of it as specified here.

As a result, an error occurs in the onbeforeload handler in Ext.ux.grid.FiltersFeature because of course "options" is undefined:

/**
 * @private
 * Handler for store's beforeload event when configured for remote filtering
 * @param {Object} store
 * @param {Object} options
 */
onBeforeLoad : function (store, options) {

    options.params = options.params || {};
    this.cleanParams(options.params);
    var params = this.buildQuery(this.getFilterData());
    Ext.apply(options.params, params);

},

I can cut out the call to this mask method from the PagingScroller code and then the scroll functionality is great. I can scroll as fast as I like and it loads the data properly. But then filters and sort does not get applied to the ajax requests.

I haven't dived as much into the sorting aspect but I think it something similar with this mask method because sort is simply another element contained by the operation object and it causes no operation object to be passed to the ajax request.

I'm thinking that if I could just figure out how to force the mask method to fire beforeload with the operation parameter (like the docs say it is supposed to) everything will be fine. Problem is, I haven't been able to figure out how to do that. Any suggestions?

If someone would just tell me that I am wrong and people have in fact made this work, I would be inspired, but a snippet of any overrides you used to handle this problem or a link would be much appreciated.

I've also tried downgrading to 4.0.7 and 4.0.2a and I get the same results, so it isn't just a beta problem.

Update - 7 Feb 12:

This seems like it may actually be a Ext.ux.grid.FilterFeature problem not an infinite scrolling problem. If I remove the FilterFeature config entirely infinite scrolling works great and does pass the sorting params to my backend when I sort by a column. I will start looking into the FilterFeature end of things.

Ext JS 4: What's the point of requires?

I've been trying to figure out what requires does in Ext JS 4, and I can't seem to come up with a reasonable answer. Let's say I have the following code:

app.js

Ext.Loader.setConfig({
  enabled: true
});

Ext.Loader.setPath('Ext.ux', 'examples/ux');

Ext.application({
  name: 'Test',
  appFolder: 'app',
  controllers: ['TheController'],
  requires: ['Test.Utils', 'Test.Utils2'],  // I don't think this does anything... couldn't find this option for Ext.application
  launch: function() {
    Ext.create('Ext.Viewport', {
      layout: 'border',
      items: [{
        xtype: 'thegrid',
        region: 'center',
        title: 'blah!'
      }]
    });
  }
});

app/controller/TheController.js

Ext.define('Test.controller.TheController', {
  extend: 'Ext.app.Controller',
  models: ['TheModel'],
  stores: ['TheStore'],
  views: ['TheGrid'],
  init: function() {
  }
});

app/view/TheGrid.js

Ext.define('Test.view.TheGrid', {
  extend: 'Ext.grid.Panel',
  alias: 'widget.thegrid',
  requires: ['Test.store.TheStore'],
  store: 'TheStore',
  columns: [
    {header: 'Name', dataIndex: 'name'},
    {header: 'Phone', dataIndex: 'phone'},
    {header: 'Hello', dataIndex: 'hello'}
  ]
});

app/store/TheStore.js

Ext.define('Test.store.TheStore', {
  extend: 'Ext.data.Store',
  requires: ['Test.model.TheModel', 'Test.Utils'],
  model: 'Test.model.TheModel',
  data: [
    {name: 'keanu reeves', phone: '1800matrices', hello: Test.Utils.getText()},
    {name: 'james earl jones', phone: '1800starwar', hello: 'nothing here'},
    {name: 'barack obama', phone: '1800prsidnt', hello: 'hello world'}
  ]
});

app/model/TheModel.js

Ext.define('Test.model.TheModel', {
  extend: 'Ext.data.Model',
  fields: [
    {name: 'name', type: 'string'},
    {name: 'phone', type: 'string'},
    {name: 'hello', type: 'string'}
  ]
});

app/Utils.js

Ext.define('Test.Utils', {
  singleton: true,
  requires: ['Test.Utils2'],
  getText: function() {
    return Test.Utils2.hello + 'world';
  }
});

app/Utils2.js

Ext.define('Test.Utils2', {
  singleton: true,
  hello: 'hello'
});

I realize this is a really long example, but I needed to make sure I fully portrayed what I was doing. Utils relies on Utils2 because it needs to call Utils2's hello variable. The rest of the code is setting up a grid and calling the Utils.getText function in TheStore. Firebug throws a Test.Utils is undefined on line 6 in TheStore.js, and at that point in time, Test.Utils obviously doesn't exist, but Test.Utils2 does.

My question is... why does Utils2 exist, but Utils doesn't? I thought requires brought in the classes that I needed, thus allowing me to use them, but I guess I'm wrong. I've read the Sencha docs and a multitude of threads, but nothing really made sense, and it doesn't really explain this example. Can anyone shed some insight here? I'd appreciate it.

**Also, I realize I'm doing some dumb things here, but it's merely for an example, so I'm not looking to combine the global Utils or not use globals at all... I'm just trying to figure out the requires option.

UPDATE

Thanks to Izhaki's answer below, I figured something out. If I want to use a required class in a class I'm defining, I would have to wait for the object to get created (IE, use initComponent), so my store and grid code changes to:

app/store/TheStore.js

Ext.define('Test.store.TheStore', {
  extend: 'Ext.data.Store',
  requires: ['Test.model.TheModel'],
  model: 'Test.model.TheModel'
});

app/view/TheGrid.js

Ext.define('Test.view.TheGrid', {
  extend: 'Ext.grid.Panel',
  alias: 'widget.thegrid',
  requires: ['Test.store.TheStore'],
  store: 'TheStore',
  columns: [
    {header: 'Name', dataIndex: 'name'},
    {header: 'Phone', dataIndex: 'phone'},
    {header: 'Hello', dataIndex: 'hello'}
  ],
  // This is the change that works
  initComponent: function() {
    this.callParent();
    this.store.loadData([
      {name: 'keanu reeves', phone: '1800matrices', hello: Test.Utils.getText()},
      {name: 'james earl jones', phone: '1800starwar', hello: 'nothing here'},
      {name: 'barack obama', phone: '1800prsidnt', hello: 'hello world'}
    ]);
  }
});

This works, but my last question is... do I have to have the requires for TheModel in TheStore, and/or TheStore in TheGrid? It seems like TheController is taking care of all of those requires because I can use Test.Utils in TheGrid, but TheGrid doesn't specifically state that it requires Test.Utils.

Also, this example from the Sencha docs makes me more confused because I'm clearly not using Test.Utils until TheStore is created, but this example seems like it can use the Child class without having to wait for it to initialize (using initComponent).

ExtJS 4 RowEditing disable edit on one column based on record

I'm implementing a grid panel with the four last columns editable for most of the rows. The problem is that I'd like to be able to disable editing on, let's say the first one if record.get('status') = 4 which is finalized and only two of the columns should be editable.

Is there a way to disable showing the edit for those rows? I can do it using CellEditing but want to keep using the RowEditing plugin.

Regards, Kristian

Advice, help needed with ExtJS 4: grid: cell editing: auto edit feature

I searched ExtJS related questions and didn't found any reference, but if I missed it sorry in advance to making duplicate question.

I would like to ask some assistance on how to make ExtJS 4 grid: cell editing: auto edit feature – what I mean is, I want to enter in cell editing mode when I press a key (for example, by pressing “123” in highlighted cell, text is replaced (if there is any) with “123”). At the moment entering cell editing mode can be done by pressing ENTER or clicking with mouse.

As base I am using Sencha provided example: http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/cell-editing.html

Any tips, pointers would be appreciative.

Thanks in advance! :)

Actually I did solve my problem partially. Found a way to make cell editable on key press, put selectOnFocus config param for text selecting in cell, now I need insert first char (that initiated editing mode) in cell.

It can be not the most beautiful solution, but it work for me :) Here is full code up till now.

var tStore = Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
        {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
        {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
        {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

var tCellEdit = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
});

var tGrid = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: tStore,
    columns: [
        {header: 'Name',  dataIndex: 'name', field: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype:'textfield',
                allowBlank:false,
                selectOnFocus: true
            }
        },
        {header: 'Phone', dataIndex: 'phone'}
    ],
    selType: 'cellmodel',
    plugins: [tCellEdit],
    listeners: {
        keypress: {
            element: 'el',
            fn: function(iEvent, iElement) {
                iCode = iEvent.getKey();
                if (iCode != undefined && iCode != iEvent.LEFT && iCode != iEvent.RIGHT && iCode != iEvent.UP && iCode != iEvent.DOWN && iCode != iEvent.ENTER && iCode != iEvent.ESC) {
                    var iView = tGrid.getView();
                    var position = iView.selModel.position;

                    tCellEdit.startEditByPosition(position);
                }
            }
        }
    },
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

How to add row double click event listener when extending grid panel with Ext.define()?

I am extending GridPanel with Ext.define() (Ext v4).

I need to get the row data when a grid row is double clicked. At this point I cannot even get the event listener working:

Ext.define('Application.usersGrid', {
extend: 'Ext.grid.GridPanel',
alias: 'widget.usersgrid',


viewConfig: {
    listeners: {
        dblclick: function(dataview, index, item, e) {
            alert('dblclick');
        }
    }
},
...

What is wrong here?

If anyone needs the answer- this is the right way:

Ext.define('Application.usersGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.usersgrid',


viewConfig: {
    listeners: {
        itemdblclick: function(dataview, record, item, index, e) {
            alert('itemdblclick');
        }
    }
},
...

http://dev.sencha.com/new/ext-js/4-0/api/Ext.grid.GridView#event-itemdblclick

initComponent vs constructor when defining an object

When should I be using initComponent compared to constructor ?

I have been using initComponent to extend my objects, but looking at the docs for Ext.define is see them using constructor all over then place. what is the difference?

compare:

Ext.define('My.app.PanelPart2', {
    extend: 'My.app.Panel',
    constructor: function (config) {
        this.callSuper(arguments); // calls My.app.Panel's constructor
        //...
    }
});

to

Ext.define('My.app.PanelPart2', {
    extend: 'My.app.Panel',
    initComponent: function (config) {
        Ext.apply(this, config);
        this.callParent(arguments);
    }
});

I am aware of the fact that some components don't init ( Im looking at you Ext.data.Store ), which leads me towards leaning towards only over writing the constructor, as that should be universal.

How to use Ext.define in ExtJS 4?

I'm new to ExtJS 4 and need some help understanding how the Ext.define works, please.

In fact what I want to do is something similar to the portlets in the portal example, in my application I will need so many objects to add in my different tabs, so in order to organize my code and not have just one very big script, I want to define each component I need in a separate file and then call it in the main script when I need it (I will mainly use the examples so this is why I want to know how Ext.define works so I can adapt those examples and make them work the way I want).

I hope I was clear.

And thank you in advance for your help.

Attach ExtJS MVC controllers to DOM elements, not components

Is there a way to use the Ext.app.Controller control() method, but pass in a DOM query? I have a page that contains standard links and would like to add a click handler to them even though they were not created as Ext Buttons.

I've tried

Ext.define('app.controller.TabController', {
    extend: 'Ext.app.Controller',

    init: function() {
        console.log("init");
        this.control({
            'a': {
                click: this.changeTab
            }   
        });
    },

    changeTab: function() {
        alert("new tab!");
    }   
});

But clicking on links does not fire the alert.

Is there a way to specify a CSS selector with this.control? Or does it only work with components?

How to change extjs grid single cell background color depending on value changes?

To change whole row background color we can use getRowClass, but how to do the same logic only for one cell, and particular column....any ideas?

//EXTJS
viewConfig: {
    getRowClass: function(record, index) {
        var c = record.get('change');
        if (c < 0) {
            return 'price-fall';
        } else if (c > 0) {
            return 'price-rise';
        }
    }
}

//CSS
.price-fall { 
        background-color: #FFB0C4;
}
.price-rise {
        background-color: #B0FFC5;
}

EDIT:

There is a way of doing this with:

 function change(val){
    if(val > 0){
        return '<div class="x-grid3-cell-inner" style="background-color:#B0FFC5;"><span style="color:green;">' + val + '</span></div>';
    }else if(val < 0){
        return '<div class="x-grid3-cell-inner" style="background-color:#FFB0C4;"><span style="color:red;">' + val + '</span></div>';
    }
    return val || 0;
}

and then just:

...
{header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change', align: 'center'}
...

but this way grid gets deformed on changes from white to colored background... ???

any other ideas?

EDIT
After custom css is applyed to the column, how to remove the same in a short period of time, so it appears to blink once when the value has changed? Something like setTimeout("remove-css()",1000); or with Ext.Function.defer(remove-css, 1000);
Any ideas?

Ext.loader not enabled Missing required?

I have some problems with Extjs4 librairie. I want to use treeEditor component.

Firebug error :

Error : uncaught exception: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.tree.TreeNode

My code :

Ext.require([

'Ext.form.*',
'Ext.grid.*',
'Ext.tree.*',
'Ext.data.*',
'Ext.util.*',
'Ext.loader.*',
'Ext.state.*',
'Ext.layout.container.Column',
'Ext.tab.TabPanel'

]);

Ext.onReady(function(){

    // shorthand
    Ext.QuickTips.init();


    var tree = Ext.create('Ext.tree.TreePanel', {
            animate:false,
            enableDD:false,
    //      loader: new Tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
            lines: true,
            rootVisible:false,
        //  selModel: new Ext.tree.MultiSelectionModel(),
            containerScroll: false
    });

        // set the root node
        var root = Ext.create('Ext.tree.TreeNode',{
            text: 'Autos',
            draggable:false,
            id:'source'
        });

        tree.on('contextmenu',showCtx);
        tree.on('click',function(node,e){node.select();return false;});
        // json data describing the tree

        var json = [
                {"text" : "1","allowEdit" : true, "id" : 300, "leaf" : false, "cls" : "folder", "children" : [
                {"text" : "11","allowEdit" : true, "id" : 3000, "leaf" : false, "cls" : "folder","children" :[
                {"text" : "111","allowEdit" : true, "id" : 300, "leaf" : false, "cls" : "folder","children" :[
                {"text" : "1111","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file"},
                {"text" : "1112","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file"},
                {"text" : "1113","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file"}
                ]},
                {"text" : "112","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file"},
                {"text" : "113","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file"}
                ]},
                {"text" : "12","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file"},
                {"text" : "13","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file"}
                ]},
                {"text" : "2","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file"},
                {"text" : "3","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file",iconCls:'node'}
                ];

                for(var i = 0, len = json.length; i < len; i++) {
                root.appendChild(tree.getLoader().createNode(json[i]));
                }

        var ge = Ext.create('Ext.tree.TreeEditor',tree,{},{
            allowBlank:false,
            blankText:'Nom du dossier',
            selectOnFocus:true,
            cancelOnEsc:true,
            completeOnEnter:true,
            ignoreNoChange:true,
            updateEl:true
            });

            /*ge.on('beforestartedit', function(){

            if(!ge.editNode.attributes.allowEdit){
                return false;
            }
                });*/

        tree.setRootNode(root);
        tree.render();
        root.expand(true);

        });

Thanks :)