Search Results

Search found 32 results on 2 pages for 'formpanel'.

Page 2/2 | < Previous Page | 1 2 

  • ExtJS combobox acting like regular select

    - by bensiu
    Hi, I try to use ComboBox on FormPanel, it is defined like this: xtype: 'combo', name: 'Reasons', store: new Ext.data.ArrayStore({ id: 0, fields: [ 'myId', 'displayText' ], data: [ [ 1, 'Reason 1' ], [ 2, 'Second Reason' ], [ 3, 'Something else' ] ] }), typeAhead: false, mode: 'local', valueField: 'myId', displayField: 'displayText', allowBlank: false, editable: false, forceSelection: true I would like to act like a ordinary select element, when I have editable as false I not able to re-select anymore, when as true ( default ) I need to remove selection ( by backspace or delete ) in order to re-select. What else I should turn off in order to downgrade combobox to select or shpuld I consider to use other component instead ?

    Read the article

  • ExtJS align radiogroup in form

    - by bensiu
    I am looking for way to setup FormPanel that labels will be aligned left on left side (this is default) and field aligned rigth on right side - they are aligned left... how long I am dealing with DisplayField, TextField, or NumberField adding ctCls: 'x-form-element-currency', where .x-form-element-currency { text-align: right; } do the work and is nicely aligned to right My problem start when I try to do this same with radiogroup element (I want to have Yes-No radio select) ctCls: what adding class to the correct (in my opinion) container abowe radiogroup does not make aligment... What I do wrong ?

    Read the article

  • ExtJS panel does not render properly unless I open Firebug - WTF?

    - by Huuuze
    I have the following ExtJS Panel embedded in another Panel, which then resides in a TabPanel and the TabPanel is in a FormPanel. With that being said, these start/end date fields are initially displayed in very small cells -- the cells are so small that I see horizontal scroll bars. Now here's the weird part: if I open Firebug, everything pops into place. Does anyone know what's going on? Why isn't it rendering properly in the first place and why does Firebug cause everything to work properly simply by opening Firebug? var dateFields = new Ext.Panel({ id: 'dateFields', labelAlign: 'bottom', border: false, items: [{ layout: 'column', defaults: { columnWidth: 0.5 }, items: [{ layout: 'form', border: false, items: [{ xtype: 'datefield', name: 'start_date', fieldLabel: 'Start Date' }] }, { layout: 'form', border: false, items: [{ xtype: 'datefield', name: 'end_date', fieldLabel: 'End Date' }] }] }] });

    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

  • ExtJS: dynamically ajust layout after adding/removing some form fields

    - by Sergei Stolyarov
    I have form layout with some TextField elements and one HtmlEditor element. Some TextField elements are "hideable", i.e. could be hid or showed. After hiding/showing elements HtmlEditor instance break layout — there appear empty space or element doesn't end at the window border. Is it possible to tell to HtmlEditor instance use all remaining available space? Even in case when some elements are hidden/showed. I've tried to use anchor property, but it works well until some element removed from the layout. Updated Here is a sample code: var htmlEditor = new Ext.form.HtmlEditor({ anchor: '100% -54', hideLabel: true }); var fp = new Ext.form.FormPanel({ items: [{xtype: 'textfield', fieldLabel: 'zzz', mode: 'local'}, {xtype: 'textfield', fieldLabel: 'nnn', id: 'id-one', mode: 'local'}, htmlEditor] }); var w = new Ext.Window({layout: 'fit', height: 400, width: 600, tbar: [{text: 'click', handler: function() { // hide element Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); w.doLayout(); } }], items: fp }); w.show(); Execute, click toolbar button "click", one field should disappear, then look at empty space below htmleditor.

    Read the article

  • GridPanel in Extjs is not loaded

    - by pho3nix
    I have this code in my application, but this not load any data. Data is accessible but wont display in my gridpanel, anyone have idea, why? Ext.onReady(function () { Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; var btnAdd = new Ext.Button({ id: 'btnAdd', text: 'Adicionar', iconCls: 'application_add', handler: function (s) { } }); var btnEdit = new Ext.Button({ id: 'btnEdit', text: 'Editar', iconCls: 'application_edit', handler: function (s) { } }); var btnRemove = new Ext.Button({ id: 'btnRemove', text: 'Apagar', iconCls: 'application_delete', handler: function (s) { } }); var tbar = new Ext.Toolbar({ items: [btnAdd, btnEdit, btnRemove] }); var formFind = new Ext.FormPanel({ height: 100 }); var store = new Ext.data.JsonStore({ remoteSort: true, idProperty: 'ContentId', root: 'rows', totalProperty: 'results', fields: [ { name: 'ContentId', type: 'int' }, { name: 'Name' }, { name: 'Version' }, { name: 'State' }, { name: 'CreatedDateTime' }, { name: 'PublishedDateTime'}, { name: 'CreatedByUser' }, { name: 'PublishedByUser' } ], proxy: new Ext.data.ScriptTagProxy({ url: '/Admin/ArticleList' }) }); store.setDefaultSort('ContentId', 'desc'); var paging = new Ext.PagingToolbar({ store: store, pageSize: 25, displayInfo: true, displayMsg: 'Foram encontrados {2} registos. Mostrando {0} de {1}', emptyMsg: "Nenhum registo encontrado." }); var grid = new Ext.grid.GridPanel({ id: 'grid', height: 700, store: store, loadMask: true, loadingText: 'Carregando...', autoHeight: true, cm: new Ext.grid.ColumnModel ([ { id: 'ContentId', dataIndex: 'ContentId', header: 'Identif.', width: 60, sortable: true }, { id: 'Name', dataIndex: 'Name', header: 'Titulo', width: 75, sortable: true }, { id: 'Version', dataIndex: 'Version', header: 'Versão', width: 75, sortable: true }, { id: 'State', dataIndex: 'State', header: 'Estado', width: 75, sortable: true }, { id: 'CreatedDateTime', dataIndex: 'CreatedDateTime', header: 'Data de Criação', width: 85, sortable: true }, { id: 'PublishedDateTime', dataIndex: 'PublishedDateTime', header: 'Data de Publicação', width: 75, sortable: true }, { id: 'CreatedByUser', dataIndex: 'CreatedByUser', header: 'Criado por', width: 75, sortable: true }, { id: 'PublishedByUser', dataIndex: 'PublishedByUser', header: 'Publicado por', width: 85, sortable: true } ]), stripeRows: true, viewConfig: { forceFit: true }, bbar: paging }); var panel = new Ext.Panel({ id: 'panel', renderTo: Ext.getBody(), layout: 'fit', tbar: tbar, items: [grid] }); store.load(); // trigger the data store load });

    Read the article

  • Extjs internet explorer object not found problem.

    - by john misoskian
    hi; this code run firefox , but error on ie why ? please help me. xxx.js code: var gridFormf = new Ext.FormPanel({ id: 'company-form', frame: true, labelAlign: 'left', title: 'Is Emri', bodyStyle:'padding:5px', width: 1, tbar: [ newIsEmri,delIsEmri,edIsEmri,rapIsEmri,serIsEmri ], layout: 'column', // Specifies that the items will now be arranged in columns items: [ { columnWidth: 0.3, layout: 'fit', items: [{ columnWidth: 1, xtype: 'fieldset', labelWidth: 90, title:'Ekip / Servis', defaults: {width: 120, border:false}, // Default config options for child items defaultType: 'textfield', autoHeight: true, bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;', border: true, style: { "margin-left": "10px", // when you add custom margin in IE 6... "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0" // you have to adjust for it somewhere else }, items: [{ fieldLabel: 'Ekip / Personel', name: 'SERVIS_VEREN' }] },{ columnWidth: 1, xtype: 'fieldset', labelWidth: 90, title:'Ürün', defaults: {width: 120, border:false}, // Default config options for child items defaultType: 'textfield', autoHeight: true, bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;', border: true, style: { "margin-left": "10px", // when you add custom margin in IE 6... "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0" // you have to adjust for it somewhere else }, items: [{ fieldLabel: 'Cihaz', name: 'URUN_CIHAZ_ADI' }, { fieldLabel: 'Marka', name: 'URUN_MARKA_ADI' }, { fieldLabel: 'Model', name: 'URUN_MODEL_ADI' },{ fieldLabel: 'Seri No', name: 'URUN_SERI_NO' } ] }] },{ columnWidth: 0.3, layout: 'fit', items: [{ columnWidth: 1, xtype: 'fieldset', labelWidth: 90, title: 'Servis Gelis Türü', defaults: { width: 140, border: false }, // Default config options for child items defaultType: 'textfield', autoHeight: true, bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;', border: true, style: { "margin-left": "10px", // when you add custom margin in IE 6... "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0" // you have to adjust for it somewhere else }, items: [{ fieldLabel: 'Gelis Türü', name: 'SERVIS_GELIS_TURU' }] },RadioPanels ] },{ columnWidth: 0.3, layout: 'fit', items: [{ columnWidth:1, autoHeight: true, border: true, items: [gridAksesuar] },gridAriza,{ columnWidth: 1, xtype: 'textarea', labelWidth: 0, width:250, defaultType: 'textarea', autoHeight: true, border: false, name:'ARIZA_ACIKLAMASI' }] },{ columnWidth: 1.0, layout: 'fit', items: gridFormx }] }); My html code : <script src="/ApplicationJs/xxx.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function() { var viewport = new Ext.Viewport({ layout:'fit', items: [gridFormf] }); </script> Internet explorer return to error. Error description is object gridFormf is not found.

    Read the article

< Previous Page | 1 2