<![CDATA[Sencha Forum - Ext: Q&A]]> http://www.sencha.com/forum/ Get helpful answers from community members using Ext JS. en Sun, 19 May 2013 06:57:59 GMT vBulletin 60 http://www.sencha.com/forum/images/misc/rss.png <![CDATA[Sencha Forum - Ext: Q&A]]> http://www.sencha.com/forum/ A Grid Date field issue http://www.sencha.com/forum/showthread.php?263981-A-Grid-Date-field-issue&goto=newpost Sat, 18 May 2013 23:00:38 GMT I am having trouble with a date field being displayed in a grid. I am using php to do the query and return my data in json format. The database is... I am having trouble with a date field being displayed in a grid. I am using php to do the query and return my data in json format. The database is SQL Server. The date is coming back in the json file as:
"TERMDATE":{"date":"2013-02-13 00:00:00","timezone_type":3,"timezone":"America\/New_York"}

this is just the date field, there are other fields in the row and they all display properly.
I just want to display the date, should I be doing something in my php file or is there a way to pull the date out of what is being sent. The date field displays as [object Object] when the grid is refreshed. ]]> rmolds http://www.sencha.com/forum/showthread.php?263981-A-Grid-Date-field-issue How to Close viewport http://www.sencha.com/forum/showthread.php?263980-How-to-Close-viewport&goto=newpost Sat, 18 May 2013 19:32:45 GMT I have a login(window) screen and menu which is viewport in my application. In my menu, I have LogOff button. On click of the button I wanted to... I have a login(window) screen and menu which is viewport in my application. In my menu, I have LogOff button. On click of the button I wanted to remove the viewport and display the Login screen.
I am using the below code in the LogOff button click event

button.up('viewport').removeAll();
var l=Ext.create('TestApp.view.Login');
l.show();

The above code while executing calls the "afterlayout" event of the viewport and gives error.

Please help me to close the viewport.
Thanks ]]> chakra1234 http://www.sencha.com/forum/showthread.php?263980-How-to-Close-viewport Window, Form, Tabpanel and Scrollbar - do they work together? http://www.sencha.com/forum/showthread.php?263978-Window-Form-Tabpanel-and-Scrollbar-do-they-work-together&goto=newpost Sat, 18 May 2013 17:31:56 GMT Hello, guys! Please help, if you know how. I have the simplest test case of a window with a form which contains a tabpanel. This is the only... Hello, guys! Please help, if you know how. I have the simplest test case of a window with a form which contains a tabpanel. This is the only structure which made it possible to have a nice scrollbar inside tabpanels. But with this structure I'm unable to submit my form, I just can't get it. Previously, I did it like this Ext.getCmp('myform').getForm() and everything was fine. But now my task is to get a form which may contain multiple tabs with scrollbars - in case, when the content is larger than the size of a window. As I said, now everything works except one thing - I'm unable to send my form. The little code is:
Code:
Ext.create('Ext.window.Window',{
        xtype:'form',
        id:'myform',
        layout:'fit',
        width:500,
        height:150,
        items:[{
            xtype:'tabpanel',
            activeTab:0,
            items:[{
                title:'tab1',
                xtype:'panel',
                layout:'anchor',
                autoScroll:true,
                items: [{
                  xtype:'datefield',
                  fieldLabel:'Label',
                  anchor:'100%',
                  name:'field1'
                },{
                  xtype:'datefield',
                  fieldLabel:'Label',
                  anchor:'100%',
                  name:'field2'
                },{
                  xtype:'datefield',
                  fieldLabel:'Label',
                  anchor:'100%',
                  name:'field3'
                }]
            }]
        }],
        buttons:[{
            text:'OK',
            handler:function(btn){
              var frm=Ext.getCmp('myform').getForm(); // this is not working
              // the error message is - getForm is not a function
            }
        }]
    }).show();
Thank you!

PS. If I create an independent form component and put it inside the window, I lose my scrollbar functionality. Scrollbars just do not show up. ]]> vicvolk87 http://www.sencha.com/forum/showthread.php?263978-Window-Form-Tabpanel-and-Scrollbar-do-they-work-together Combobox Select Default When Using Remote, Paged Store? http://www.sencha.com/forum/showthread.php?263947-Combobox-Select-Default-When-Using-Remote-Paged-Store&goto=newpost Fri, 17 May 2013 22:10:29 GMT I am attempting to use a combobox in a form. The store that the combobox is bound to could potentially hold thousands of records. Therefore, I want... I am attempting to use a combobox in a form. The store that the combobox is bound to could potentially hold thousands of records. Therefore, I want to use the paging and remote features of the combobox. I have this working and it works beautifully.

