Reloading a json store with new parameters ExtJs Ext.data.JsonStore

I am currently having trouble of reloading a json store with new parameters. Here is my store:

 newsletters = new Ext.data.JsonStore({
        url: '/newsletters/',
        root: 'results',
        fields: [
             'id',
             'body'
             'recipients'
        ],
        baseParams: { command: 'json', to: dateTo, from: dateFrom },
    autoLoad: true
    });

dateTo and dateFrom are initally empty strings ( '' ) and checking in firebug /newsletters is called with the correct parameters.

Now none of the following techniquest work:

Changing the values of dateTo and dateFrom then calling newsletters.reload() still calls the page with the parameters to and from being empty strings.

Calling newsletters.reload( { to: 'test1', from: 'test2' } ); still sees the parameters as empty strings.

Finally as from the manual I have tried:

lastOptions = newsletters.lastOptions;
Ext.apply(lastOptions.params, {
    to: 'test1',
    from: 'test2'
});
newsletters.reload(lastOptions);

This again does not request /newsletters with the updated parameters.

Any advice appreciated!

ExtJS 4 Change grid store on the fly

Is it posible to change grid's store in ExtJS 4?

For example, i have two models:

User = Ext.define('User',{
  extend: 'Ext.data.Model',
  [...],
  hasMany: 'Product'
});

Product = Ext.define('Product',{
  extend: 'Ext.data.Model',
  [...]
});

and two grids. The first grid is linked with Store which uses User model and loads nested json data from backend, like

{
  users: [{
     id: 1,
     products: [
       {id: 1},
       {id: 2}
     ]
  }, {
     id: 2,
     products: [
       {id: 3},
       {id: 4},
       {id: 5}
     ]
  }]
}

All i want to get is when you click on the row in the first grid, the second grid must show products of the user, without connection to the server. All i know is that user.products(); returns a Ext.data.Store object. So the idea is to change second grid's store to user.products();, but there is no such method grid.setStore() :-)

Thanks in advance

How to create custom ExtJS form field component?

I want to create custom ExtJS form field components using other ExtJS components in it (e.g. TreePanel). How can I do it most easily?

I've read docs of Ext.form.field.Base but I don't want to define field body by fieldSubTpl. I just want to write code which creates ExtJS components and maybe some other code which gets and sets values.

Update: Summarized purposes are the followings:

• This new component should fit in the form GUI as a field. It should have label and the same alignment (label, anchor) of other fields without need of further hacking.

• Possibly, I have to write some getValue, setValue logic. I'd rather embed it into this component than making separated code which copies things into further hidden form fields that I also have to manage.

How to retrieve Request Payload

I'm using PHP, ExtJS and ajax store.

It sends data (on create, update, destroy) not in POST or GET. In the Chrome Console I see my outgoing params as JSON in the "Request Payload" field. $_POST and $_GET are empty.

How to retrieve it in PHP?

What is ExtJS philosophy? Single page application?

I need to write my next project using ExtJs. It's a nice Javascript lib but I don't fully understand the idea behind it. Take the docs page for example.

Am I supposed to write my web applications with extjs like that? One page that should never be refreshed, and everything getting done by AJAX?

How do you debug such applications if getting to the right place may take a lot of 'clicking' and working with it. You cannot fix the bug and hit refresh in the browser to see the results.

Any suggestions?

Javascript: Uploading a file... without a file

I am trying to fake a file upload without actually using a file input from the user. The file's content will be dynamically generated from a string.

Is this possible? Have anyone ever done this before? Are there examples/theory available?

To clarify, I know how to upload a file using AJAX techniques using a hidden iframe and friends - the problem is uploading a file that is not in the form.

I am using ExtJS, but jQuery is feasible as well since ExtJS can plug into it (ext-jquery-base).

Sencha Touch - looking for a good tutorial / getting started for a content application [closed]

I'm trying to build a mobile "content" application that will be used to display many pages of mostly text, using Sencha Touch (based on ExtJs). I'm familiar with JQuery & JQTouch; I've never used ExtJs before.

What's the best/fastest way to get started?

I started with the "icons" demo and was able to add a scroll property ('vertical') to have content be scrollable between the top and bottom tabs (that's actually what brought me to Sencha Touch: the ability to have "fixed" toolbars).

But now what? How do I update content?

In an ExtJs tutorial (here, near the bottom of the page) it says that one can act on an Element object to load content to an element; but that does not seem to be usable in the same way in the "icons" Sencha Touch demo.

Any help appreciated!

Set listener for store events in a controller

I have a controller with a store, a model, and some views.

I need to listen for the beforesync and write event of the store in the controller, but I don't know how to set these listeners in the controllers control-function.

My store looks like this :

Ext.define('DT.store.UsersStore', {
    extend : 'Ext.data.Store',
    model : 'DT.model.User',
    id : 'myStore'
    autoSync : true,
    proxy : {
        type : 'ajax',
        api : {
            read : '/load_entries',
            update : '/update_entry'
        },
        reader : {
            type : 'json',
            root : 'user',
            successProperty : 'success'
        }
    }
});

Now I try to listen to the events in my controller :

...
init : function () {
    this.control({
        'myStore' : {
            beforesync : this.doSomething,
            write : this.doSomethingElse
        }
    });
},
...

My expected result is that the functions will be executed, when the events are fired. But at this time nothing happens when they are fired.

How can I get this to work?

How do I get a ExtJS 4.1.X Bar Chart with a single bar to show that bar's label properly?

If you try the live code example in the documentation at:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.chart.series.Bar

More than one label looks beautiful:

data: [
    { 'name': 'metric one',  'data':5 },
    { 'name': 'metric two',  'data':27 }
]

However as soon as you reduce the dataset down to one label, the output looks horrible(notice the label for the bar appears half outside the top of the chart area, instead of vertically aligned with the bar it is to label):

Is this a bug in ExtJS? How do I work around this? Exact ExtJS code that produces this output:

var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data'],
    data: [
        { 'name': 'metric one',  'data':5 }
    ]
});

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    animate: true,
    store: store,
    axes: [{
        type: 'Numeric',
        position: 'bottom',
        fields: ['data'],
        label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
        },
        title: 'Sample Values',
        grid: true,
        minimum: 0
    }, {
        type: 'Category',
        position: 'left',
        fields: ['name'],
        title: 'Sample Metrics'
    }],
    series: [{
        type: 'bar',
        axis: 'bottom',
        highlight: true,
        tips: {
          trackMouse: true,
          width: 140,
          height: 28,
          renderer: function(storeItem, item) {
            this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
          }
        },
        label: {
            display: 'insideEnd',
            field: 'data',
            renderer: Ext.util.Format.numberRenderer('0'),
            orientation: 'horizontal',
            color: '#333',
            'text-anchor': 'middle'
        },
        xField: 'name',
        yField: 'data'
    }]
});

What is the need of JSF. When UI can be achieved from css html javascript jQuery?

I was reading about JSF that its a UI framework and provides some UI components. But how is it better or different from number of components that can are available from extjs or jQuery or combination of css and html and js. Why should someone learn JSF.

Better way to call superclass method in ExtJS

All the ExtJS documentation and examples I have read suggest calling superclass methods like this:

MyApp.MyPanel = Ext.extend(Ext.Panel, {
  initComponent: function() {
    // do something MyPanel specific here...
    MyApp.MyPanel.superclass.initComponent.call(this);
  }
});

I have been using this pattern for quite some time and the main problem is, that when you rename your class then you also have to change all the calls to superclass methods. That's quite inconvenient, often I will forget and then I have to track down strange errors.

But reading the source of Ext.extend() I discovered, that instead I could use the superclass() or super() methods that Ext.extend() adds to the prototype:

MyApp.MyPanel = Ext.extend(Ext.Panel, {
  initComponent: function() {
    // do something MyPanel specific here...
    this.superclass().initComponent.call(this);
  }
});

In this code renaming MyPanel to something else is simple - I just have to change the one line.

But I have doubts...

• I haven't seen this documented anywhere and the old wisdom says, I shouldn't rely on undocumented behaviour.

• I didn't found a single use of these superclass() and supr() methods in ExtJS source code. Why create them when you aren't going to use them?

• Maybe these methods were used in some older version of ExtJS but are deprecated now? But it seems such a useful feature, why would you deprecate it?

So, should I use these methods or not?

Word-wrap grid cells in Ext JS

