extjs,extjs4.2,sencha-cmd , Pass data between views in ExtJS

Pass data between views in ExtJS


Tag: 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:

    extend: 'Ext.window.Window',

    height: 500,
    width: 1500,
    minWidth :1500,
    maxWidth :1500,
    layout: 'fit',
    controller: 'PopUpWindowController',

    initComponent: function () {

        var me = this;

        var Store = Ext.getStore('mainStore');

        Ext.applyIf(me, {
         /*   items: [{
                xtype: 'form',
                bodyPadding: 10,
                region: 'center'

        items: [
        xtype: 'panel',
        title : 'Projektierung',
        bodyStyle : 'padding:5px',
        width : 1880,
        autoHeight : true,
                xtype  : 'kopfdatenView', // Have to populate this view

and in Main view I am calling it as:

{ region: 'center', xtype: 'gridpanel',

            listeners : {
                itemdblclick: function(dv, record, item, index, e) {

                    var extra = record.data;
                    win = Ext.create('App.view.PopUpWindow');


                    win.on('show', function(win) {



             columns: [
            store: 'mainStore', 
            height: 100,
            width: 400,


I want to populate fieldset in kopfdatenView. Kindly help


You directly pass your record to your window on creation :

win = Ext.create('App.view.PopUpWindow', {
    myRecord: record

And then inside the window's initComponent function (before the callParent) :

this.title = this.myRecord.get('ID');


Angular does not recognize the dynamically loaded page in Extjs

I have a SPA in Extjs system. I have also included angular and the necessary modules which i want to use on a page (external html referred in a panel of extjs). Angular is defined in and working everywhere except in newly loaded page.The problem is that i have to...

RowExpander for duplicate records in Extjs

I have a grid in Extjs and I want to add rowExpander on a condition, The condition is: If there is more than one record with same ID in store, then only one record will be visible in grid, but a rowExpander(plus icon) will be added with the record, And...

Save ajax response to file

Let's assume I have following button code: Ext.create('widget.button', { handler: function () { Ext.Ajax.request({ method: 'POST', url: 'index.php?r=store/exportXLS', params: { queryName: me.exporting.name, queryGroups: Ext.JSON.encode(me.exporting.groups) }, success: function (response) { //??? } }); }, dock: 'top', text: 'Экспорт в XLS' }); Because groups variable hold too much parameters, I must send...

Not able to click ExtJS Dropdown button and select list elements - Selenium Webdriver Java

I am having difficulty in clicking a drop down and selecting option from the list. Below screenshot of the application. Our application uses heavy ExtJS and below is the HTML code for dropdown button and textbox. <div id="combobox-1115-bodyEl" class="x-form-item-body x-form-trigger-wrap-focus" role="presentation" style="width: 325px;"> <div id="ext-gen1273" class="x-hide-display x-form-data-hidden" role="presentation"></div> <input id="ext-gen1272"...

ExtJs 5.1 - Ext.Panel with XML-Highlighting, editing, linenumbering capabilities

Basically I am i need of an Ext.Panel which contains an XML-Editor together with syntax-highlighting, line numbers and editing. I have searched through the web and found the Javascript API CodeMirror. I have implemented something, but the alignment of the CodeMirror-object-Textfield does not adjust itself to the Top/left of the...

Ext JS 5 Data Binding Combobox

I have an Ext JS 5.0.1 application that I am working on. I have a simple window with a grid and a form. I have the grid bound to my store and when a row is selected, all the textfields in the form bind, but I also have a combobox...

Ext.Ajax.request variables

I want to access to some variable(datoslicitproduct) that I declared out ot an Ext.Ajax.request, but I initialize it inside the request. I have this function : function ExportarExcelproddet(){ var datoslicitaciones = []; var datoslicitproduct=[]; var datafinal; var fila=[]; var fila2=[]; var Tipo; var IdPliego; ExpGridstore.each(function(r){ fila.push(r.data['Tipo']); fila.push(r.data['IdTxt']); fila.push(r.data['Id_Exp']); fila.push(r.data['Exp']); fila.push(r.data['Org']);...

ExtJS Direct--pass scope to method

I'm using the ExtJS Direct proxy and need to know how to pass scope when calling a method. Currently im doing this myapp.direct.action.mygridservice.getGridData("123",this.getSearchCbo().getValue(), function(p_,resp_){ //do something }, this); on the java method I added a third param for scope with type String but i still get an error that "this"...

How could I dynamically choose a div class with an if-else statement?

I use Ext.XTemplate to show my data in a list and I want to realize a function that when I get a positive number, it show as red and green when negative. To realize this function, I create two style and I want to pass parameters to dynamically create template...

using local storage saved value as a text in a root text

I have a treeView in my extjs View, in which I need to give the the value of a local storage variable as the root name.The value to the local storage is fed when user logins successfully : Ext.define('Eits.view.OrgTreeView', { extend : 'Ext.tree.TreePanel', requires: ['Eits.model.OrgTreeModel'], width : '100%', region :...

Uncaught TypeError: binding.destroy is not a function in ExtJs 5

I am using Ext.util.StoreHolder mixin in my extjs 5.1 view.I found problem with Ext.destroy() method which throws error while destroying view having bindable mixin Ext.util.StoreHolder. I can not destroy that view, it giving me error Uncaught TypeError: binding.destroy is not a function at Ext.define.privates.removeBindings My view is using mixin: mixins:...

Loading delay extjs

I have a panel within which I have two more panels. When you click on panel1 then information in panel2 is loaded. Since the information is quite huge there is some delay when its being loaded. During this interim period I wish to add a loading mask which intimates the...

How to catch Delete key event in tree panel controller

I have a tree panel view (defined as FilesEditorNavigTree) and a controller. In a controller I want to catch Delete key event in order to perform some procedure. I tried to do it like this: ... init:function(){ this.control({ 'FilesEditorNavigTree':{ specialkey:function(a, b){ alert(b.keyCode); // just for testing reasons } But it...

How to using variable when define not using initComponent ExtJs

I have a question when defining 1 panel. Ex1: Ext.define('AppTest.view.AppMain', { extend: 'Ext.panel.Panel', xFile: "File", // Init initComponent: function () { Ext.apply(this, { items: [ { xtype: 'button', action: 'file', text: this.xFile // Using variable here } ] }); this.callParent(); } }); Ex2: Ext.define('AppTest.view.AppMain', { extend: 'Ext.panel.Panel', xFile: "File", items:...

Ext.device.filesystem.FileEntry.read() - type: “text” returns blank file

I am facing a problem with Ext.device.filesystem.FileEntry.read() method. When I try to read the text/JSON file as text, I get a blank file. Any idea? Looks like readastext method of extjs file reader is buggy. Following does not work: var fileEntry = new Ext.device.filesystem.FileEntry(newFilePath, fileSystem); fileEntry.read({ //type: "binaryString", encoding: 'UTF8',...

Sencha architect, I have a form and how to config its `reader`?

Sencha architect, I have a form and I want to config its reader like this, Ext.create('Ext.data.JsonReader', { root : "rows", model : 'city' }) In Sencha architect, it will be add a pair of single quote mark. So how to config reader of the form?...

ExtJS Find the id of an element

I have an app with the MVC model, in the view I create a slider with the listeners, but I want that the listeners are in the controller class, and I want to get the id of the element, but it is generated by a variable from a tree panel.......

execute function using Ext.Loader.setConfig with ExtJS

Im trying to create a path with ExtJS using Ext.Loader.setConfig, im following the example from Api Docs but every time i try to execute the method holaMundo not works and not show any error. This is the code of NombreClase.js in js/pruebapath/miprueba/ Ext.define('js.pruebapath.miprueba.NombreClase', { constructor : function () { return...

ExtJS 5 html in combo inputfield

I have a combobox with html values. Selected value in inputfield displaying with html tags: Fiddle here How to display value without html tags? Thanks....

ExtJS5 Store filter “Uncaught TypeError: Cannot read property 'get' of undefined”

I'm using the gpl version of extjs5.1.1 without sencha cmd. In my application a Grid displays correctly a Store. In the window, there is a checkbox wich code is : { xtype : 'checkbox', itemId : 'employeeFilter', value : false, boxLabel : 'Show inaktiv users', margin : '0 5 0...

Ext JS Dashboard Layout and maximize/minimize panels

I'm attaching a picture with the mock up that I'm trying to develop with Ext JS. I'm using a Border layout, and then a Dashboard for the central part, however I see some limitations on it: Panels in the dashboard don't have minimize or maximize button. How can I implement...

How to display nested objects in a GridPanel in ExtJS (and Sencha architect)?

I've got an incoming array of Offering objects that looks like this: [{ "id" : 16, "price" : 500, "quantity" : 2000, "denomination" : "case", "denominationPlural" : "cases", "product" : { "id" : 14, "description" : "This is the text description for product 14." } }, { "id" : 18,...

ToolTip in bryntum scheduler

I am new to Extjs. I am using bryntum scheduler in my application. In that I want to show tooltip over scheduled item. I checked with bryntum api and found that I can use tooltipTpl to show tooltip and tipCfg to configure it. I added eventmouseenter listener and in respective...

Extjs create form items with json store

I have created a form panel view and I will create some form items iside this panel. The communication to the store, controller and model works fine but how can I create the items in the view? Json array (retrieved from external service): { "data": [ { "name": "ff", "xtype":...

Setting multiple events in one ext.net button

I have a form with some grids and fields. When I click on submit button, I need to send all information do database. After that, I need to redirect to other page. Actually, my code appears as so, but the redirect event is not firing. <ext:Button runat="server" Text="Finalizar" Width="150" ID="Button1"...

Extjs Cellediting onclick of a button

I have activate button on each row of grid so users can activate only the row they want to edit and the button changes to deactivate.how can I save status of the buttons for next time I reopen the panel? below is my code and also: https://fiddle.sencha.com/#fiddle/ofp Ext.application({ name :...

calling the parent controller function in Ext.Ajax.request

I have a login Page which authenticates the user.On correct username and password it should hide the loginview and display the next view.When I call the function to do the same it gives an error saying "Uncaught TypeError: this.functionname is not a function.Here is my code for the same: startMain...

Extjs adding a listener to tree panel returns Uncaught TypeError: Cannot read property 'scope' of undefined

I am trying to add a selection change listener on a tree panel but i get the following error: Uncaught TypeError: Cannot read property 'scope' of undefined code follows: xxx.view.trees.MainTree.js extend: 'Ext.tree.Panel', requires: [ 'xxx.store.TreeStore' ], xtype: 'main-tree', height: 400, width: 350, title: 'Tree', useArrows: true, initComponent: function() { Ext.apply(this,...

Extjs building form on metadata

I will build a FormPanel with ExtJs 4 configured by metadata received from server. The meta data (json array) looks like this: { "metaData": { [ { "allowBlank:": false, "fieldLabel:": "labelText1", "name:": "labelName1", "emptyText:": "null" }, { "allowBlank:": false, "fieldLabel:": "labelText1", "name:": "labelName1", "emptyText:": "null" } ] }, "success": true,...

ExtJS grid emptyText not visible in panel with vbox layout

I'm using Ext JS 5.1.0. If I create a grid in a vbox layout with no records, the emptyText is rendered in the DOM, but the height of the grid is calculated incorrectly and the text is not visible. Is there a way to get it to automatically grow without...

Want to prevent user from entering any space in textfield by providing error when he does

I have a textfield in Extjs. This textfield can only contain Digits 0 - 9 Alphabets a-z or A-Z Characters like _ (underscore) and - (hyphen) I want to prevent the user from entering anything apart from these characters. As such I wish to display an error, something like a...

How to apply style for Ext js xtype tabpanel using style property?

I want to change style for Ext.tab.Panle element by writing inline css structure as like the following xtype : button element { xtype: "button", itemId: "imageUploadButton1", text: "Uploader", style: { background : '#C81820' } } I want to change the style of tab-panel's header by writing css like this in...

Extjs Progressbar in span/div is not correct

I want to render component progress-bar in my span and insert it in text/tooltip/cell etc. Then I render progressbar in body: Ext.create("Ext.ProgressBar", { renderTo: Ext.getBody(), value: chartCase.key / 100, width: 100 }); Style for "x-progress-text" taking the width of component (100px in this case), so it is center-justified. Then I...

ExtJS - row renderer - if cell has certain value, highlight entire row

If the column cell value is > 5000, I want to highlight that entire row. Right now I am only able to highlight that cell. Grid column renderer: renderer:function(val_, meta_, rec_) { if(val_> 5000) { meta_.style = "background-color:red;"; } } ...

CSS Button disabled state?

I am new on CSS, How should I define my CSS class for catch button's disabled state? There is my CSS class but it didn't work. .mbutton:disabled{ background: transparent; } EDIT There is JSfiddle example, http://jsfiddle.net/sefiktemel/v7h9gczu/...

Showing context menu in controller

I have two views - one for tree panel and one for context menu (defined as FilesEditor.view.FilesEditorContextMenu). And I have a controller, in which it listens to itemcontextmenu event. I do not know how should I create (where and at what stage?) and how to show my FilesEditorContextMenu. The part...

How can addCls to Button with ViewModel binding in ExtJS5

I want to change css class after binding. Is it possible in ExtJS5? I added to comments. fiddle: https://fiddle.sencha.com/#fiddle/olc...

change button text color in ExtJS

I need to change text color of my button. I defined a css class like; .mbutton{ background:transparent; color:red; border:none; } and button definition is here; Ext.create('Ext.Button', { renderTo: Ext.getBody(), text: 'Red text', cls:'mbutton' }); fiddle: https://fiddle.sencha.com/#fiddle/olj...

what is “root:'data' ” extjs store config

I am very new to ExtJs and I have the following code for a treeView,,which has a default root in the beginning and then an Ajax call to a servlet .But i don't understand the 'root' field with value 'data' .Is data an alias or xType .Here is the code:...

Filtering Array within a store record

I have a JSON object in a store that looks like the below. I am dynamically filtering values based on selections in a property grid. I am not filtering on the top level values (personName, primaryRole etc) but instead I want to drill down into the array of periods I...

Using ExtJs Grid on existing HTML page

I need to create a grid on my HTML page. I am able to do that but the whole process made me to include the complete Ext sdk folder in my solution which made my application size considerable. I do not want to make use of everything nor does my...

ExtJS: What are the only required files for grid?

I have a .net application in which I have used ExtJS grid on only one page. I have included the complete EXT folder in my application that has increased the application size to a considerable amount. I am populating the grid in Ext.onready function and currently the requirement of ExtJS...

button click issue in Ext js

i have small query i created four text fields and one button,in text fields i gave property allowblank:true if user enter shows error message,it's working perfect.If the click the button the inserted perfect,after that the textboxes becomes empty it's showing blank errormessage.If iam using Allowblank:false it's working fine.but i require...

Extjs xml reader not working

I have the following XML Configuration... <?xml version="1.0" encoding="UTF-8"?> <Schema xmlns="http://schemas.microsoft.com/ado/2008/09/edm" Namespace="IncidentMgt"> <EntityType Name="in"> <Property Name="persistent_id" Type="Edm.String" Nullable="true" MaxLength="30"/> <Property Name="active_f" Type="Edm.Int32" Nullable="true"/> <Property Name="add_property_persids" Type="Edm.String" Nullable="true"/> <Property Name="add_workflow_persids" Type="Edm.String" Nullable="true"/>...

ExtJS Remove item of a store

In a extjs app I have a tree panel that reads an json file, in the tree panel i have a check box that execute an action, additionally I save the checked element in a grid panel of a tab panel... I want to remove any element of the store...

Unable to listen to load event in the controller

I scanned many threads here at stackoverflow (this and this), but none of them helps me to solve my problem. So, I have a store which is defined like this: Ext.define('fileseditor.store.fileseditorNavigStore',{ extend:'Ext.data.TreeStore', ... I've heard about getters and tried to do this in my controller: init: function(){ this.getfileseditorNavigStoreStore().addListener('load', this.finishedLoading, this);...

How to achieve the following in extjs

--Title------------------------------- | | | | | <Content> | | | |_____________________________________| How to achieve the above panel in extjs? Edit: It should look something like this: http://oi57.tinypic.com/eiw49.jpg...

Sencha/Extjs rest call with all parameters

I'm using ExtJs 5.1.1 and I've written a simple view with a grid, and selecting one row the corresponding model property are editable in some text fields. When editing is completed the button 'save' call Model.save() method, which use the rest proxy configured to write the changes on the server....

extjs Possibility of using grid widgets in custom elements

Is it possible to use these widgets http://dev.sencha.com/ext/5.1.0/examples/kitchensink/#widget-grid in costum elements div/span, not in a panel? I know only about Progressbar: Ext.create("Ext.ProgressBar", { renderTo: costumSpan[0], value: .5 }); What about others?...

Override Sencha Touch class

I am working in a Sencha Touch application and I have the next doubt/issue with this code. Ext.each(records, function(record){ newItem = Ext.create('Ext.Panel', { material: record.get('material'), cls: 'setitems-item', tpl: '<div class="setitems-item-material">{material}</div>' + '<div class="setitems-item-atpstatus {atpstatus}">{cquantity}</div>' + '<div class="setitems-item-cdd">{[Cicero.Helper.formatSAPdate2Str(values.cdd)]}</div>' + '<div...