Search Results

Search found 427 results on 18 pages for 'extjs'.

Page 3/18 | < Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >

  • Implement two lists in ExtJS

    - by Anandan
    Hi, I am new to ExtJS. I want to implement two tables. First one will have list of possible items to select. Second one can be empty. I will have 4 buttons in between the two tables as "move this item left", "move all to left", "move all to right" and "move this to right". Which component should i use to implement this? Regards, Anandan

    Read the article

  • Rendering ExtJs components without panels?

    - by Tower
    Hi, Take a look at this example: http://www.extjs.com/deploy/dev/examples/multiselect/multiselect-demo.html On it, there are components rendered against a panel. I've been searching for a way to render components without a panel, so that they are laid out against empty background directly, without any window-like panels. Is there a way to accomplish this?

    Read the article

  • How to disable the delete button using if condition in Extjs

    - by sample
    How to disable the delete button using if condition in Extjs for ex;i want to disable the button if it satifies the given if condition else remain enabled. if(validAction(entityHash.get('entity.xyz'),actionHash.get('action.delete'))) This is the grid Delete button code. Ext.reg("gridheaderbar-inActive", Ad.GridInActiveButton,{ xtype: 'tbspacer', width: 5 }); Ad.GridCampDeleteButton = Ext.extend(Ext.Toolbar.Button, { //text: 'Delete', cls: 'ad-img-button', width:61, height:40, iconCls: 'ad-btn-icon', icon: '/webapp/resources/images/btn_del.png', handler:function(){ statusChange(this.parentBar.parentGrid, 'Delete') } });

    Read the article

  • Extjs Tooltips, IFrames and IE => Problems

    - by Chau
    I have an application using OpenLayers, Extjs and GeoExt. My application runs fine, but I need it to be placed inside an IFrame in another page. When doing this, my toolbar becomes responseless in Internet Explorer. The cause is Ext.QuickTips.init();. Comment out this line and everything works fine - except the quick tips ofcourse =) But why is it causing problems? Is it because I'm using it wrong, placing it wrong or just because it doesn't like IE and IFrames? Link: Link to the IFrame page IFrame page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <body> <iframe height="660" src="http://www.gis34.dk/doctype.html" width="660"> <p>Din browser understøtter ikke <i>frames</i>.</p> </iframe> </body> </html> Application page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" language="javascript"> var map; var mapPanel; var mainViewport; var toolbarItems = []; </script> <link href="/Libraries/Ext/resources/css/ext-all.css" type="text/css" rel="stylesheet" /> <link href="/Libraries/GeoExt/resources/css/geoext-all-debug.css" type="text/css" rel="stylesheet" /> <link href="/CSS/Extjs.css" type="text/css" rel="stylesheet" /> <link href="/CSS/OpenLayers.css" type="text/css" rel="stylesheet" /> <link href="/CSS/Poseidon.css" type="text/css" rel="stylesheet" /> </head> <body> <script src="/Libraries/OpenLayers/lib/OpenLayers.js" type="text/javascript"></script> <script src="/Libraries/Ext/adapter/ext/ext-base-debug.js" type="text/javascript"></script> <script src="/Libraries/Ext/ext-all-debug.js" type="text/javascript"></script> <script src="/Libraries/GeoExt/lib/GeoExt.js" type="text/javascript"></script> <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js" type="text/javascript"></script> <div id="map"></div> <script type="text/javascript"> Ext.onReady(function() { Ext.QuickTips.init(); Ext.BLANK_IMAGE_URL = '/Libraries/Ext/resources/images/default/s.gif'; var layer = new OpenLayers.Layer.OSM.Mapnik( 'OpenStreetMap Mapnik', { sphericalMercator: true }, { isBaseLayer: true } ); var mapOptions = { projection: 'EPSG:900913', units: 'm', maxExtent: new OpenLayers.Bounds(1390414.0280576,7490505.7050394,1406198.2743956,7501990.3685372), minResolution: '0.125', maxResolution: '1000', restrictedExtent: new OpenLayers.Bounds(1390414.0280576,7490505.7050394,1406198.2743956,7501990.3685372), controls: [ ] }; map = new OpenLayers.Map('', mapOptions); var Navigation = new OpenLayers.Control.Navigation(); action = new GeoExt.Action( { control: new OpenLayers.Control.ZoomBox({out:false}), map: map, tooltip: "Zoom ind", iconCls: 'icon-zoom-in', toggleGroup: 'mapTools', group: 'mapTools' }); toolbarItems.push(action); action = new GeoExt.Action( { control: new OpenLayers.Control.ZoomBox({out:true}), map: map, tooltip: "Zoom ud", iconCls: 'icon-zoom-out', toggleGroup: 'mapTools', group: 'mapTools' }); toolbarItems.push(action); action = new GeoExt.Action({ control: new OpenLayers.Control.ZoomToMaxExtent(), map: map, iconCls: 'icon-zoom-max-extent', tooltip: 'Zoom helt ud' }); toolbarItems.push(action); map.addControl(Navigation); map.addLayer(layer); mapPanel = new GeoExt.MapPanel( { border: true, id: 'mapPanel', region: "center", map: map, tbar: toolbarItems }); mainViewport = new Ext.Viewport( { layout: "fit", hideBorders: true, items: { layout: "border", deferredRender: false, items: [ mapPanel ] } }); }); </script> </body> </html>

    Read the article

  • Set form field values in ExtJS

    - by jeremib
    I'm using ExtJS to create a formPanel: new Ext.FormPanel({ labelAlign: 'top', title: 'Loading Contact...', bodyStyle:'padding:5px', width: 600, autoScroll: true, closable: true, items: [{ layout:'column', border:false, items:[{ columnWidth:.5, layout: 'form', border:false, items: [{ xtype:'textfield', fieldLabel: 'First Name', name: 'first_name', id: 'first_name', anchor:'95%' }, { xtype:'datefield', fieldLabel: 'Birthdate', name: 'birthdate', width: 150, }] },{ columnWidth:.5, layout: 'form', border:false, items: [{ xtype:'textfield', fieldLabel: 'Last Name', name: 'last_name', anchor:'95%' },{ xtype:'textfield', fieldLabel: 'Email', name: 'email', vtype:'email', anchor:'95%' }] }] },{ xtype:'tabpanel', plain:true, activeTab: 0, height:300, /* * By turning off deferred rendering we are guaranteeing that the * form fields within tabs that are not activated will still be * rendered. This is often important when creating multi-tabbed * forms. */ deferredRender: false, defaults:{bodyStyle:'padding:10px'}, items:[{ title:'Address', layout:'form', defaults: {width: 230}, defaultType: 'textfield', items: [{ fieldLabel: 'Line1', name: 'line1', allowBlank:false, },{ fieldLabel: 'Line2', name: 'line2', },{ fieldLabel: 'City', name: 'city', allowBlank: false, },{ xtype:"combo", fieldLabel:"State", name:"state", hiddenName:"combovalue" }, { fieldLabel: 'Zipcode', name: 'zipcode', allowBlank: false, }] },{ title:'Phone Numbers', layout:'form', defaults: {width: 230}, defaultType: 'textfield', items: [{ fieldLabel: 'Home', name: 'home_phone', },{ fieldLabel: 'Cell', name: 'cell_phone' },{ fieldLabel: 'Emergency', name: 'emergency_phone' }] },{ cls:'x-plain', title:'Notes', layout:'fit', items: { xtype:'htmleditor', name:'notes', fieldLabel:'Notes' } }] }], buttons: [{ text: 'Save' },{ text: 'Cancel' }] }) How do I access the form fields by the name to set their value manually? Thanks

    Read the article

  • Private members when extending a class using ExtJS

    - by Protron
    I have done some research on the ExtJS forum regarding private methods and fields inside a extended class, and I couldn't find any real answer to this. And when I say an extended class I mean something like this: Ext.ux.MyExtendedClass = Ext.extend(Ext.util.Observable, { publicVar1: 'Variable visible from outside this class', constructor: function(config) { this.addEvents("fired"); this.listeners = config.listeners; }, // to show that I need to use the base class publicMethod1: function() { return 'Method which can be called form everywhere'; }, publicMethod2: function() { return this.publicMethod1() + ' and ' + this.publicVar1; } // to show how to access the members from inside another member }); The problem here is that everything is public. So, how do I add a new variable o method within the scope of MyExtendedClass that cannot be accessed from outside but can be access by the public methods?

    Read the article

  • extjs - center a formPanel on a normal panel

    - by Ben
    Hi there, I'm using extjs and just trying to solve a simple problem: I have a form with a fixed width. I want to Center this form within a normal Ext.Panel. I'm trying to achieve this the 'css-way' - setting the left and right margin to 'auto'. But this doesn' work, it seems the margins are just ignored. The Code: var curStateForm = new Ext.FormPanel({ title:'test', width:300, bodyStyle:'margin:5px auto 0 auto', items: [edIst, edAdjust, edSumme] }); var testPanel = new Ext.Panel({ width: '100%', frame:true, items:[curStateForm] }); Thx to all!

    Read the article

  • How to retrieve JSON Data Array from ExtJS Store

    - by user291928
    Is there a method allowing me to return my stored data in an ExtJS Grid Panel exactly the way I loaded it using: var data = ["value1", "value2"] Store.loadData(data); I would like to have a user option to reload the Grid, but changes to the store need to be taken into account. The user can make changes and the grid is dynamically updated, but if I reload the grid, the data that was originally loaded is shown even though the database has been updated with the new changes. I would prefer not to reload the page and just let them reload the grid data itself with the newly changed store. I guess im looking for something like this: var data = Store.getData(); //data = ["value1", "value2"] after its all said and done. Or is there a different way to refresh the grid with new data that I am not aware of. Even using the proxy still uses the "original" data, not the new store. Thanks in advance

    Read the article

  • Question regarding the ExtJS License

    - by stephemurdoch
    Let's say I create a CMS that uses ExtJS. I want to avoid the license fee, so I open-source the CMS on github. Now let's imagine that I make your friend Dave a website that uses my CMS. I spend three hundred hours designing a logo and designing the layout. Can I charge a fee for this, and would I be obliged to open-source Dave's website too or is it enough to just open-source the CMS? I find this LPGL license a little confusing. Say hi to Dave for me.

    Read the article

  • ExtJS TabPanel content does not shrink in IE6

    - by joshowen
    I'm using ExtJS 3.2 and have content inside of a tab panel, and the tab panel inside of a container in a Viewport. The actual TabPanel resizes correctly on the viewport size changes, but the content inside a panel in the TabPanel seems to be a fixed width and will not shrink when the window is resized.The strange thing is it grows if I increase the window size. How can I get the content inside a Tabpanel to shrink on window resizing. Sorry for this being confusing, my structure is this: Viewport (rendered to body, and sets defaults {monitorResize:true}) - Text Label - TabPanel - Tab - Container (Border Layout) - Panel 1 (Center) - Panel 2 (East) - Panel 3 (South) Thanks in advance!

    Read the article

  • ExtJS Data Grid Column renderer to have multiple values

    - by Podlsk
    Hi, I am wondering if it is possible in ExtJS to have several values of the data source available to the renderer of the column. For example with the "Actions" column, the id is passed to the renderer. However I require both the user_id and id passed to the render. How may I do this? table_cols = [{ header: "User ID", width: 30, sortable: true, dataIndex: 'user_id' }, { header: "Actions", width: 60, sortable: false, dataIndex: 'id', renderer: function(val) { //IF USER ID MEETS A CONSTRAINT PRINT THE ID } }]; Thanks.

    Read the article

  • itemdoubleclick event in ExtJS Charts

    - by Abdel Olakara
    Hi all, I got a strange issue today while working on ExtJS charts. I am trying to use some of the events for the chart when user clicks on the chart items. I found the following events are available: itemclick, itemdoubleclick, itemdrag, itemdragstart, itemdragend, itemmouseover, itemmouseout Here is my test chart where I have implemented all these events. Each event just create a list tag in my debuging console. The issue is, no matter what, itemdoubleclick do not get fired! what is the issue? Why is it not getting fired? xtype:'columnchart', width:600, height:350, id:'myChart', store: store, xField: 'month', yField: 'sales', listeners: { itemdoubleclick: function(o) { var dh = Ext.DomHelper; dh.append('consoleList', {tag: 'li', html: 'itemdoubleclick'}); } } In firebug console, I see that this event is registered. PS: In my code above, I have put only the event that is not working. Thanks in advance for your ideas and suggestions.

    Read the article

  • Change ExtJS Grid Height in Javascript

    - by williamtroup
    How can I point at the object of a ExtJS Grid and manually set the height (in pixels)? For example, with this same: var grid = new Ext.grid.GridPanel({ store: store, columns: [ {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'}, {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'}, {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'}, {header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'}, {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ], stripeRows: true, autoExpandColumn: 'company', height: 350, width: 600, title: 'Array Grid', // config options for stateful behavior stateful: true, stateId: 'grid' }); I would i be able to point at the "grid" object and then set the size of the grid? Any help would be fantastic!

    Read the article

  • Selecting elements that do not contain a certain ID using ExtJS

    - by pmdarrow
    I'm trying to select all the <input> elements of a form except ones with IDs containing the words foo or bar. How can I do this using ExtJS 2.3.0? I've tried the following: Ext.query("select,input:not([id*=foo][id*=bar])", "SomeForm");` ... but it doesn't work. Excluding IDs with foo in them seems to work fine: Ext.query("select,input:not([id*=foo])", "SomeForm")` I'm just not sure how to add a second ID substring. Any Ideas?

    Read the article

  • ExtJS (4.0) dynamic / lazy loading

    - by Paul
    Given a border layout with a west (navigation) and a center region. Let say I click on topic A in the west region, I want to replace (replace as in 'delete last topic') the center region with 'extjs' program code named topic_a.js I succeed in loading with this code: dynamicPanel = new Ext.Component({ loader: { url: '/www/file.htm', renderer: 'html', autoLoad: true, scripts: true } }); var oMainContainer = Ext.getCmp('maincontainer'); oMainContainer.show(); oMainContainer.add(dynamicPanel); But calling this the second time 'adds' things up in the center region and of course fails short in 'deleting', what would be a good approach?

    Read the article

  • ExtJS: Combobox in EditorGridPanel not selecting the desired item (with test case)

    - by TomH
    I'm using ExtJS to create an EditorGridPanel with a combobox for an editor in a cell. The combobox in my EditorGridPanel that is not working as I'd expect it to. When the user types the first letter of an item in the drop down list, the combobox seems to ignore it and select the first item in the list. I can reproduce the error consistently and have put together a test case here: http://cluebucket.com/dev/testcase/testcase.html Load the page and reproduce the behavior by the following -- note that this is all done using the keyboard, no mouse clicks: Click 'Add Record' (A new row is added to the grid) enter text in the text field. TAB to the Priority field without selecting anything (None will remain selected) TAB out of the Priority field. (A new row is added to the grid) enter text and TAB to the Priority field TYPE v (Very High is selected) TAB out of the priority field (A new row is added to the grid) enter text and TAB to the Priority field Type v (None is selected, but Very High should have been) TAB out of the priority field Enter text and TAB to the priority field Type l ('el') (Low is selected) TAB out, enter text, TAB to priority Type l (None is selected) It appears that whenever the user attempts to select the same value that was selected in the previous row, the combobox selects None. Any ideas? The code is available at cluebucket.com/dev/testcase/js/testcase.js Thoughts/Pointers/Corrections are appreciated!! thanks tom

    Read the article

  • ExtJs - Set a fixed width in a center layout in a Panel

    - by Benjamin
    Hi all, Using ExtJs. I'm trying to design a main which is divided into three sub panels (a tree list, a grid and a panel). The way it works is that you have a tree list (west) with elements, you click on an element which populates the grid (center), then you click on an element in the grid and that generates the panel (west). My main panel containing the three other ones has been defined with a layout 'border'. Now the problem I face is that the center layout (the grid) has been defined in the code with a fixed width and the west panel as an auto width. But when the interface gets generated, the grid width is suddenly taking all the space in the interface instead of the west panel. The code looks like that: var exploits_details_panel = new Ext.Panel({ region: 'east', autoWidth: true, autoScroll: true, html: 'test' }); var exploit_commands = new Ext.grid.GridPanel({ store: new Ext.data.Store({ autoDestroy: true }), sortable: true, autoWidth: false, region: 'center', stripeRows: true, autoScroll: true, border: true, width: 225, columns: [ {header: 'command', width: 150, sortable: true}, {header: 'date', width: 70, sortable: true} ] }); var exploits_tree = new Ext.tree.TreePanel({ border: true, region: 'west', width: 200, useArrows: true, autoScroll: true, animate: true, containerScroll: true, rootVisible: false, root: {nodeType: 'async'}, dataUrl: '/ui/modules/select/exploits/tree', listeners: { 'click': function(node) { } } }); var exploits = new Ext.Panel({ id: 'beef-configuration-exploits', title: 'Auto-Exploit', region: 'center', split: true, autoScroll: true, layout: { type: 'border', padding: '5', align: 'left' }, items: [exploits_tree, exploit_commands, exploits_details_panel] }); Here 'var exploits' is my main panel containing the three other sub panels. The 'exploits_tree' is the tree list containing some elements. When you click on one of the elements the grid 'exploit_commands' gets populated and when you click in one of the populated elements, the 'exploits_details_panel' panel gets generated. How can I set a fixed width on 'exploit_commands'? Thanks for your time.

    Read the article

  • Extjs Dynamic Grid

    - by rkenshin
    Hi, I'm trying to create a dynamic grid using Extjs. The grid is built and displayed when a click event is fired then an ajax request is sent to the server to fetch the columns, records and records definition a.k.a Store Fields. Each node could have different grid structure and that depends on the level of the node in the tree. The only way i came up with so far is function showGrid(response, request) { var jsonData = Ext.util.JSON.decode(response.responseText); var grid = Ext.getCmp('contentGrid'+request.params.owner); if(grid) { grid.destroy(); } var store = new Ext.data.ArrayStore({ id : 'arrayStore', fields : jsonData.recordFields, autoDestroy : true }); grid = new Ext.grid.GridPanel({ defaults: {sortable:true}, id:'contentGrid'+request.params.owner, store: store, columns: jsonData.columns, //width:540, //height:200, loadMask: true }); store.loadData(jsonData.records); if(Ext.getCmp('tab-'+request.params.owner)) { Ext.getCmp('tab-'+request.params.owner).show(); } else { grid.render('grid-div'); Ext.getCmp('card-tabs-panel').add({ id:'tab-'+request.params.owner, title: request.params.text, iconCls:'silk-tab', html:Ext.getDom('grid-div').innerHTML, closable:true }).show(); } } The function above is called when a click event is fired 'click': function(node) { Ext.Ajax.request({ url: 'showCtn', success: function(response, request) { alert('Success'); showGrid(response,request); }, failure: function(results, request) { alert('Error'); }, params: Ext.urlDecode(node.attributes.options); } The problem i'm getting with this code is that a new grid is displayed each time the showGrid function is called. The end user sees the old grids and the new one. To mitigate this problem, I tried destroying the grid and also removing the grid element on each request, and that seems to solve the problem only that records never get displayed this time. if(grid) { grid.destroy(true); } The behavior i'm looking for is to display the result of a grid within a tab and if that tab exists replaced the old grid. Any help is appreciated. Thank you

    Read the article

  • RIA IDE - Visual Studio 2010, FlashBuilder and ExtJS Designer

    - by Ronaldo Junior
    I've been playing around with Flex4 - the trial version - and is really quite good in terms of layout development - since I'm starting a new RIA project and we still on the "what platform" phase I better listen what you guys have to say. In Flashbuilder I can do the layout and mix with the back end script code really fast - the version 4 give me the power to even test the functionality of the server side script, etc and since I can use Fllashbuilder as a Eclipse plugin, I end up with only one IDE. On the other hand, with Silverlight, it looks like if I want a "drag and drop" approach to build my interface I would need Expression Blend and Visual Studio (full or express version). Is there a way out that? I mean, Visual Studio 2010 will come with some sort of Silverlight component palet so that you can easily drag and drop it on your interface like you would do with WPF, etc? I don't wanna use Blend - is way too much for what we need - taking the "coding XAML" by hand is out of question as well. A third approach is to use ExtJS - they have a new designer IDE that looks promising.

    Read the article

  • ExtJS: Autoscroll vertical FormPanels added to panel

    - by Sarge
    Hi All, I'm writing an app where I have a BorderLayout for the entire page. In the south part I have a Panel to which I add FormPanels. I would like to be able to scroll that Panel so I can scroll through the FormPanels. So far, nothing I've found from searches has helped. I don't quite understand what ExtJS requires in terms of the combination of LayoutManagers, setting the size and setting AutoScroll. Any partial tips will be gratefully followed up. A code snippet: createTrailJunctionPanel = function(trailJunction) { var trailJunctionPanel = new Ext.form.FormPanel({ labelWidth: 75, width: 350, defaultType: 'textfield', items: [{ fieldLabel: 'Junction Name', name: 'junction-name' }], autoScroll:true, //anchor: '100% 100%', height: 100 }); matchedTrailJunctionsPanel.add(trailJunctionPanel); if(trailJunction.publicTrailSegments.length == 0) { matchedTrailJunctionsPanel.add(new Ext.form.Label({text: 'No public trails matched'})); } else { var grid = new Ext.grid.GridPanel({ store: mapMatchObjectStore, columns: [ {id:'publicTrailSegment',header: 'Trail', width: 160, sortable: true, dataIndex: 'publicTrailSegment'} ], stripeRows: true, autoExpandColumn: 'publicTrailSegment', height: 350, width: 600, title: 'Matched Trail Junctions' }); matchedTrailJunctionsPanel.add(grid); } matchedTrailJunctionsPanel.doLayout(); } matchedTrailJunctionsPanel = new Ext.Panel({ title: "Matched Trail Junctions2", id: "matched-trail-junctions", autoScroll:true //layout: 'anchor' });

    Read the article

  • display image in a grid using extjs

    - by Abisha
    I am new to extjs. I want to display icon images for each grid elements. can you please healp me anybody? i am getting the image path from an xml file. my code is below. here i am displaying image path. i have to replace it by displaying image. Ext.onReady(function(){ var store = new Ext.data.Store({ url: 'new_frm.xml', reader: new Ext.data.XmlReader({ record: 'message', fields: [{name: 'first'},{name: 'last'},{name: 'company'},{name: 'email'},{name: 'gender'},{name: 'form-file'},{name: 'state'},{name: 'Live'},{name: 'content'}] }) }); var grid = new Ext.grid.GridPanel({ store: store, columns: [ {header: "First Name", width: 120, dataIndex: 'first', sortable: true}, {header: "Last Name", width: 180, dataIndex: 'last', sortable: true}, {header: "Company", width: 115, dataIndex: 'company', sortable: true}, {header: "Email", width: 100, dataIndex: 'email', sortable: true}, {header: "Gender", width: 100, dataIndex: 'gender', sortable: true}, {header: "Photo", width: 100, dataIndex: 'form-file', sortable: true}, {header: "State", width: 100, dataIndex: 'state', sortable: true}, {header: "Living with", width: 100, dataIndex: 'Live', sortable: true}, {header: "Commands", width: 100, dataIndex: 'content', sortable: true} ], renderTo:'example-grid', height:200 }); store.load(); });

    Read the article

  • Looking for recommnedation on JavaScript libraries in the leage of ExtJS and Qooxdoo for serious web

    - by Kabeer
    Hello. I'm looking for a JavaScript library for my web application. The application is very data intensive and has rich form controls (almost windows like). AJAX will be used liberally. The development platform is ASP.Net (mostly ASP.Net MVC will be used). I cannot pursue with ExtJs due to the price/license factor. I checked Qooxdoo but it is very windows-unfriendly. YIU fell short of my needs w.r.t. form controls it offers. Other libraries like jQuery do not offer rich form controls. So I am looking recommendations for a library that satisfies most of following needs: Rich UI controls Solid API for AJAX handling Employs good programming practices for scripting in frontend (preferably OO but not mandatory) Free. Else has only development cost and not production Windows friendly (or at least not unfriendly) Not monolithic. Should be independent (Not have development & production dependencies) Theme'ing should be easy (preferably wrapped by the library) I am not mentioning other basic needs (like browser compatibility). I hope any popular library will honor those.

    Read the article

  • Sort Grid Columns of mixed type in EXTJS Grid

    - by Amit
    Hello, I want to sort the extjs columns, I have the column type as float and from the server side i am getting values which can contain "-" value , now what happens the grid is displaying me the NaN value instead of - and the sort is not working anymore. My requirement is to create a custom sort which can sort first based on number and then sort based on string. Thanks to suggest as renderer also not works for me. My Json String is: {metaData:{"totalProperty":"total", "root":"records","fields":[{"header":"Part Number##false","name":"XJE010^VT-007!0","type":"string"},{"header":"Marketing Status##false","name":"STP716^VT-007!0","type":"string"},{"header":"Package##false","name":"XJE016^VT-007!0","type":"string"},{"header":"Automotive Grade##false","name":"STP472^VT-007!0","type":"string"},{"header":"VDSS##false","name":"XJG810^VT-007!0","type":"float"},{"header":"Drain Current (Dc)(I_D) % (A)##false","name":"XJG273^VT-006!0","type":"float"},{"header":"RDS(on) (@VGS=10V) % (&#937;)##false","name":"XJG640^VT-006!3","type":"float"},{"header":"Features##false","name":"GNP023^VT-007!0","type":"string"},{"header":"RDS(on) (@4.5 or 5V) % (&#937;)##false","name":"XJG640^VT-006!6","type":"float"},{"header":"RDS(on) (@2.7V) % (&#937;)##false","name":"XJG640^VT-006!7","type":"float"},{"header":"RDS(on) (@1.8V) % (&#937;)##false","name":"XJG640^VT-006!8","type":"float"},{"header":"Free Samples##false","name":"STP0881^VT-007!0","type":"string"},{"header":"Total Gate Charge(Qg) typ ()##true","name":"STP049^VT-002!0","type":"float"},{"header":"Total Power Dissipation(PD) % (W)##true","name":"XJG820^VT-006!0","type":"float"}]},"success":"true", "total":13,"records":[{"XJE010^VT-007!0":"STB80PF55$$/cn/analog/product/67164.jsp","STP716^VT-007!0":"Active","XJE016^VT-007!0":"D2PAK","STP472^VT-007!0":"_","XJG810^VT-007!0":"-55","XJG273^VT-006!0":"80","XJG640^VT-006!3":".018","GNP023^VT-007!0":"-","XJG640^VT-006!6":"-","XJG640^VT-006!7":"-","XJG640^VT-006!8":"-","STP0881^VT-007!0":"No","STP049^VT-002!0":"190","XJG820^VT-006!0":"300"},{"XJE010^VT-007!0":"STD10PF06$$/cn/analog/product/64543.jsp","STP716^VT-007!0":"Active","XJE016^VT-007!0":"IPAK TO-251 TO 252 DPAK","STP472^VT-007!0":"_","XJG810^VT-007!0":"-60","XJG273^VT-006!0":"-10","XJG640^VT-006!3":".2","GNP023^VT-007!0":"-","XJG640^VT-006!6":"-","XJG640^VT-006!7":"-","XJG640^VT-006!8":"-","STP0881^VT-007!0":"No ... Regards, Amit

    Read the article

  • HELP Retrieving the url parameter from a JSON store from a EXTJS ComboBox

    - by Newbie
    I am having a problem retrieving the parameters from the url section of a json store for a combobox in EXTJS from my code behind page in c#. The following is the code in the store: var ColorStore = new Ext.data.JsonStore( { autoLoad: true, url: '/proxies/ReturnJSON.aspx?view=rm_colour_view', root: 'Rows', fields: ['company', 'raw_mat_col_code', 'raw_mat_col_desc'] }); And the following code is in my code behind page: protected void Page_Load(object sender, EventArgs e) { string jSonString = ""; connectionClass.connClass func = new connectionClass.connClass(); DataTable dt = func.getDataTable("sELECT * from rm_colour_view"); //Response.Write(Request.QueryString["view"]); string w = Request.Params.Get("url"); string z = Request.Params.Get("view"); string x = Request.Params.Get("view="); string c = Request.Params.Get("?view"); string s = Request.QueryString.Get("view"); string d = Request.Params["?view="]; string f = Request.Form["ColorStore"]; jSonString = Serialize(dt); Response.Write(jSonString); } The string w has gives the following output: /proxies/ReturnJSON.aspx but all the others strings return null... How can rm_colour_view from the datastore then be retrived??? Any help would be appreciated! Thanks

    Read the article

  • EXTJS 3.2.1 EditorGridPanel - ComboBox with jsonstore

    - by Yoong Kim
    Hi, I am using EXTJS with an editorgridpanel and I am trying to to insert a combobox, populated with JsonStore. Here is a snapshot of my code: THE STORE: kmxgz.ordercmpappro.prototype.getCmpapproStore = function(my_url) { var myStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: my_url , method: 'POST' }) , reader: new Ext.data.JsonReader({ root: 'rows', totalProperty: 'total', id: 'list_cmpappro_id', fields: [ {name: 'list_cmpappro_id', mapping: 'list_cmpappro_id'} , {name: 'list_cmpappro_name', mapping: 'list_cmpappro_name'} ] }) , autoLoad: true , id: 'cmpapproStore' , listeners: { load: function(store, records, options){ //store is loaded, now you can work with it's records, etc. console.info('store load, arguments:', arguments); console.info('Store count = ', store.getCount()); } } }); return myStore; }; THE COMBO: kmxgz.ordercmpappro.prototype.getCmpapproCombo = function(my_store) { var myCombo = new Ext.form.ComboBox({ typeAhead: true, lazyRender:false, forceSelection: true, allowBlank: true, editable: true, selectOnFocus: true, id: 'cmpapproCombo', triggerAction: 'all', fieldLabel: 'CMP Appro', valueField: 'list_cmpappro_id', displayField: 'list_cmpappro_name', hiddenName: 'cmpappro_id', valueNotFoundText: 'Value not found.', mode: 'local', store: my_store, emptyText: 'Select a CMP Appro', loadingText: 'Veuillez patienter ...', listeners: { // 'change' will be fired when the value has changed and the user exits the ComboBox via tab, click, etc. // The 'newValue' and 'oldValue' params will be from the field specified in the 'valueField' config above. change: function(combo, newValue, oldValue){ console.log("Old Value: " + oldValue); console.log("New Value: " + newValue); }, // 'select' will be fired as soon as an item in the ComboBox is selected with mouse, keyboard. select: function(combo, record, index){ console.log(record.data.name); console.log(index); } } }); return myCombo; }; The combobox is inserted in an editorgridpanel. There's a renderer like this: Ext.util.Format.comboRenderer = function(combo){ return function(value, metadata, record){ alert(combo.store.getCount()); <== always 0!! var record = combo.findRecord(combo.valueField || combo.displayField, value); return record ? record.get(combo.displayField) : combo.valueNotFoundText; } }; When the grid is displayed the first time, instead of have the displayField, I have : "Value not found." And I have the alert : 0 (alert(combo.store.getCount())) from the renderer. But I can see in the console that the data have been correctly loaded! Even if I try to reload the store from the renderer (combo.store.load();), I still have the alert (0)! But when I select the combo to change the value, I can see the data and when I change the value, I can see the displayFiel! I don't understand what's the problem? Since now several days, I already tried all the solutions I found...but still nothing! Any advice is welcome! Yoong

    Read the article

< Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >