API tools faq
paste
Guest User

Untitled

a guest
Jul 17th, 2018
95
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.60 KB | None | 0 0
raw download clone embed print report
  1. Ext.onReady(function(){
  2.  
  3. Ext.QuickTips.init();
  4.  
  5. var simple = new Ext.FormPanel({
  6. labelWidth: 75, // label settings here cascade unless overridden
  7. url:'save-form.php',
  8. labelAlign: 'top',
  9. frame:false,
  10. title: 'Basic',
  11. bodyStyle:'padding:5px 5px 0',
  12.  
  13. width: 800,
  14. defaultType: 'textfield',
  15. layout: 'tableform',
  16.  
  17. layoutConfig: {
  18. tableAttrs: {
  19. style: { width: '100%' }
  20. },
  21.  
  22. columnWidths: [0.5,0.5],
  23. columns: 2,
  24. extraCls: 'simple-account-form-table'
  25.  
  26.  
  27. },
  28. defaults: {bodyStyle: 'padding:10px', width: 225},
  29. items: [
  30. {
  31. fieldLabel: 'Account Name',
  32. name: 'first',
  33. xtype: 'textfield',
  34. allowBlank:false,
  35. maxLength: 100,
  36.  
  37. value: '<%=@account.last_name%>'
  38.  
  39.  
  40. },{
  41. fieldLabel: 'Uppercase Account Name',
  42. xtype: 'textfield',
  43. name: 'first',
  44. allowBlank:false,
  45. value: '<%=@account.upper_last_name%>'
  46. },{
  47. fieldLabel: 'Account Type',
  48. xtype: 'textfield',
  49. name: 'last',
  50. grow: true,
  51. width: 300,
  52. value: '<%=@account.account_type%>'
  53. }, {
  54. fieldLabel: 'Division',
  55. xtype: 'textfield',
  56. name: 'company',
  57. grow: true,
  58. value: '<%=@account.division.description%>'
  59. }, new Ext.form.NumberField({
  60. fieldLabel: 'Bill Day',
  61. name: 'time',
  62. allowBlank: false,
  63. decimalPrecision: 0,
  64. maxLength: 28,
  65. minLength: 1,
  66. value: '<%=@account.bill_day%>',
  67. grow: true
  68. }), new Ext.form.Checkbox ({
  69. fieldLabel: 'Billable?',
  70. checked: <%=@account.billable?%>
  71. }), {
  72. fieldLabel: 'Sell Currency',
  73. xtype: 'textfield',
  74. name: 'first',
  75. allowBlank:false,
  76. value: '<%=@account.sell_currency_id%>',
  77. grow: true
  78. }, {
  79. fieldLabel: 'Buy Currency',
  80. xtype: 'textfield',
  81. name: 'last',
  82. value: '<%=@account.buy_currency_id%>',
  83. grow: true
  84. }, /* TODO: need to find out more about this field{
  85. fieldLabel: 'Class',
  86. name: 'company',
  87. xtype: 'textfield',
  88. value: '<%=@account.attributes['class']%>'
  89. }*/
  90. ]/*,
  91. buttons: [{
  92. text: 'Save'
  93. },{
  94. text: 'Cancel'
  95. }] */
  96. });
  97.  
  98. var contactTypeStore = new Ext.data.ArrayStore({
  99. id: 'contact-type-store',
  100. data: <%= ContactType.collection_for_select.to_json %>,
  101. fields: ['label', 'id']
  102. });
  103.  
  104. var countryStore = new Ext.data.ArrayStore({
  105. data: <%= Country.collection_for_select.to_json %>,
  106. fields: ['label', 'id']
  107. });
  108.  
  109.  
  110. var countryCombo = new Ext.form.ComboBox({
  111. store: countryStore,
  112. typeAhead: false,
  113. mode: 'local',
  114. triggerAction: 'all',
  115. editable: false,
  116. width: 75,
  117. displayField: 'label',
  118. valueField: 'id'
  119. });
  120.  
  121.  
  122.  
  123. var contactTypeCombo = new Ext.form.ComboBox({
  124. store: contactTypeStore,
  125. typeAhead: false,
  126. mode: 'local',
  127. triggerAction: 'all',
  128. editable: false,
  129. width: 75,
  130. displayField: 'label',
  131. valueField: 'id'
  132. });
  133.  
  134.  
  135. var contactReader = new Ext.data.JsonReader({
  136. idProperty: 'id',
  137. root: 'data',
  138. fields: [
  139. {name: 'id'},
  140. {name: 'contact_type_id',
  141. sortType: function(value) {
  142. var index = contactTypeStore.find("id", value);
  143. var result = contactTypeStore.getAt(index)
  144. return result.get('label');
  145. }},
  146. {name: 'active?', type: 'bool'},
  147. {name: 'contact_id'},
  148. {name: 'contact.first_name', allowBlank: true},
  149. {name: 'contact.last_name', allowBlank: true},
  150. {name: 'contact.title', allowBlank: true},
  151. {name: 'contact.email', allowBlank: true},
  152. {name: 'contact.office', allowBlank: true},
  153. {name: 'contact.cell', allowBlank: true},
  154. {name: 'contact.fax', allowBlank: true},
  155. {name: 'contact.pager', allowBlank: true},
  156. {name: 'contact.internal'},
  157. {name: 'contact.notes', allowBlank: true},
  158. {name: 'address.street', mapping: 'contact.address', convert: function(v){
  159. return v ? v.street : undefined;
  160. }},
  161. {name: 'address.city', mapping: 'contact.address', convert: function(v){
  162. return v ? v.city :undefined;
  163. }},
  164. {name: 'address.state', mapping: 'contact.address', convert: function(v){
  165. return v ? v.state : undefined;
  166. }},
  167. {name: 'address.zip_code', mapping: 'contact.address', convert: function(v){
  168. return v ? v.zip_code : undefined;
  169. }},
  170. {
  171. name: 'address.country_id',
  172. mapping: 'contact.address',
  173. convert: function(v){
  174. return v ? v.country_id : undefined;
  175. },
  176. sortType: function(value) {
  177. var index = countryStore.find("id", value);
  178. var result = countryStore.getAt(index)
  179. return result.get('label');
  180. }
  181. }
  182. ,
  183. {name: 'address.street2', mapping: 'contact.address', convert: function(v){
  184. return v ? v.street2 : undefined;
  185. }}
  186.  
  187.  
  188.  
  189.  
  190.  
  191. ]
  192. });
  193.  
  194.  
  195.  
  196.  
  197. var contactsStore = new Ext.data.GroupingStore({
  198. id: 'contactsJsonStore',
  199. sortInfo: {
  200. field: 'contact_type_id',
  201. direction: 'ASC' // or 'DESC' (case sensitive for local sorting)
  202. },
  203. reader: contactReader,
  204. proxy: new Ext.data.HttpProxy({
  205. url: '<%=account_contacts_path(@account)%>',
  206. method: 'GET'
  207.  
  208. }),
  209. groupField: 'contact.internal',
  210. listeners: {
  211. beforeload: function(store){
  212. if (contactsGrid && contactsGrid.el) {
  213. contactsGrid.el.mask('Please wait while we refresh the data', 'x-mask-loading');
  214. }
  215.  
  216.  
  217. },
  218. load: function(store){
  219. if (contactsGrid && contactsGrid.el){
  220. contactsGrid.el.unmask();
  221. }
  222. }
  223. }
  224.  
  225.  
  226. });
  227.  
  228. contactsStore.load();
  229.  
  230.  
  231. var editor = new Ext.ux.grid.RowEditor({
  232. saveText: 'Update'
  233. });
  234.  
  235.  
  236.  
  237.  
  238. var contactsGrid = new Ext.grid.GridPanel({
  239. store: contactsStore,
  240. title: "Active Accounts",
  241. height: 400,
  242. margins: '0 5 5 5',
  243. readOnly: false,
  244. //plugins: [editor],
  245. listeners: {
  246. activate: function(panel){
  247. console.log("activate!!!");
  248. }
  249. },
  250.  
  251. frame:false,
  252. tbar: [ new Ext.form.Checkbox({
  253. boxLabel: 'Show Inactive',
  254. listeners: {
  255. check: function(checkbox, checked){
  256. if (checked){
  257. contactsStore.reload({
  258. params: {
  259. show_inactive: true
  260. }
  261. });
  262. contactsGrid.setTitle("All Accounts");
  263.  
  264. } else {
  265. contactsStore.reload({
  266. params: {
  267. show_inactive: false
  268. }
  269. });
  270. contactsGrid.setTitle("Active Accounts");
  271.  
  272. }
  273.  
  274. }
  275. }
  276. })
  277.  
  278.  
  279. ],
  280. view: new Ext.grid.GroupingView({
  281. groupTextTpl: '<tpl if="groupId.indexOf(\'internal\') != -1 && gvalue==\'Y\'">Internal Contacts</tpl>' +
  282. '<tpl if="groupId.indexOf(\'internal\') != -1 && gvalue==\'N\'">External Contacts</tpl>' +
  283. '<tpl if="groupId.indexOf(\'internal\') == -1">{text}</tpl>'
  284. }),
  285.  
  286. columns: [
  287. {
  288. header: "Type",
  289. width: 150,
  290. dataIndex: 'contact_type_id',
  291. sortable: true,
  292. triggerAction: 'all',
  293. editor: contactTypeCombo,
  294. renderer: Ext.util.Format.comboRenderer(contactTypeCombo)
  295. },
  296. {
  297. id: 'contact_first_name',
  298. header: 'FirstName',
  299. dataIndex: 'contact.first_name',
  300. width: 150,
  301. sortable: true,
  302. editor: {
  303. xtype: 'textfield',
  304. allowBlank: true
  305. }
  306. }, {
  307. id: 'contact_first_name',
  308. header: 'Last Name',
  309. dataIndex: 'contact.last_name',
  310. width: 150,
  311. sortable: true,
  312. editor: {
  313. xtype: 'textfield',
  314. allowBlank: true
  315. }
  316. }, new Ext.grid.CheckColumn({
  317. header: 'Active?',
  318. dataIndex: 'active?',
  319. width: 55,
  320. disabled: true
  321. }), {
  322. id: 'contact_title',
  323. header: 'Title',
  324. dataIndex: 'contact.title',
  325. width: 100,
  326. sortable: true,
  327. editor: {
  328. xtype: 'textfield',
  329. allowBlank: true
  330. }
  331. }, {
  332. id: 'contact_email',
  333. header: 'Email',
  334. dataIndex: 'contact.email',
  335. width: 150,
  336. sortable: true,
  337. editor: {
  338. xtype: 'textfield',
  339. allowBlank: true
  340. }
  341. }, {
  342. id: 'contact_office',
  343. header: 'Office',
  344. dataIndex: 'contact.office',
  345. width: 100,
  346. sortable: true,
  347. editor: {
  348. xtype: 'textfield',
  349. allowBlank: true
  350. }
  351. }, {
  352. id: 'contact_cell',
  353. header: 'Cell',
  354. dataIndex: 'contact.cell',
  355. width: 100,
  356. sortable: true,
  357. editor: {
  358. xtype: 'textfield',
  359. allowBlank: true
  360. }
  361. }, {
  362. id: 'contact_fax',
  363. header: 'Fax',
  364. dataIndex: 'contact.fax',
  365. width: 100,
  366. sortable: true,
  367. editor: {
  368. xtype: 'textfield',
  369. allowBlank: true
  370. }
  371. }, {
  372. id: 'contact_pager',
  373. header: 'Pager',
  374. dataIndex: 'contact.pager',
  375. width: 100,
  376. sortable: true,
  377. editor: {
  378. xtype: 'textfield',
  379. allowBlank: true
  380. }
  381. }, {
  382. id: 'contact_internal',
  383. header: 'Internal',
  384. dataIndex: 'contact.internal',
  385. width: 50,
  386. sortable: true,
  387. align: 'center',
  388. editor: {
  389. xtype: 'textfield',
  390. allowBlank: false
  391. }
  392. }, {
  393. id: 'contact_name',
  394. header: 'Notes',
  395. dataIndex: 'contact.notes',
  396. width: 200,
  397. sortable: true,
  398. editor: {
  399. xtype: 'textfield',
  400. allowBlank: true
  401. }
  402. }, {
  403. id: 'address_id',
  404. header: 'Street',
  405. dataIndex: 'address.street',
  406. width: 100,
  407. sortable: true,
  408. editor: {
  409. xtype: 'textfield',
  410. allowBlank: true
  411. }
  412. }, {
  413. id: 'address_id',
  414. header: 'Street Line 2',
  415. dataIndex: 'address.street2',
  416. width: 100,
  417. sortable: true,
  418. editor: {
  419. xtype: 'textfield',
  420. allowBlank: true
  421. }
  422. },
  423. {
  424. id: 'address_id',
  425. header: 'City',
  426. dataIndex: 'address.city',
  427. width: 75,
  428. sortable: true,
  429. editor: {
  430. xtype: 'textfield',
  431. allowBlank: true
  432. }
  433. },
  434. {
  435. id: 'address_id',
  436. header: 'State',
  437. dataIndex: 'address.state',
  438. width: 75,
  439. sortable: true,
  440. editor: {
  441. xtype: 'textfield',
  442. allowBlank: true
  443. }
  444. },
  445. {
  446. id: 'address_id',
  447. header: 'Country',
  448. dataIndex: 'address.country_id',
  449. width: 75,
  450. sortable: true,
  451. editor: countryCombo,
  452. renderer: Ext.util.Format.comboRenderer(countryCombo)
  453.  
  454. }
  455.  
  456.  
  457.  
  458.  
  459. ],
  460. sm: new Ext.grid.RowSelectionModel({singleSelect:true})
  461.  
  462.  
  463.  
  464.  
  465.  
  466. });
  467.  
  468.  
  469.  
  470.  
  471.  
  472.  
  473.  
  474.  
  475.  
  476. var accountPanel = new Ext.Panel({
  477. renderTo: 'account-form',
  478. labelAlign: 'top',
  479. title: 'Account Information',
  480. bodyStyle:'padding:5px',
  481.  
  482. width: 900,
  483.  
  484. items: [{
  485. xtype:'tabpanel',
  486. activeTab: 0,
  487. defaults:{autoHeight:true, bodyStyle:'padding:10px'},
  488. frame:false,
  489. items:[simple ,{
  490. title:'Contacts',
  491. items: [contactsGrid],
  492. listeners: {
  493. click: function(panel){
  494. console.log("click");
  495. }
  496. }
  497. }, {
  498. title:'Other',
  499. layout:'form',
  500. defaults: {width: 230},
  501. defaultType: 'displayfield',
  502.  
  503. items: [
  504. <% if @account.active_date %>{
  505. fieldLabel: "Active Date",
  506. value: '<%=@account.active_date%>'
  507. },
  508. <% end %>
  509. <% if @account.inactive_date%> {
  510. fieldLabel: "Inactive Date",
  511. value: '<%=@account.inactive_date%>'
  512. },
  513. <% end %>
  514. {
  515. fieldLabel: 'Entered Date',
  516. value: '<%= @account.entered_date %>'
  517. },{
  518. fieldLabel: 'Created Date',
  519. value: '<%= @account.create_date %>'
  520. },{
  521. fieldLabel: 'Created By',
  522. value: '<%= @account.create_uid %>'
  523. },{
  524. fieldLabel: 'Updated Date',
  525. value: '<%= @account.update_date %>'
  526. }, {
  527. fieldLabel: 'Updated By',
  528. value: '<%= @account.update_uid %>'
  529. }]
  530. }]
  531. }]
  532. });
  533.  
  534. });
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!