The problem comes when I need to set a default value on the combobox (when the user needs to edit a model instead of add). I have the pageSize set to 50. Using setValue() works fine IF the record I am selecting is on the first page of the store. But, I am running into issues if the model is on other pages. setValue() won't work because it only searches what is currently loaded in the store (and any records past 50 are not loaded).

I have been searching for a way to perform this action all afternoon and finally decided it was time to post after making little to no progress...

Here is a jsfiddle of the problem in action: http://jsfiddle.net/mgolus/Z3Jpy/
You can change the id of the vendor by uncommenting/commenting out the two lines at the top ]]> mgolus http://www.sencha.com/forum/showthread.php?263947-Combobox-Select-Default-When-Using-Remote-Paged-Store Store write array under a property name http://www.sencha.com/forum/showthread.php?263941-Store-write-array-under-a-property-name&goto=newpost Fri, 17 May 2013 19:12:37 GMT I have a model like this:


Code:
Ext.define('Policy', {
    extend: 'Ext.data.Model',


    fields: [
        {
            name: 'id',
            type: 'sting',
            phantom: true,
            convert: function(value, record) {
                return record.get('a') + '@' +
                    record.get('b');
            }
        },
        {name: 'a', type: 'string'},
        {name: 'b', type: 'string'}]
});
Where the PK of each record is a and b. The store looks like this:


Code:
Ext.define('Store', {
    extend: 'Ext.data.Store',
    model: 'Policy',
    autoLoad: true,


    proxy: {
        type: 'rest',
        simpleSortMode: true,
        batchActions: true,
        reader: {
            type: 'json',
            root: 'data',
            idProperty: 'id'
        },
        writer: {
            nameProperty: 'mapping'
        },
        api: {
            create:'/batch',
            read: '/policies',
            update: '/batch',
            destroy: '/batch'
        }
    }
});
How can I configure the store so that when it POSTS to /batch when calling store.sync(), the payload looks like this and only consists of dirty records:


Code:
{
    "policies": [{
        "a": "AA",
        "b": "BB",
    }, {
        "a": "AAA",
        "b": "BBB"
    },...]
}
where there is a policies property and under it is an array of dirty policies. ]]> XPEHBAM http://www.sencha.com/forum/showthread.php?263941-Store-write-array-under-a-property-name A little confused about store.addSorted() http://www.sencha.com/forum/showthread.php?263940-A-little-confused-about-store.addSorted()&goto=newpost Fri, 17 May 2013 19:10:33 GMT I have a simple little in-memory store:

Code:
Ext.define('IH.store.HeadachePains', {
            extend : 'Ext.data.Store',
            model : 'IH.model.HeadachePain',
            storeId : 'HeadachePains'
        });
If instantiated it it like so:

store = Ext.StoreMgr.lookup("HeadachePains");

There doesn't appear to be an addSorted() method on it. If I call it I get a no-method error, if I browse the store in the browser console, I don't see it there either. remoteSorting for the factory is false. Am I missing something?

Thanks,


Robert
Brooklyn, USA


]]> rmoskal http://www.sencha.com/forum/showthread.php?263940-A-little-confused-about-store.addSorted() <![CDATA[Can't launch grid view from controller]]> http://www.sencha.com/forum/showthread.php?263934-Can-t-launch-grid-view-from-controller&goto=newpost Fri, 17 May 2013 17:52:13 GMT I need to open a view from my controller, but it is not working when the view is a grid. If I change the view to a Window, it works fine. This is... I need to open a view from my controller, but it is not working when the view is a grid. If I change the view to a Window, it works fine. This is the controller code that should launch the view...

