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


ExtJS 4.2.0 gridpanel inside viewport rendering extra column

Question:

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)

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', 'enabled'],

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

        ]
    }
});
Ext.create('Ext.container.Viewport', {
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
    renderTo:'ct',
            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.


Answer:

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.


Related:


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


extjs,extjs4,extjs4.1,extjs4.2,extjs-mvc
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',...

How to find nth child nodes in ExtJS 4.1 tree panel


extjs,extjs4,extjs4.1,extjs4.2
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 make simple paging extjs4


extjs4.2
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...

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


extjs,extjs4.2,sencha-cmd
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...

ExtJs dropdown list with two color rows


extjs,extjs4.2
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:...

Are there method to get all enabled buttons from pagingtoolbar?


extjs,extjs4.2
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 add tooltip to widget in extjs?


javascript,extjs,extjs4.2
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...

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


extjs,drag-and-drop,extjs4.2,treepanel
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 do I know at runtime what event listeners are registered to a component in ExtJS?


extjs,extjs4.2
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...

Pass data between views in ExtJS


extjs,extjs4.2,sencha-cmd
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:...

Regular Expression for prompt of Ext.MessageBox


extjs,extjs4,extjs4.1,extjs4.2,extjs3
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...

Extjs 4.2.2 - Default sorter logic runs instead of custom sorter


sorting,extjs,datagrid,extjs4.2
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 : get modified records after store reconfigure


extjs,extjs4.2
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 make a CSS-based Extjs layout for containers?


extjs,extjs4.2
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...

ExtJS 4.2.0 gridpanel inside viewport rendering extra column


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) 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',...

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


extjs,extjs4.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?


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

How to best handle multiple related templates in Ext JS?


javascript,extjs,extjs4,extjs4.2
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...

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


javascript,animation,css-animations,extjs4.2,marquee
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:...

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


extjs,extjs4.2,lotus
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...

form.submit not working while file upload in ExtJS


java,javascript,rest,extjs4.2
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,...

How to test crud ajax requests in Sencha Fiddle


extjs,extjs4.2,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...

ExtJs Load diferent data from one store to multiple selects


javascript,extjs,combobox,extjs4.2
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 use plugins in Extjs


extjs4.2
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...

Row column selected extjs


css,extjs,html-table,extjs4.2
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...