(This is not a question per se, I'm documenting a solution I found using Ext JS 3.1.0. But, feel free to answer if you know of a better solution!)

The Column config for an Ext JS Grid object does not have a native way to allow word-wrapped text, but there is a css property to override the inline CSS of the TD elements created by the grid.

Unfortunately, the TD elements contain a DIV element wrapping the content, and that DIV is set to white-space:nowrap by Ext JS's stylesheet, so overriding the TD CSS does no good.

I added the following to my main CSS file, a simple fix that appears to not break any grid functionality, but allows any white-space setting I apply to the TD to pass through to the DIV.

.x-grid3-cell {
    /* TD is defaulted to word-wrap. Turn it off so
       it can be turned on for specific columns. */
    white-space:nowrap;
    }

.x-grid3-cell-inner {
    /* Inherit DIV's white-space from TD parent, since
       DIV's inline style is not accessible in the column
       definition. */
    white-space:inherit;
    }

YMMV, but it works for me, wanted to get it out there as a solution since I couldn't find a working solution by searching the Interwebs.

Empty message in gridPanel

I'm using Extjs gridPanel to display data. I want to show "No data..." message in gridPanel when no data available. How to do this ?.

I tried emptyText property but its not worked.

I think emptyText is for gridView not for gridPanel.

Please help me how to show empty data message in gridPanel.(I'm using gridPanel not grid View)

ExtJS 4: Models with Associations and Stores

Introduction

I'm facing an application design problem with the Ext.data.Model class in ExtJS. I will try to develop my ideas to a very common online store scenario here, so you can follow me. I would really appreciate any comments on my thoughts and conclusions!

Models

Let's suppose you want to map the fact that "Every customer can order multiple products" to ExtJS. From the bare words one can identify these three models involved: Customer, Order, and Product. The Order in this case is what connects Customers and Products.

Associations

I found that ExtJS actually allows you to specify this (Customer)1-n(Order)1-n(Product) relation using the Ext.data.HasManyAssociation and Ext.data.BelongsToAssociation classes. But is this what one wants? Would you want to that a Product always belongs to an Order? What if you want to have a list of Products without any connection to Orders whatsoever?

Stores

This is where it get's more ExtJS specific. In ExtJS you have Ext.data.Stores to hold all your data. To me a natural way to organize my data is to have an Ext.data.Store for each of my models:

1. CustomerStore
2. OrderStore
3. ProductStore

Consider having a three Ext.grid.Panels side-by-side; one for each store. When selecting a customer in the one grid, his orders automatically show up in the second grid. When selecting an order in the second grid the associated products appear in the third grid.

Does this sound natural to you? If not, please comment!

Bringing it all together

So now we have three things that we need to bring together:

1. Models and their
2. Associations (hasMany, belongsTo) and the
3. Data (Stores)

Is it possible to define an association only from one side of a Model-Model relation? For instance, can I specify that an Order hasMany Products but leave out that a Product belongsTo an Order? Because a Product can actually belong to more than one Order. Therefore I specify that the Product model hasMany Orders below.

Here are the models in ExtJS:

Customer

Ext.define('Customer', {
    extend   : 'Ext.data.Model',
    requires : [
        'Order',
    ],
    fields   : [
           {name : 'id',          type : 'int'},
           {name : 'lastname',    type : 'string'}
           {name : 'firstname',   type : 'string'}
    ],
    hasMany: 'Order' /* Generates a orders() method on every Customer instance */
});

Order

Ext.define('Order', {
    extend   : 'Ext.data.Model',
    fields   : [
            {name : 'id',          type : 'int'},
            {name : 'customer_id', type : 'int'}, /* refers to the customer that this order belongs to*/
            {name : 'date',        type : 'date'}
    ],
    belongsTo: 'Customer', /* Generates a getCustomer method on every Order instance */
    hasMany: 'Product' /* Generates a products() method on every Order instance */
});

Product

Ext.define('Product', {
    extend   : 'Ext.data.Model',
    fields   : [
            {name : 'id',          type : 'int'},
            {name : 'name',        type : 'string'},
            {name : 'description', type : 'string'},
            {name : 'price',       type : 'float'}
    ],
    /*
        I don't specify the relation to the "Order" model here
        because it simply doesn't belong here.

        Will it still work?
    */
    hasMany: 'Order'
});

And here are the stores:

CustomerStore

Ext.define('CustomerStore', {
    extend      : 'Ext.data.Store',
    storeId     : 'CustomerStore',
    model       : 'Customer',
    proxy   : {
        type   : 'ajax',
        url    : 'data/customers.json',
        reader : {
            type           : 'json',
            root           : 'items',
            totalProperty  : 'total'
        }
    }
});

OrderStore

Ext.define('OrderStore', {
    extend      : 'Ext.data.Store',
    storeId     : 'OrderStore',
    model       : 'Order',
    proxy   : {
        type   : 'ajax',
        url    : 'data/orders.json',
        reader : {
            type           : 'json',
            root           : 'items',
            totalProperty  : 'total'
        }
    }
});

ProductStore

Ext.define('ProductStore', {
    extend      : 'Ext.data.Store',
    storeId     : 'ProductStore',
    model       : 'Product',
    proxy   : {
        type   : 'ajax',
        url    : 'data/products.json',
        reader : {
            type           : 'json',
            root           : 'items',
            totalProperty  : 'total'
        }
    }
});

Here is an example (not by me) with companies and their products http://superdit.com/2011/05/23/extjs-load-grid-from-another-grid/ . It uses two Models and two stores but there are no associations define.

Thank you in advance

-Konrad

Telerik KendoUI vs Sencha ExtJS? [closed]

We are going to build a enterprise grade application on Web and for that we have filtered down our choices to ExtJS and KendoUI.

Both are decent and have rich features / controls, KendoUI is faster in performance than ExtJS but then ExtJS is like much more complete package which includes every component required to build desktop like web application and Grid seems more powerful.

on other hand with KendoUI we have power of jQuery and feel like home familiarity and almost zero learning curve because team already uses jQuery.

Does anyone have experience building large enterprise class application using either of them? and if yes what is your experience? Please share be it bad or good so that I can have some ground before I end up going with anyone of them for long time.

I am leaned towards ExtJS more because we are going to use a scheduler control which is from CubeDrive (myCalendar) which is again in ExtJS.

So your thoughts and experiences are welcome for helping me taking a right decision.