Code:
Ext.widget('reportwindow', {
    title: tab.title
});
Here is the view (a basic grid, taken from one of the examples in the docs...
Code:
Ext.define('RB.view.reportWindow', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.reportwindow',


    title: 'Users',
    store: {
        fields: ['name', 'email'],
        data  : [
            {name: 'Ed',    email: 'ed@sencha.com'},
            {name: 'Tommy', email: 'tommy@sencha.com'}
        ]
    },
    columns: [
        {header: 'Name',  dataIndex: 'name',  flex: 1},
        {header: 'Email', dataIndex: 'email', flex: 1}
    ]
});
So when I run this, I get nothing. No errors in the log at all. However, if I change the view to be a window component with a grid inside, it works fine. Here is the code that works.

Code:
Ext.define('RB.view.reportWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.reportwindow',


    width: '100%',
    height: '100%',
    closable: true,
    minimizable: true,
    autoShow: true,


    initComponent: function() {
        this.callParent();


        var grid = Ext.create('Ext.grid.Panel', {
            title: 'Users',
            store: {
                fields: ['name', 'email'],
                data  : [
                    {name: 'Ed',    email: 'ed@sencha.com'},
                    {name: 'Tommy', email: 'tommy@sencha.com'}
                ]
            },
            columns: [
                {header: 'Name',  dataIndex: 'name',  flex: 1},
                {header: 'Email', dataIndex: 'email', flex: 1}
            ]
        });


        this.add(grid);
    }
});
Does anyone have any idea why this won't work for a grid? ]]> john_dm http://www.sencha.com/forum/showthread.php?263934-Can-t-launch-grid-view-from-controller Combo column grid http://www.sencha.com/forum/showthread.php?263933-Combo-column-grid&goto=newpost Fri, 17 May 2013 17:24:19 GMT Hello to all, I wonder if anyone knows how I can put a combo in the title of a column. The idea is to put an option to hide one or... Hello to all,


I wonder if anyone knows how I can put a combo in the title of a column. The idea is to put an option to hide one or more columns of the grid through this combo. ]]> jose_carlos http://www.sencha.com/forum/showthread.php?263933-Combo-column-grid ISO date format http://www.sencha.com/forum/showthread.php?263925-ISO-date-format&goto=newpost Fri, 17 May 2013 15:08:35 GMT Hi, I have a small problem with date format. I want to convert my date format to ISO format. I am doing like this. var Date =... Hi,

I have a small problem with date format.

I want to convert my date format to ISO format.
I am doing like this.
var Date = Ext.Date.format(new Date(), 'c');

Output: 2013-05-17T20:35:05+05:30

Here I do not want to "+05:30" in date.

So how i will remove this or what format i will set so i will get without "+05:30".

Please help. ]]> pra123@ http://www.sencha.com/forum/showthread.php?263925-ISO-date-format How do I structure my existing project code to use ExtJs4 http://www.sencha.com/forum/showthread.php?263922-How-do-I-structure-my-existing-project-code-to-use-ExtJs4&goto=newpost Fri, 17 May 2013 14:01:02 GMT I am new to ExtJS and I am trying to use the it in my current project which is developed using Java / JSP / Spring /Hibernate. My current project... I am new to ExtJS and I am trying to use the it in my current project which is developed using Java / JSP / Spring /Hibernate.

My current project structure is:

Project
  • Src (all controllers/models/data)
  • Build
  • Web
    • Css (all css files)
    • JS (all js libraries/files)
    • Images (all images)
    • Web-inf (all jsp (views))
I thought of adding it to the JS folder but am not sure how to best use it in the existing structure. Any help will be appreciated.
Thanks,
Parth ]]> ppatel2 http://www.sencha.com/forum/showthread.php?263922-How-do-I-structure-my-existing-project-code-to-use-ExtJs4 Ext.ux.LiveSearchGridPanel data row not align with header grid http://www.sencha.com/forum/showthread.php?263921-Ext.ux.LiveSearchGridPanel-data-row-not-align-with-header-grid&goto=newpost Fri, 17 May 2013 13:57:41 GMT hi,
i have a problem with a Ext.ux.LiveSearchGridPanel.

here my code definition:

