extjs4.2 , ExtJS 4.2.0 gridpanel inside viewport rendering extra column

ExtJS 4.2.0 gridpanel inside viewport rendering extra column


Tag: extjs4.2

I am using ExtJS 4.2.0 and testing on google chrome 42.0.2311.152 m. Here is my fiddle:('ct' is nothing but just a div)


    Ext.define('SimpleGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.SimpleGrid',
    columns: [
            dataIndex: 'name'
        }, {

            dataIndex: 'status'

        }, {

            dataIndex: 'enabled'

    store: {
        fields: ['sex', 'name', 'status', 'enabled'],

        data: [
            { sex: 'male', name: 'Tom', status: 'Available', enabled: true }

Ext.create('Ext.container.Viewport', {
            layout: {
                type: 'vbox',
                align: 'stretch'
            items: [

                    xtype: 'SimpleGrid'



I have already posted this as a bug in the sencha forum but would be great if someone could provide a workaround for this scenario if at all it is a bug. Not sure of the align:'stretch' has anything to do with it but there should be no reason to render the extra column. Any help appreciated. Thanks.


It is not a column, it is just empty space left after rendering three columns. Add flex:1 to one of the columns to fill the width.


how to add click event to inner element of Xtemplate extjs 4.2?

I want to add click event to inner element of Xtemplate, below is my code. Thanks in advance. var ruleTemplate = new Ext.XTemplate( '<tpl for=".">', '<div class="rule-item" id={key}>', '{key}', '<tpl if="value == \'true\'">', '<i class="add">&nbsp;</i>', '<tpl else>', '<i class="group">&nbsp;</i>', '</tpl>', '</div>', '</tpl>' ); var ruleView = Ext.create('Ext.view.View', { store: rulesStore,...

Extj 4 controller this.control listeners debounce?

How can I debounce listeners specified inside of controller using this.control ?...

Regular Expression for prompt of Ext.MessageBox

i prompt the user to fill the combination of alphabets and number. Here is the code: Ext.Msg.show({ title : 'you can enter alphabets and number', msg : 'Your value', buttons: Ext.Msg.OKCANCEL, scope : this, prompt:true }); Although it prompt to fill the value, but in that field i want to...

form.submit not working while file upload in ExtJS

I am using ExtJS 4.2.0 for uploading file functionality. But when i try to upload using form.submit(), it gives me an ExtJS error and the service is not called. Below is the code for the form panel: Ext.define('modelname.view.AttachDocumentPanel', { extend: 'Ext.form.Panel', alias: 'widget.attachdocumentpanel', id: 'attachdocumentpanel', itemId: 'attachdocumentpanel', name: 'attachdocumentpanel', height:25,...

Extjs 4.2.2 - Default sorter logic runs instead of custom sorter

On ExtJs 4.2.2 I need to override default sorter of some column and make it sort by the absolute values (Math.abs). When I debug it I get into doSort() and get the right store & direction (asc, desc), but for some reason it doesn't execute rthe sorterFn() - and run...

Extjs: drag n drop tree node and its children to a grid

How can I drag and drop a node(parent) and all its children without selecting them, when the parent node is selected and dragged in the tree? Sample code which I have tried...

How to test crud ajax requests in Sencha Fiddle

I would like to use a Sencha Fiddle to test create and update events. I want to investigate, how configuration of the Proxy and format of the response must work together to get successful crud operations. I thought of creating a Sencha Fiddle and read/write the data to an external...

Back-end updates with changes made via inline editing on ExtJS Summary Grid?

While I am trying to track changes made via inline editing on ExtJS Grid (with SummaryGrouping), I want to know what is the best way to update the back-end which is domino database record. Obviously I dont want to update on each and every edit but to see if there...

How to migrate a non sencha cmd application to build using sencha cmd (ExtJS 4.2)

I have an extjs 4.2 application which was built by hand coding controllers, views, stores and models. I was looking for a step by step approach to migrate to sencha cmd and could not find one. The reasons for moving to sencha cmd are packaging benefits (1 app.js to load...

How do I know at runtime what event listeners are registered to a component in ExtJS?

I'm trying to debug an issue I have with an event being fired two times. I'm just curious and want to know if there is any way I could know how many event listeners are registered to a component at runtime. Say for example I have a button, and using...

Extjs : get modified records after store reconfigure

I reconfigure my store and add new fields to it and then load its corresponding grid. I need to edit grid cells and save the whole modified grid rows in one step at the end. The problem is that when I call this code, I get all rows in the...

How to change url of Ext.window.Window in ExtJs

I am creating model dialog using ExtJS. Below is the Code for it, var win; Ext.application({ name : 'Fiddle', launch : function() { var button = Ext.get('copy_button'); button.on('click', function(){ win = Ext.create('Ext.window.Window', { title: 'Copy Existing', height: 400, width: 500, layout: 'fit', modal: true, loader: { url: '<%= request.getContextPath() %>/demo/copy.action',...

ExtJs dropdown list with two color rows

I have ExtJs combo drop down list. I want to two-color(odd as red and even as green)row list when combo is span Note: single row has multi(more than one line) lines Is this possible with ExtJS 4.2? if yes how can i do that. { xtype: 'combobox', id: 'mycbo', itemId:...

how to make simple paging extjs4

Good day everyone, I'm new user to Extjs 4. Right now, I have a problem in creating a simple paging (a test run just to familiarized on this). Please take a look at the example below. //creating a store data first var itemsPerPage = 2; var productivity = Ext.create('Ext.data.Store',{ fields...

ExtJS 4.2.0 gridpanel inside viewport rendering extra column

I am using ExtJS 4.2.0 and testing on google chrome 42.0.2311.152 m. Here is my fiddle:('ct' is nothing but just a div) http://jsfiddle.net/5zpx4556/ Ext.define('SimpleGrid', { extend: 'Ext.grid.Panel', alias: 'widget.SimpleGrid', columns: [ { dataIndex: 'name' }, { dataIndex: 'status' }, { dataIndex: 'enabled' } ], store: { fields: ['sex', 'name', 'status',...

ExtJs Load diferent data from one store to multiple selects

I have 1 store wich serves me the values from a UD field wich are the options for the comboxes. Ext.define('freetextOrder.model.comboBoxValues', { extend: 'Ext.data.Model', fields: [ {name: 'name', type: 'string'}, {name: 'unit', type: 'string'} {name: 'comboxid', type: 'int'} ] }); now i have to load foreach comboxid an xtype: 'combobox'...

How to find nth child nodes in ExtJS 4.1 tree panel

Please check the following fiddle. I have a node named Grand Parent, this node has two child: Child Node & Child Two. When user clicks on Grand Parent node, I want to go down till the last node in the hierarchy and update one of the property in each node....

how to add tooltip to widget in extjs?

I have a dynamic form in extjs and i want to add tooltip to some elements of the form. widget = { width: 100, title: name, margin: '0 0 0 0', id: id } that my widget that i want to add tooltip. I have already tried adding listener to...

How to best handle multiple related templates in Ext JS?

I am trying to make a panel to display some data I get from an API. I have decided that XTemplates are probably the best way of handling this. However, I would like the panel to be well organized and flexible like other ext.js elements. So what I came up...

Pass data between views in ExtJS

I am reading data from store and populating main girdView. When any of the row is clicked, a windows appear and I want to fill the fieldset in that window with the same record which is clicked. Can anyone tell me how to do it? My popup window is like:...

How to create a single running text using extjs4.2?

How to create running text like a marquee non standard HTML element in Extjs4.2 ? This is my snippet code that I've done so far : Ext.Loader.setConfig({ enabled: true, paths: { Ext: '.' } }); Ext.require([ 'Ext.form.*', 'Ext.XTemplate']); Ext.onReady(function () { //Ext.Msg.alert('Fiddle', Ext.get('info').dom.innerHTML); Ext.define('v_label', { extend: 'Ext.form.Label', xtype: 'runningText', renderTo:...

Are there method to get all enabled buttons from pagingtoolbar?

My greetings ! I am trying to focus on first pagingtoolbar`s button by hot key. For example, when it will be pushed combination CTRL + -->, the focus will be on first enabled button of pagingtoolbar. At this time I can get fisrt disabled button: Ext.ComponentQuery.query('pagingtoolbar button{isDisabled()}')[0] But I need...

How to make a CSS-based Extjs layout for containers?

Basically, what I need is a container that just renders its items as inline divs - e.g.: Ext.widget({ xtype: 'container', cls: 'my-container', defaultType: 'component', items: [ { autoEl: { html: 'One' } }, { autoEl: { html: 'Two' } }, { autoEl: { html: 'Three' } } ] }) Should...

Row column selected extjs

I need to provide a specific css for a column in a extjs grid. I define this renderer function: render_alarm_color: function (value, metadata, record, rowIndex, colIndex, store){ metadata.css = 'alarm-'+record.data.alarm; return value; } The css rule that are associated to that column is for example: .alarm-0 {color:#FFFFFF; background:#FF3D4A !important;} .alarm-1...

How to use plugins in Extjs

I am finding it very difficult to use 'Ext.ux.TabReorderer' as a plugin in tab panel Ext.define("practical.view.Board",{ extend: 'Ext.tab.Panel', alias: 'widget.board', plugins: ['Ext.ux.TabReorderer'], items:[{ title: 'Tab 1' },{ title: 'Tab 2' }] }); This was throwing an console error saying: Cannot read property 'init' of null Upon further investigation found that...