Ext.define('PerarHome.view.PanelGridNotification', {
extend: 'Ext.ux.LiveSearchGridPanel',
alias: 'widget.panel-notification',
store: Ext.create('PerarHome.store.Notification'),
columnLines: true,
columns: [
{
text : 'Subject',
sortable : false,
dataIndex: 'subject'
},
{
text : 'Created On',
sortable : true,
dataIndex: 'created_on'
},
{
text : 'Created By',
sortable : true,
dataIndex: 'created_by',
},
{
text : 'Project ID',
sortable : true,
dataIndex: 'project_id',
},
{
text : 'Facility',
sortable : true,
dataIndex: 'facility'
},
{
text : 'User Assigned',
sortable : true,
dataIndex: 'user_assigned'
},
{
text : 'User Assigned Role',
sortable : true,
dataIndex: 'user_assigned_role'
}
],
title: 'Notification',
viewConfig: {
stripeRows: true,
}
});

and atach see result.

data rows are not align with the header table... how can i fix it? thanks~o)


Attachment 43851
Attached Images
]]> il Sergio http://www.sencha.com/forum/showthread.php?263921-Ext.ux.LiveSearchGridPanel-data-row-not-align-with-header-grid Read special JSON into store http://www.sencha.com/forum/showthread.php?263919-Read-special-JSON-into-store&goto=newpost Fri, 17 May 2013 13:34:55 GMT Hi,

I'm totally stuck at a point for a while now. Maybe I'm just too stupid to understand the idea behind the stores. I have following Json string
Code:
{  "1":[0,68,65,75],
  "2":[68,0,9,23],
  "3":[232,343,9,24],
  "4":[33,24,44,543]
 }
And my store looks like this.
Code:
Ext.define('MyStore.Adjacencies', {   
    extend: 'Ext.data.Store',
    storeId: 'ThemeAdjacencies',

    fields: [
            {
                name: 'theme'
            }],
   
    proxy: {
        type: 'ajax',
        url: 'data/Matrix.json',
        reader: {
            type: 'array',
        }
    }
});
But unfortunately this only reads the first line of the json. Is there an option to read the complete data?

Thanks for any hints and helps. ]]> clifficious http://www.sencha.com/forum/showthread.php?263919-Read-special-JSON-into-store Halt execution on displaying a custom window (Ext.window.Window) in ExtJS 4.1 http://www.sencha.com/forum/showthread.php?263900-Halt-execution-on-displaying-a-custom-window-(Ext.window.Window)-in-ExtJS-4.1&goto=newpost Fri, 17 May 2013 09:40:35 GMT I have an issue handling drag & drop events.

I have two grids placed side by side and I am performing drag & drop operation from left grid(Grid A) to the right grid(Grid B). I am using both BeforeDrop and Drop events on Grid B. On drag and drop of data from Grid A to Grid B, I am displaying a custom Window having a combo box in it.
The displaying of the window and selecting values in combo box using Select event is done in the BeforeDrop event and reloading the Grid B's store is done in the Drop event.
The problem is when I drag and drop the data from Grid A to Grid B, the BeforeDrop event is triggered where the window pops up and simultaneously before even selecting the combo box data, the Drop event also gets triggered reloading the Grid B's store in the background.

I want the Drop event to be triggered after I select an item in the combo box. I want the execution to halt once the window pops and then continue execution after I select an item from combo box.

Is there a way to halt the triggering process once the window is displayed just as in case of a javascript alert?

Any Help is much appreciated..

A sample code is shown below:
Code:
Ext.define('MyApp.view.MainPanel', {
extend: 'Ext.panel.Panel',
frame: false,
height: 708,
width: 1150,
layout: {
    type: 'border'
},
title: 'MyApp',
initComponent: function() {
    var me = this;
    var GridADragDrop = Ext.create('Ext.grid.plugin.DragDrop', {
                            ptype: 'gridviewdragdrop',
                            dragGroup: 'GridADDGroup',
                            dropGroup: ''
    });
    var GridBDragDrop = Ext.create('Ext.grid.plugin.DragDrop', {
                            ptype: 'gridviewdragdrop',
                            dragGroup: 'GridADDGroup',
                            dropGroup: 'GridADDGroup'
    });   
    Ext.applyIf(me, {
        items: [
            {
                xtype: 'grid',
                id: 'gridb',
                title: 'Grid B',
                store: 'GridBStore',
                viewConfig: {
                    id: 'Bview',
                    plugins: [GridBDragDrop],
                    /*Both Events have been used for Grid B*/
                    listeners: {
                        beforedrop: {
                            fn: me.onBeforeDrop,
                            scope: me
                        },
                        drop: {
                            fn: me.onDrop,
                            scope: me
                        }
                    }
                },
                columns: [
                    {
                        xtype: 'numbercolumn',
                        dataIndex: 'id',
                        text: 'ID'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'name',
                        text: 'Name'
                    }
                ]
            },
            {
                xtype: 'grid',
                id: 'grida',
                title: 'Grid A',
                store: 'GridAStore',
                viewConfig: {
                    id: 'Aview',
                    plugins: [GridADragDrop]
                },
                columns: [
                    {
                        xtype: 'numbercolumn',
                        dataIndex: 'id',
                        text: 'ID'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'name',
                        text: 'Name'
                    }
                ]
            }
        ]
    });

    me.callParent(arguments);
}, 
onBeforeDrop: function(node, data, overModel, dropPosition, dropFunction, options) {

    console.log("The before drop event is triggered!!");
    // Creating the window
    var window = Ext.create('MyApp.Window');
    // Getting the combo box object from the window object
    var combobox = window.items.items[0];             
    // Adding 'select' listener to the combo box
    combobox.on('select', function(combo, records, options) {
            // I do some stuff here
            //... 
            // Once finished I destroy window
            window.destroy();
    });
    // Display the window on item drop
    window.show();
}, 
onDrop: function(node, data, overModel, dropPosition, options) {

    console.log("The drop event is triggered!!");

    var GridB = Ext.getCmp('gridb'); // Grid B
    var GridBStore = GridB.getStore(); // Grid B store

    //Reload the GridB store once the item has been dropped
    GridBStore.reload();
}

});
My custom window:

Code:
Ext.define('MyApp.Window', {
extend: 'Ext.window.Window',
height: 82,
hidden: false,
id: 'droptaskwindow',
width: 171,
layout: {
    type: 'absolute'
},
title: 'Create Task',
modal: true,
expandOnShow: false,
initComponent: function() {
    var me = this;
    Ext.applyIf(me, {
        items : [ {
            xtype : 'combobox',
            x : 10,
            y : 10,
            id : 'combodroptask',
            width : 130,
            fieldLabel : 'ID',
            labelPad : 1,
            labelWidth : 45,
            allowBlank : false,
            editable : false,
            displayField : 'Name',
        } ]
    });
    me.callParent(arguments);
 }
});

As and when the window pops up, both events get triggered simultaneously and message is displayed in console..

The before drop event is triggered!!
The drop event is triggered!! ]]> Harshrossi http://www.sencha.com/forum/showthread.php?263900-Halt-execution-on-displaying-a-custom-window-(Ext.window.Window)-in-ExtJS-4.1 Is the Architecture Suitable for Building Big Applications? http://www.sencha.com/forum/showthread.php?263899-Is-the-Architecture-Suitable-for-Building-Big-Applications&goto=newpost Fri, 17 May 2013 09:39:28 GMT Hello All,


I'm looking at using ExtJs to build the UI for a system with a menu and several tens of screens (it could even be a hundred).

It's not clear to me if the application object is one screen or the whole system (or other)?


1. If the application object is the whole system (menu, screens and all),

it declares all the different models/views/controllers so they can be loaded/instantiated etc. once when launching the application.

Wouldn't this be a problem if there were 100 screens with a huge number of models/views/controllers?


2. If the application object is only one screen,

there are many models/views/controllers that are not shared between all the different screen

and it pretty much makes the code reuse for the models/views/controllers unusable, no?


Thanks! ]]> alonb http://www.sencha.com/forum/showthread.php?263899-Is-the-Architecture-Suitable-for-Building-Big-Applications Infinite grid with checkbox in header http://www.sencha.com/forum/showthread.php?263887-Infinite-grid-with-checkbox-in-header&goto=newpost Fri, 17 May 2013 04:56:02 GMT Hi, I have seen that ExtJs 4.2 has the infinite grid to bring all the rows in scroll itself. Would that be possible to add checkbox in the grid... Hi, I have seen that ExtJs 4.2 has the infinite grid to bring all the rows in scroll itself. Would that be possible to add checkbox in the grid header to select all the row in the grid. Thanks in advance ]]> arulface http://www.sencha.com/forum/showthread.php?263887-Infinite-grid-with-checkbox-in-header